update navbar with search bar and discover page

client/src/App.jsx

@@ -6,6 +6,7 @@ import HomePage from './pages/homePage';
 import FlowerDictionary from './pages/flowerDictionary';
 import ScanAFlower from './pages/scanAFlower';
 import FlowerGallery from './pages/flowerGallery';
+import DiscoverPage from './pages/discoverPage';
 import IndividualFlowerPage from './pages/individualFlowerPage';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
@@ -23,6 +24,7 @@ const App = () => {
     let element = useRoutes([
         { path: '/', element: <HomePage /> },
         { path: '/about', element: <AboutPage /> },
+        { path: '/discover', element: <DiscoverPage /> },
         { path: '/dictionary', element: <FlowerDictionary /> },
         { path: '/scan', element: <ScanAFlower /> },
         { path: '/gallery', element: <FlowerGallery /> },

client/src/components/NavBar.css

@@ -48,3 +48,36 @@
     border-bottom-color: #2a7abf;
     font-weight: 500;
 }
+
+.navbar-search {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.navbar-search input {
+    font-family: Avenir, "Century Gothic", sans-serif;
+    font-size: 0.875rem;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    outline: none;
+    background: rgba(255, 255, 255, 0.7);
+    color: #373D3F;
+    width: 160px;
+    transition: border-color 0.2s, width 0.2s;
+}
+
+.navbar-search input:focus {
+    border-color: #2a7abf;
+    width: 200px;
+}
+
+.navbar-search button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 4px;
+    line-height: 1;
+}

client/src/components/NavBar.jsx

@@ -1,20 +1,41 @@
-import { NavLink } from 'react-router';
+import { NavLink, useNavigate } from 'react-router';
+import { useState } from 'react';
 import './NavBar.css';
 
 const NavBar = () => {
+    const [query, setQuery] = useState('');
+    const navigate = useNavigate();
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        if (query.trim()) {
+            navigate(`/discover?search=${encodeURIComponent(query.trim())}`);
+            setQuery('');
+        }
+    };
+
     return (
         <nav className="navbar">
             <NavLink to="/" className="navbar-brand">
                 🌸 FlowerHunt
             </NavLink>
             <ul className="navbar-links">
-                <li><NavLink to="/" end>Home</NavLink></li>
+                <li><NavLink to="/discover">Discover Flowers</NavLink></li>
                 <li><NavLink to="/dictionary">Flower Dictionary</NavLink></li>
                 <li><NavLink to="/scan">Scan-A-Flower</NavLink></li>
                 <li><NavLink to="/gallery">Flower Gallery</NavLink></li>
-                {/* <li><NavLink to="/about">About</NavLink></li>
-                <li><NavLink to="/contact">Contact</NavLink></li> */}
             </ul>
+            <form className="navbar-search" onSubmit={handleSearch}>
+                <input
+                    type="text"
+                    placeholder="Search flowers..."
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                />
+                <button type="submit" aria-label="Search">
+                    🔍
+                </button>
+            </form>
         </nav>
     );
 };

client/src/pages/discoverPage.jsx

@@ -0,0 +1,5 @@
+const DiscoverPage = () => {
+    return <div><h1>Discover Flowers</h1></div>;
+};
+
+export default DiscoverPage;