feat(frontend): Improve UI responsiveness and content presentation

- fix: resolve UI issues on tablet and phone
- feat: update header elements ordering for phone and tablet
- style: limit width of FAQ and Contact for better readability
- fix: implement minor UI fixes

frontend/src/App.vue

 <template>
-  <div id="app">
+  <div id="app" class="flex flex-col min-h-screen">
     <Header />
-    <router-view class="main-content" />
+    <div class="flex-grow">
+      <router-view />
+    </div>
     <Footer />
   </div>
 </template>
@@ -27,10 +29,7 @@ export default {
 
 <style scoped lang="postcss">
 #app {
-  @apply min-h-screen flex flex-col;
+  @apply flex flex-col;
 }
 
-.main-content {
-  @apply flex-grow;
-}
-</style>
\ No newline at end of file
+</style>

frontend/src/components/common/Contact.vue

 <template>
-  <div class="cta">
-    <h2>Kapcsolat</h2>
-    <p>Ha kérdése vagy észrevétele van, ne habozzon felvenni velünk a kapcsolatot.</p>
-    <div class="contact-info">
-      <p>Cím: 1234 Kutya utca, Kutyaváros</p>
-      <p>Telefon: +36 1 234 5678</p>
-      <p>Email: info@vauvau.hu</p>
+  <div class="cta-container">
+    <div class="cta">
+      <h2>Kapcsolat</h2>
+      <p>Ha kérdése vagy észrevétele van, ne habozzon felvenni velünk a kapcsolatot.</p>
+      <div class="contact-info">
+        <p>Cím: 1234 Kutya utca, Kutyaváros</p>
+        <p>Telefon: +36 1 234 5678</p>
+        <p>Email: info@vauvau.hu</p>
+      </div>
     </div>
   </div>
 </template>
