Update 5 files

- /src/components/Login.vue
- /src/components/MainContent.vue
- /src/components/Footer.vue
- /src/components/Header.vue
- /src/App.vue

src/App.vue

+<template>
+  <div>
+    <!-- Fejléc komponens, két gombbal (Termékek / Login) -->
+    <Header @navigate="handleNavigate" />
+
+    <!-- A központi rész: dinamikusan cseréljük ki a komponenseket 
+         currentView alapján. -->
+    <component :is="currentPage" @navigate="handleNavigate" />
+
+    <!-- Lábléc komponens -->
+    <Footer />
+  </div>
+</template>
+
 <script setup>
+import { ref, computed } from 'vue'
 import Header from './components/Header.vue'
-import MainContent from './components/MainContent.vue'
 import Footer from './components/Footer.vue'
+import MainContent from './components/MainContent.vue'
+import Login from './components/Login.vue'
+
+// „Nézetek” táblázata – kulcs: a belső, rövid név, 
+//   érték: maga a .vue komponens
+const pages = {
+  main: MainContent,
+  login: Login
+}
+
+// currentView: kezdetben a 'main' (Főoldal)
+const currentView = ref('main')
+
+// Függvény a „navigáció” kezelésére 
+function handleNavigate(page) {
+  currentView.value = page
+}
+
+// A router szerű váltáshoz kigyűjtjük a komponensreferenciát
+const currentPage = computed(() => {
+  return pages[currentView.value] || MainContent
+})
 </script>
 
-<template>
-  <Header />
-  <MainContent />
-  <Footer />
-</template>
+<style>
+/* Globális stílus, pl. a piros hátteret, betűtípus beállítást ide teheted */
 
-<style scoped>
 body {
-  margin: 0;
   font-family: Arial, sans-serif;
+  margin: 0;
+  background-color: #fbeaea;
 }
 </style>

src/components/Footer.vue

 <script setup>
-
 </script>
 
 <template>
-
+  <footer>
+    <p>&copy; 2025 Ignis - Minden jog fenntartva.</p>
+  </footer>
 </template>
 
 <style scoped>
-
+footer {
+  background-color: #800000;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  margin-top: 20px;
+}
 </style>

src/components/Header.vue

 <script setup>
-
+import { defineEmits } from 'vue'
+const emit = defineEmits(['navigate'])
 </script>
 
 <template>
-
+  <header>
+    <h1>Ignis - Számítógép alkatrészek</h1>
+    <nav>
+      <!-- Gomb a főoldalra (termékek) -->
+      <button @click="emit('navigate', 'main')">Termékek</button>
+      <!-- Gomb a bejelentkezéshez -->
+      <button @click="emit('navigate', 'login')">Bejelentkezés</button>
+    </nav>
+  </header>
 </template>
 
 <style scoped>
-
+header {
+  background-color: #b30000;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}
+nav {
+  margin-top: 10px;
+}
+/* Egyszerű nav-gombok */
+button {
+  background-color: #800000;
+  color: white;
+  border: none;
+  margin: 0 5px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #cc0000;
+}
 </style>

src/components/Login.vue

 <script setup>
+import { defineEmits, ref } from 'vue'
 
+const emit = defineEmits(['navigate'])
+
+const username = ref('')
+const password = ref('')
+
+function onLogin() {
+  // Példa: valós logikánál AJAX / fetch a backendhez
+  alert(`Bejelentkezés: ${username.value}`)
+}
+
+function onRegister() {
+  // Például: navigáció egy "Register" komponensre, 
+  // vagy popup, stb. Itt csak alert:
+  alert('Regisztráció gomb megnyomva!')
+}
+
+function onBack() {
+  emit('navigate', 'main')
+}
 </script>
 
 <template>
+  <div id="login">
+    <h2>Bejelentkezés</h2>
+    <form @submit.prevent="onLogin">
+      <label for="username">Felhasználónév</label>
+      <input type="text" id="username" v-model="username" required />
 
+      <label for="password">Jelszó</label>
+      <input type="password" id="password" v-model="password" required />
+
+      <button type="submit">Belépés</button>
+    </form>
+    
+    <!-- Regisztrációs gomb -->
+    <button class="register-btn" @click="onRegister">Regisztráció</button>
+
+    <!-- Visszagomb (főoldalra) -->
+    <button class="back-btn" @click="onBack">Vissza</button>
+  </div>
 </template>
 
 <style scoped>
-
+#login {
+  max-width: 320px;
+  margin: 40px auto;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+}
+#login h2 {
+  margin-top: 0;
+  color: #b30000;
+}
+#login form {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+#login label {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  text-align: left;
+  color: #800000;
+}
+#login input {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+#login button {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #b30000;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+#login button:hover {
+  background-color: #cc0000;
+}
+.register-btn {
+  background-color: #990000;
+}
+.back-btn {
+  background-color: #800000;
+  margin-left: 10px;
+}
 </style>

