my first commit

src/App.js

@@ -9,6 +9,7 @@ import Packages from "./pages/Packages.js";
 import Navbar from "./components/Navbar.js";
 import Footer from "./components/Footer.js";
 import FlightsResults from "./pages/FlightsResults.js"; //  results page
+import AppRouter from "./components/router/index.js"
 
 
 
@@ -27,13 +28,14 @@ function App() {
       </Helmet>
       <Navbar />
       <div className="container mt-5">
-        <Routes>
+        <AppRouter />
+        {/* <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/flights" element={<Flights />} />
           <Route path="/hotels" element={<Hotels />} />
           <Route path="/packages" element={<Packages />} />
           <Route path="/flights/results" element={<FlightsResults />} />
-        </Routes>
+        </Routes> */}
       </div>
       <Footer />
     </>

src/components/router/index.js

+import React, { lazy, Suspense, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from "react-router-dom";
+
+const Home = lazy(()=>import('../../pages/Home.js'));
+const Flights = lazy(()=>import('../../pages/Flights.js'));
+const Hotels = lazy(()=>import('../../pages/Hotels.js'));
+const Packages = lazy(()=>import('../../pages/Packages.js'));
+const FlightsResults = lazy(()=>import('../../pages/FlightsResults.js'));
+
+
+
+// Main Router Component
+const AppRouter = () => {
+    return (
+        // <Router>
+            <Suspense fallback={<div>Loading...</div>}>
+                {/* <LanguageRedirect /> */}
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/flights" element={<Flights />} />
+                    <Route path="/hotels" element={<Hotels />} />
+                    <Route path="/packages" element={<Packages />} />
+                    <Route path="/flights/results" element={<FlightsResults />} />
+                </Routes>
+            </Suspense>
+        // </Router>
+
+    );
+};
+export default AppRouter;
\ No newline at end of file

src/pages/Home.js

@@ -26,6 +26,8 @@ const Home = () => {
       <Helmet>
         <title>hlafly - Home</title>
         <meta name="description" content="Explore the best travel deals and vacation packages." />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
       </Helmet>
 
       {/* Hero Section */}
@@ -96,15 +98,15 @@ const Home = () => {
         <h2 className="text-center mb-4">Popular Destinations</h2>
         <div className="row">
           <div className="col-md-4">
-            <img src="/images/dubai.jpg" className="img-fluid rounded" alt="Dubai" />
+            <img src="/images/dubai.jpeg" className="img-fluid rounded" alt="Dubai" />
             <h5 className="mt-2 text-center">Dubai</h5>
           </div>
           <div className="col-md-4">
-            <img src="/images/paris.jpg" className="img-fluid rounded" alt="Paris" />
+            <img src="/images/Paris.jpeg" className="img-fluid rounded" alt="Paris" />
             <h5 className="mt-2 text-center">Paris</h5>
           </div>
           <div className="col-md-4">
-            <img src="/images/bali.jpg" className="img-fluid rounded" alt="Bali" />
+            <img src="/images/Bali.jpeg" className="img-fluid rounded" alt="Bali" />
             <h5 className="mt-2 text-center">Bali</h5>
           </div>
         </div>