From 2ed7cc7b86f257f51851a6f426082954321f9cb3 Mon Sep 17 00:00:00 2001
From: kusowl <kushal.saha@outlook.com>
Date: Thu, 19 Feb 2026 11:33:07 +0530
Subject: [PATCH] Refactor: Header and Footer Links - add searchbar, account
 and cart icon in navbar - add navgiation links in footer - make the text
 bigger in footer

---
 src/app/core/layouts/footer/footer.html | 12 ++++++--
 src/app/core/layouts/header/header.html | 39 +++++++++++++------------
 src/app/core/layouts/header/header.ts   |  3 +-
 src/styles.css                          |  4 +++
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/app/core/layouts/footer/footer.html b/src/app/core/layouts/footer/footer.html
index e241492..e0e7851 100644
--- a/src/app/core/layouts/footer/footer.html
+++ b/src/app/core/layouts/footer/footer.html
@@ -1,6 +1,6 @@
-<footer class="bg-gray-900 text-gray-500 py-4 mt-4 gap-5 text-[0.60rem] wrapper">
+<footer class="bg-gray-900 text-gray-500 py-4 mt-4 gap-5 text-xs font-bold wrapper">
   <a href="/" class="px-3 py-1 bg-white text-gray-800 font-black font-space">eKart</a>
-  <div class="grid md:grid-cols-3 mt-2">
+  <div class="grid md:grid-cols-4 mt-2">
     <div class="footer-links">
       <a href="">
         <lucide-angular [img]="MailIcon" class="w-3" />
@@ -15,6 +15,14 @@
         St. Adam Street, 34, Rouja Chak</a
       >
     </div>
+
+    <div class="footer-links">
+      <a href="">Home</a>
+      <a href="">Products</a>
+      <a href="">About Us</a>
+      <a href="">Contact Us</a>
+    </div>
+
     <div class="footer-links">
       <a href="">Facebook: eKart</a>
       <a href="">Instagram: eKart</a>
diff --git a/src/app/core/layouts/header/header.html b/src/app/core/layouts/header/header.html
index 9f3f379..8780077 100644
--- a/src/app/core/layouts/header/header.html
+++ b/src/app/core/layouts/header/header.html
@@ -1,28 +1,29 @@
 <header>
-  <nav class="wrapper py-4 flex justify-between items-center">
+  <nav class="wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center">
     <div class="">
       <a href="/" class="px-3 py-1 bg-gray-800 text-white">eKart</a>
     </div>
+
+    <div class="flex-1 grid grid-cols-[1fr_auto]">
+      <input
+        type="text"
+        class="w-full border border-gray-300 text-sm rounded-full rounded-r-none px-6 py-1"
+        placeholder="Search watches, brands, products..."
+      />
+      <button class="btn-ghost group rounded-l-none! py-1 px-3 border-l-0!">
+        <lucide-angular
+          [img]="SearchIcon"
+          class="w-5 group-active:scale-80 transition-all duration-200 ease-out"
+        />
+      </button>
+    </div>
+
     <div class="flex space-x-4">
-      <ul class="flex space-x-4 font-medium font-space text-sm text-gray-600">
-        <li>
-          <a href="">Home</a>
-        </li>
-        <li>
-          <a href="">Products</a>
-        </li>
-        <li>
-          <a href="">About Us</a>
-        </li>
-        <li>
-          <a href="">Contact Us</a>
-        </li>
-      </ul>
-      <div class="flex space-x-3 text-gray-600">
-        <button>
-          <lucide-angular [img]="UserIcon" class="w-5 te" />
+      <div class="flex text-gray-600">
+        <button class="btn-ghost py-1 px-2 rounded-r-none!">
+          <lucide-angular [img]="UserIcon" class="w-5" />
         </button>
-        <button>
+        <button class="btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
           <lucide-angular [img]="CartIcon" class="w-5" />
         </button>
       </div>
diff --git a/src/app/core/layouts/header/header.ts b/src/app/core/layouts/header/header.ts
index d1ed962..17a07bc 100644
--- a/src/app/core/layouts/header/header.ts
+++ b/src/app/core/layouts/header/header.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { LucideAngularModule, User, ShoppingCart } from 'lucide-angular';
+import { LucideAngularModule, User, ShoppingCart, Search } from 'lucide-angular';
 @Component({
   selector: 'app-header',
   imports: [LucideAngularModule],
@@ -9,4 +9,5 @@ import { LucideAngularModule, User, ShoppingCart } from 'lucide-angular';
 export class Header {
   readonly UserIcon = User;
   readonly CartIcon = ShoppingCart;
+  readonly SearchIcon = Search;
 }
diff --git a/src/styles.css b/src/styles.css
index 2a01c4a..04e70a1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -15,3 +15,7 @@
 .wrapper {
   @apply px-5 sm:px-15;
 }
+
+.btn-ghost {
+  @apply text-gray-600 flex justify-center border border-gray-300  rounded-full hover:bg-gray-800 hover:text-gray-200 transition-all duration-200 ease-out;
+}