improvements

Signed-off-by: rishichawda <[email protected]>

Author: rishichawda

src/components/landing/hero.astro

@@ -6,7 +6,6 @@ const navItems = [
   // { label: "services", path: "#services" },
   { label: "articles", path: "/articles/" },
   { label: "gallery", path: "/gallery/" },
-  { label: "search", path: "/search/" },
 ];
 import logo from "../../../content/assets/logo/Group 489.svg";
 ---
@@ -28,7 +27,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
       >
         <Image alt="logo" width={40} class="max-h-auto max-w-10" src={logo} />
       </div>
-      <nav class="flex flex-wrap justify-center gap-1 md:gap-4">
+      <nav class="flex flex-wrap justify-center gap-1 md:gap-4 items-center">
         {
           navItems.map((item) => (
             <a
@@ -40,6 +39,61 @@ import logo from "../../../content/assets/logo/Group 489.svg";
             </a>
           ))
         }
+        
+        <!-- Search Icon and Input -->
+        <div class="relative">
+          <button
+            id="search-icon-btn"
+            class="flex justify-center items-center px-3 md:px-4 h-[2.3125rem] rounded-lg text-white hover:bg-white/10 hover:cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-white/50"
+            aria-label="Open search"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
+            </svg>
+          </button>
+          
+          <!-- Search Input Form (initially hidden) -->
+          <form
+            id="search-form"
+            method="GET"
+            action="/search/"
+            class="absolute right-0 top-full mt-2 hidden z-50"
+          >
+            <div class="flex items-center gap-2 bg-white/95 backdrop-blur-sm rounded-lg p-2 shadow-lg border border-white/20 min-w-[280px]">
+              <input
+                type="text"
+                name="q"
+                id="search-input"
+                placeholder="Search articles, gallery..."
+                class="flex-1 px-3 py-2 text-sm border-0 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none font-['Montserrat_Variable']"
+                autocomplete="on"
+              />
+              <button
+                type="submit"
+                class="bg-brand-600 hover:bg-brand-700 text-white p-2 rounded-md transition-colors duration-200 flex-shrink-0"
+                aria-label="Search"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
+                </svg>
+              </button>
+            </div>
+          </form>
+        </div>
       </nav>
     </div>
   </div>
@@ -182,3 +236,73 @@ import logo from "../../../content/assets/logo/Group 489.svg";
     </a>
   </div>
 </section>
+
+<script>
+  function searchInput() {
+    const searchIconBtn = document.getElementById('search-icon-btn');
+    const searchForm = document.getElementById('search-form');
+    const searchInput = document.getElementById('search-input') as HTMLInputElement;
+    
+    if (searchIconBtn && searchForm && searchInput) {
+      searchIconBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        // Show the search form with animation
+        searchForm.classList.remove('hidden');
+        searchForm.style.opacity = '0';
+        searchForm.style.transform = 'translateY(-10px)';
+        
+        // Animate in
+        requestAnimationFrame(() => {
+          searchForm.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
+          searchForm.style.opacity = '1';
+          searchForm.style.transform = 'translateY(0)';
+        });
+        
+        // Focus on the input field
+        setTimeout(() => searchInput.focus(), 100);
+      });
+      
+      // Function to close search form
+      function closeSearchForm() {
+        searchForm.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
+        searchForm.style.opacity = '0';
+        searchForm.style.transform = 'translateY(-10px)';
+        
+        setTimeout(() => {
+          searchForm.classList.add('hidden');
+          searchInput.value = '';
+        }, 200);
+      }
+      
+      // Handle clicking outside to close the search form
+      document.addEventListener('click', function(e) {
+        const target = e.target as Node;
+        if (!searchForm.contains(target) && !searchIconBtn.contains(target)) {
+          closeSearchForm();
+        }
+      });
+      
+      // Handle form submission
+      searchForm.addEventListener('submit', function(e) {
+        const query = searchInput.value.trim();
+        if (!query) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        // Always navigate to /search?q=... (absolute path)
+        window.location.href = `/search/?q=${encodeURIComponent(query)}`;
+      });
+      
+      // Handle escape key to close search
+      searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          closeSearchForm();
+        }
+      });
+    }
+  }
+  document.addEventListener('DOMContentLoaded', searchInput);
+  document.addEventListener('astro:page-load', searchInput);
+</script>