first commit

src/components/navbar/SearchBar.jsx

@@ -0,0 +1,20 @@
+import { Search } from "lucide-react";
+
+const SearchBar = () => {
+  return (
+    <div className="flex flex-1 max-w-sm mx-4">
+      <div className="relative w-full">
+        <input
+          type="text"
+          placeholder="Search products, brands..."
+          className="w-full h-10 pl-10 pr-4 rounded-full border border-gray-300 text-sm sm:text-base
+                     focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary
+                     transition-shadow duration-300 shadow-sm hover:shadow-md"
+        />
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;