@@ -17,8 +19,13 @@ export default {
 </script>
 
 <style scoped lang="postcss">
+.cta-container {
+  @apply flex justify-center;
+}
+
 .cta {
   @apply text-center py-8 px-6 mb-8 bg-blue-500 rounded-xl shadow-lg;
+  @apply max-w-screen-md;
 }
 
 .cta h2 {

frontend/src/components/common/FAQ.vue

 <template>
-  <div class="cta">
-    <h2>Gyakran Ismételt Kérdések</h2>
-    <div class="faq-item">
-      <h3>Mikor vannak nyitvatartási időink?</h3>
-      <p>Nyitvatartási időink minden nap 9:00 és 18:00 között vannak.</p>
-    </div>
-    <div class="faq-item">
-      <h3>Hogyan lehet örökbefogadni?</h3>
-      <p>Az örökbefogadásra személyesen van lehetőség a menhelyen. Kérjük, látogasson el hozzánk, hogy találkozhasson a kutyákkal és részletes információt kapjon az örökbefogadási folyamatról.</p>
-    </div>
-    <div class="faq-item">
-      <h3>Milyen ételt adhatok a kutyámnak?</h3>
-      <p>A kutyák számára ajánlott minőségi tápot válasszunk, amely megfelel az ő koruknak, méretüknek és aktivitási szintjüknek.</p>
+  <div class="cta-container">
+    <div class="cta">
+      <h2>Gyakran Ismételt Kérdések</h2>
+      <div class="faq-item">
+        <h3>Mikor vannak nyitvatartási időink?</h3>
+        <p>Nyitvatartási időink minden nap 9:00 és 18:00 között vannak.</p>
+      </div>
+      <div class="faq-item">
+        <h3>Hogyan lehet örökbefogadni?</h3>
+        <p>Az örökbefogadásra személyesen van lehetőség a menhelyen. Kérjük, látogasson el hozzánk, hogy találkozhasson a kutyákkal és részletes információt kapjon az örökbefogadási folyamatról.</p>
+      </div>
+      <div class="faq-item">
+        <h3>Milyen ételt adhatok a kutyámnak?</h3>
+        <p>A kutyák számára ajánlott minőségi tápot válasszunk, amely megfelel az ő koruknak, méretüknek és aktivitási szintjüknek.</p>
+      </div>
     </div>
   </div>
 </template>
@@ -23,8 +25,13 @@ export default {
 </script>
 
 <style scoped lang="postcss">
+.cta-container {
+  @apply flex justify-center;
+}
+
 .cta {
   @apply text-center py-8 px-6 mb-8 bg-blue-500 rounded-xl shadow-lg;
+  @apply max-w-screen-md;
 }
 
 .cta h2 {

frontend/src/components/common/Footer.vue

 <template>
-  <footer>
-    <p>© 2024 Vau-Vau Alapítvány. Minden jog fenntartva.</p>
+  <footer class="footer bg-blue-500 shadow-md py-6 px-8 text-white">
+    <div class="container mx-auto text-center">
+      <p>&copy; 2024 Vau-Vau Alapítvány. Minden jog fenntartva.</p>
+    </div>
   </footer>
 </template>
 
 <script>
 export default {
-  name: 'Footer'
+  name: 'Footer',
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="postcss">
+.footer {
+  @apply bg-blue-500 shadow-md py-6 px-8 text-white;
+}
+</style>

frontend/src/components/common/Header.vue

@@ -2,12 +2,12 @@
   <nav>
     <router-link to="/" class="title">Vau-Vau Alapítvány</router-link>
     <ul>
-      <li><router-link to="/" class="nav-link" active-class="active-link">Főoldal</router-link></li>
-      <li><router-link to="/dogs" class="nav-link" active-class="active-link">Kutyák</router-link></li>
-      <li><router-link to="/contact" class="nav-link" active-class="active-link">Elérhetőség</router-link></li>
-      <li><router-link to="/faq" class="nav-link" active-class="active-link">Gyakori kérdések</router-link></li>
+      <li v-for="(item, index) in menuItems" :key="index">
+        <router-link :to="item.route" class="nav-link" active-class="active-link">{{ item.name }}</router-link>
+      </li>
       <li v-if="!token">
-        <router-link to="/login" class="nav-link login-link" active-class="active-link-login">Bejelentkezés</router-link>
+        <router-link to="/login" class="nav-link login-link" active-class="active-link-login">Bejelentkezés
+        </router-link>
       </li>
       <li v-else>
         <router-link to="#" @click.prevent="logout" class="nav-link logout-link login-link">Kijelentkezés</router-link>
@@ -17,13 +17,23 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import {mapState} from 'vuex';
 
 export default {
   name: 'Header',
   computed: {
     ...mapState(['token']),
   },
+  data() {
+    return {
+      menuItems: [
+        {name: 'Főoldal', route: '/'},
+        {name: 'Kutyák', route: '/dogs'},
+        {name: 'Elérhetőség', route: '/contact'},
+        {name: 'Gyakori kérdések', route: '/faq'},
+      ]
+    };
+  },
   methods: {
     logout() {
       if (window.confirm('Biztosan ki szeretnél jelentkezni?')) {
@@ -37,18 +47,23 @@ export default {
 
 <style scoped lang="postcss">
 .title {
-  @apply mb-4;
+  @apply mb-4 sm:mb-0 flex flex-col sm:flex-row justify-between items-center p-4 bg-blue-500 text-white;
 }
+
 .nav-link {
   @apply inline-block px-4 py-2 text-white bg-orange-500 rounded-lg hover:bg-orange-600 active:bg-orange-700;
 }
 
 nav {
-  @apply flex justify-between items-center p-4 bg-blue-500 text-white;
+  @apply p-4 bg-blue-500 text-white;
+}
+
+nav ul {
+  @apply flex flex-col sm:flex-row;
 }
 
 nav a {
-  @apply mr-4;
+  @apply mr-4 mb-2 sm:mb-0;
 }
 
 .login-link {
@@ -70,4 +85,46 @@ nav a {
 .active-link:hover {
   @apply bg-orange-700;
 }
-</style>
\ No newline at end of file
+
+@media (min-width: 768px) {
+  .title {
+    @apply mb-4 text-center sm:mb-0 sm:text-left;
+  }
+
+  .nav-link {
+    @apply inline-block px-4 py-2 text-white bg-orange-500 rounded-lg hover:bg-orange-600 active:bg-orange-700;
+  }
+
+  nav {
+    @apply p-4 bg-blue-500 text-white flex flex-wrap items-center justify-between;
+  }
+
+  nav ul {
+    @apply flex flex-wrap items-center justify-center sm:justify-start;
+  }
+
+  nav a {
+    @apply mr-4 mb-2;
+  }
+
+  .login-link {
+    @apply bg-green-500 hover:bg-green-600 active:bg-green-700;
+  }
+
+  .logout-link {
+    @apply bg-red-500 hover:bg-red-600 active:bg-red-700;
+  }
+
+  .active-link {
+    @apply bg-orange-700;
+  }
+
+  .active-link-login {
+    @apply bg-green-700;
+  }
+
+  .active-link:hover {
+    @apply bg-orange-700;
+  }
+}
+</style>

frontend/src/components/common/HeroSection.vue

 <template>
   <section class="hero">
-    <img class="hero-image"
+    <img class="hero-image rounded"
          :src="heroImage"
          alt="Hero Image">
     <h1>Üdv a Vau-Vau Alapítvány weboldalán!</h1>
@@ -22,7 +22,7 @@ export default {
 
 <style scoped lang="postcss">
 .hero {
-  @apply bg-cover bg-center py-20 text-center flex flex-col items-center justify-center;
+  @apply bg-cover bg-center py-1 text-center flex flex-col items-center justify-center;
 }
 
 .hero-image {

frontend/src/index.css

@@ -3,7 +3,7 @@
 @import 'tailwindcss/utilities';
 
 body {
-    @apply flex flex-col justify-between text-center bg-blue-200 text-gray-800;
+    @apply flex flex-col justify-between text-center bg-blue-200 text-gray-800 min-h-screen;
 }
 
 .hero {
@@ -27,7 +27,7 @@ nav h1 {
 }
 
 nav ul {
-    @apply flex space-x-4 justify-center items-center;
+    @apply flex flex-col space-y-4 justify-center items-center sm:flex-row sm:space-y-0 sm:space-x-4;
 }
 
 nav ul li {
@@ -109,7 +109,7 @@ button {
 }
 
 @media (min-width: 600px) {
-        body {
+    body {
         @apply text-base;
     }
 
@@ -123,17 +123,17 @@ button {
         @apply text-base;
     }
 
-        button {
+    button {
         @apply text-base px-3 py-2 mt-6 mb-6;
     }
 
-        .title {
+    .title {
         @apply text-xl font-bold mb-6;
     }
 }
 
 @media (min-width: 768px) {
-        body {
+    body {
         @apply text-lg;
     }
 
@@ -147,17 +147,17 @@ button {
         @apply text-lg;
     }
 
-        button {
+    button {
         @apply text-lg px-4 py-2 mt-8 mb-8;
     }
 
-        .title {
+    .title {
         @apply text-2xl font-bold mb-8;
     }
 }
 
 @media (min-width: 992px) {
-        body {
+    body {
         @apply text-xl;
     }
 
@@ -171,17 +171,17 @@ button {
         @apply text-xl;
     }
 
-        button {
+    button {
         @apply text-xl px-5 py-3 mt-10 mb-10;
     }
 
-        .title {
+    .title {
         @apply text-3xl font-bold mb-10;
     }
 }
 
 @media (min-width: 1200px) {
-        body {
+    body {
         @apply text-2xl;
     }
 
@@ -195,11 +195,11 @@ button {
         @apply text-2xl;
     }
 
-        button {
+    button {
         @apply text-2xl px-6 py-4 mt-12 mb-12;
     }
 
-        .title {
+    .title {
         @apply text-4xl font-bold mb-12;
     }
 }