most

src/App.vue

 <template>
-  <div class="app-wrapper">
-    <!-- Fejléc komponens, gombokkal (Termékek / Login) -->
+  <!-- Fejléc: széltől-szélig -->
   <Header @navigate="handleNavigate" />
 
-    <!-- Dinamikusan váltott tartalom: 'main' vagy 'login' nézet -->
+  <!-- Központi nézet: mainContent vagy login -->
   <component :is="currentPage" @navigate="handleNavigate" />
 
-    <!-- Lábléc komponens -->
+  <!-- Lábléc: széltől-szélig -->
   <Footer />
-  </div>
 </template>
 
 <script setup>
@@ -18,45 +16,35 @@ import Footer from './components/Footer.vue'
 import MainContent from './components/MainContent.vue'
 import Login from './components/Login.vue'
 
-// Elérhető nézetek (key => komponens)
+// A lehetséges nézetek: "main", "login"
 const pages = {
   main: MainContent,
   login: Login
 }
 
-// Alap nézet: 'main' (Főoldal)
+// Alapértelmezett nézet: main (főoldal)
 const currentView = ref('main')
 
-// Navigáció kezelése
+// A gyermek-komponensektől jövő "navigate" eseményt kezeljük
 function handleNavigate(page) {
   currentView.value = page
 }
 
-// Komponens kiválasztása a currentView alapján
+// Kiszámoljuk, éppen melyik komponens töltsön be
 const currentPage = computed(() => {
   return pages[currentView.value] || MainContent
 })
 </script>
 
 <style>
-/* Teljes képernyős (fullscreen) háttér, stb. */
+/* Globális stílusok: háttérszín, margók eltüntetése, full width */
 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
+  background-color: #fbeaea; /* Tüzes-pirosas */
   font-family: Arial, sans-serif;
-  background-color: #fbeaea; /* Tüzes/ vöröses háttér */
   box-sizing: border-box;
 }
-
-/* Az egész alkalmazás csomagolója */
-.app-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh; 
-}
-
-/* A <router-view> vagy <component> feletti és alatti részeket 
-   (Header, Footer) rugalmasan kezeli ez a megközelítés */
 </style>

src/components/Footer.vue

@@ -2,17 +2,19 @@
 </script>
 
 <template>
-  <footer>
+  <footer class="footer-container">
     <p>&copy; 2025 Ignis - Minden jog fenntartva.</p>
   </footer>
 </template>
 
 <style scoped>
-footer {
-  background-color: #800000;
+.footer-container {
+  width: 100%;               /* Teljes szélesség */
+  background-color: #800000; /* Sötétebb piros */
   color: white;
   text-align: center;
   padding: 10px;
-  margin-top: auto; /* hogy a láblécet az oldal aljára "tolja" */
+  box-sizing: border-box;
+  margin-top: auto; /* Ha van flex-szerkezet, az aljára kerül */
 }
 </style>

src/components/Header.vue

@@ -4,38 +4,89 @@ const emit = defineEmits(['navigate'])
 </script>
 
 <template>
-  <header>
+  <header class="header-container">
+    <!-- Logo + felirat -->
+    <div class="logo-container">
+      <!-- TŰZ LOGÓ (inline SVG) -->
+      <svg class="fire-logo" viewBox="0 0 24 24">
+        <!-- Egyszerű tűzalak – fehér kitöltéssel, piros háttér előtt -->
+        <path 
+          fill="white"
+          d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z"
+        />
+      </svg>
       <h1>Ignis - Számítógép alkatrészek</h1>
+    </div>
+
+    <!-- Gombok: főoldal, bejelentkezés, kosár -->
     <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>
+
+      <!-- Kosár gomb (ikon) – egyelőre 'cart' nézet nincs, 
+           de ha később lesz, navigálhatnánk oda: -->
+      <button class="cart-btn" @click="emit('navigate', 'cart')">
+        <svg class="cart-icon" viewBox="0 0 24 24">
+          <path
+            fill="white"
+            d="M7 4H2v2h3l3.6 7.59-1.35 2.41C6.52 16.37 7.48 18 9 18h11v-2H9.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.85 6H6.31l-.95-2H2V2h4a1 1 0 0 1 .92.61L7.68 4H7z"
+          />
+        </svg>
+      </button>
     </nav>
   </header>
 </template>
 
 <style scoped>
-header {
-  background-color: #b30000;
+.header-container {
+  width: 100%;              /* Teljes szélesség */
+  background-color: #b30000; /* Piros fejléc */
   color: white;
   padding: 20px;
-  text-align: center;
-  width: 100%;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Logó és felirat egymás mellett, középre igazítva */
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+}
+.fire-logo {
+  width: 40px;
+  height: 40px;
 }
+
+/* Menü gombok */
 nav {
   margin-top: 10px;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
 }
 button {
   background-color: #800000;
   color: white;
   border: none;
-  margin: 0 5px;
   padding: 8px 12px;
   cursor: pointer;
 }
 button:hover {
   background-color: #cc0000;
 }
+
+/* Kosár gomb, ikon */
+.cart-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cart-icon {
+  width: 20px;
+  height: 20px;
+}
 </style>

src/components/Login.vue

@@ -12,7 +12,7 @@ function onLogin() {
 }
 
 function onRegister() {
-  // Regisztrációs logika / route / popup
+  // Regisztráció
   alert('Regisztráció gomb megnyomva!')
 }
 
@@ -37,7 +37,7 @@ function onBack() {
     <!-- Regisztrációs gomb -->
     <button class="register-btn" @click="onRegister">Regisztráció</button>
 
-    <!-- Vissza gomb (főoldal) -->
+    <!-- Visszagomb (főoldalra) -->
     <button class="back-btn" @click="onBack">Vissza</button>
   </div>
 </template>

src/components/MainContent.vue

@@ -37,17 +37,13 @@
 
 <style scoped>
 .container {
-  /* Teljes szélesség */
-  width: 100%;
-  /* Minden oldalról pici belső margó */
+  width: 100%;                /* Teljes szélesség */
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center; /* középre rendez */
+  justify-content: center;    /* Középre igazítjuk a termékeket */
   box-sizing: border-box;
 }
-
-/* Termék kártya */
 .product {
   background-color: white;
   border: 1px solid #e0a0a0;
@@ -77,8 +73,6 @@
   color: #555;
   margin-bottom: 10px;
 }
-
-/* Kosár gomb */
 .product button {
   background-color: #cc0000;
   color: white;
@@ -91,7 +85,7 @@
   background-color: #990000;
 }
 
-/* Reszponzív: mobilon a termékek egymás alá kerülnek */
+/* Mobilnézet: a termékek egymás alá csúsznak */
 @media (max-width: 600px) {
   .container {
     flex-direction: column;