diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b77bfa0a4c3e9a8ed39efdf69ff24e3b5e631bae..6a3c0533502da43b5e627898d13096e24be2693d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,9 @@
<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>
diff --git a/frontend/src/components/common/Contact.vue b/frontend/src/components/common/Contact.vue
index f8cad87c858ccf462fadc8835de9afef20b2407e..c0a35fd43eb37eba09a800ad720904972108b1e8 100644
--- a/frontend/src/components/common/Contact.vue
+++ b/frontend/src/components/common/Contact.vue
@@ -1,11 +1,13 @@
<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 {
diff --git a/frontend/src/components/common/FAQ.vue b/frontend/src/components/common/FAQ.vue
index d724c92dde18a8c06d5d03db5a369f62b0710fdc..4aeff415344ec06b3113a84532ebf0d9169c4a4e 100644
--- a/frontend/src/components/common/FAQ.vue
+++ b/frontend/src/components/common/FAQ.vue
@@ -1,17 +1,19 @@
<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 {
diff --git a/frontend/src/components/common/Footer.vue b/frontend/src/components/common/Footer.vue
index 8f6c1a9aeadbc165465e8e457565b152b43d84c3..19c72574b2303296e0997ebdc6094ac6ec356139 100644
--- a/frontend/src/components/common/Footer.vue
+++ b/frontend/src/components/common/Footer.vue
@@ -1,11 +1,19 @@
<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>© 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>
diff --git a/frontend/src/components/common/Header.vue b/frontend/src/components/common/Header.vue
index de22f73e58385bab6fe03c204470ded30255483d..cb4e67b1675b14adf94c53ff66e811fc80e4fa43 100644
--- a/frontend/src/components/common/Header.vue
+++ b/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>
diff --git a/frontend/src/components/common/HeroSection.vue b/frontend/src/components/common/HeroSection.vue
index 6dcaeebcbeb7538f82ac48cbc6b0153a3b887995..2e375e4e655f46a55917cc31a4a5b1b5afcbd33e 100644
--- a/frontend/src/components/common/HeroSection.vue
+++ b/frontend/src/components/common/HeroSection.vue
@@ -1,6 +1,6 @@
<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 {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a014ef512800ae4266b50668be1ee6404e348533..0f7880c6dc7fb0f913b7e249158a4979d370f9f7 100644
--- a/frontend/src/index.css
+++ b/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;
}
}