src/components/MainContent.vue

 <script setup>
-
 </script>
 
 <template>
- <main>
-  <h1>Welcome to the Main Content</h1>
-  <p>This is where the main content of the application will go.</p>
-  <p>Feel free to add more components or content here.</p>
+  <main class="container">
+    <!-- Termék #1 -->
+    <div class="product">
+      <img src="https://via.placeholder.com/250x150" alt="Termék képe">
+      <h3>Intel Core i5-12400F</h3>
+      <div class="category">Kategória: CPU</div>
+      <p>Ár: 65 000 Ft</p>
+      <div class="stock">Raktáron: 12 db</div>
+      <button>Kosárba</button>
+    </div>
+
+    <!-- Termék #2 - Akciós -->
+    <div class="product">
+      <div class="discount">Akciós!</div>
+      <img src="https://via.placeholder.com/250x150" alt="Termék képe">
+      <h3>NVIDIA RTX 3060</h3>
+      <div class="category">Kategória: GPU</div>
+      <p><s>200 000 Ft</s> <strong>180 000 Ft</strong></p>
+      <div class="stock">Raktáron: 4 db</div>
+      <button>Kosárba</button>
+    </div>
+
+    <!-- Termék #3 -->
+    <div class="product">
+      <img src="https://via.placeholder.com/250x150" alt="Termék képe">
+      <h3>Kingston 16GB DDR4</h3>
+      <div class="category">Kategória: RAM</div>
+      <p>Ár: 20 000 Ft</p>
+      <div class="stock">Raktáron: 27 db</div>
+      <button>Kosárba</button>
+    </div>
   </main>
 </template>
 
 <style scoped>
-
+.container {
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.product {
+  background-color: white;
+  border: 1px solid #e0a0a0;
+  border-radius: 8px;
+  width: 250px;
+  margin: 10px;
+  padding: 15px;
+  text-align: center;
+  box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
+  position: relative;
+}
+.product img {
+  width: 100%;
+  height: auto;
+}
+.product h3 {
+  margin: 10px 0 5px 0;
+}
+.category {
+  font-size: 0.9em;
+  color: #800000;
+  margin-bottom: 5px;
+}
+.stock {
+  font-size: 0.9em;
+  color: #555;
+  margin-bottom: 10px;
+}
+.product button {
+  background-color: #cc0000;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  width: 100%;
+}
+.product button:hover {
+  background-color: #990000;
+}
+/* „Tűz-effekt” akciós címke */
+.discount {
+  display: inline-block;
+  padding: 5px 8px;
+  background-color: #ff4500; 
+  color: #fff;
+  border-radius: 4px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  animation: flame-flicker 1.2s infinite alternate;
+}
+@keyframes flame-flicker {
+  0% {
+    box-shadow: 0 0 10px #ff4500;
+  }
+  100% {
+    box-shadow: 0 0 20px #ff0000;
+  }
+}
 </style>