SEO changes

src/App.js

-import { Route, Routes } from "react-router-dom";
+import React from "react";
+import {Router, Route, Routes } from "react-router-dom";
+import { Helmet } from "react-helmet";
+import "bootstrap/dist/css/bootstrap.min.css";
 import Home from "./pages/Home.js";
 import Flights from "./pages/Flights.js";
 import Hotels from "./pages/Hotels.js";
@@ -10,8 +13,13 @@ import Footer from "./components/Footer.js";
 function App() {
   return (
     <>
+      <Helmet>
+        <title>Chalpado - Best Travel Deals</title>
+        <meta name="description" content="Find the best deals on flights, hotels, and travel packages with Chalpado." />
+        <meta name="keywords" content="flights, hotels, travel deals, vacation packages" />
+      </Helmet>
       <Navbar />
-      <div className="container mt-4">
+      <div className="container mt-5">
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/flights" element={<Flights />} />

src/components/Footer.js

@@ -2,8 +2,12 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <footer className="bg-light text-center py-3 mt-4">
-      <p>&copy; 2025 HLAFLY. All rights reserved.</p>
+    <footer className="bg-dark text-white text-center py-3 mt-5">
+      <p>&copy; 2025 Chalpado. All rights reserved.</p>
+      <div>
+        <a href="#" className="text-white mx-2">Privacy Policy</a>
+        <a href="#" className="text-white mx-2">Terms of Service</a>
+      </div>
     </footer>
   );
 };

src/components/Navbar.js

@@ -4,14 +4,17 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 const Navbar = () => {
   return (
-    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
       <div className="container">
-        <Link className="navbar-brand" to="/">HLAFLY</Link>
-        <div className="collapse navbar-collapse">
+        <Link className="navbar-brand" to="/">Chalpado</Link>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
           <ul className="navbar-nav ms-auto">
-            <li className="nav-item"><Link className="nav-link" to="/flights">Flights</Link></li>
-            <li className="nav-item"><Link className="nav-link" to="/hotels">Hotels</Link></li>
-            <li className="nav-item"><Link className="nav-link" to="/packages">Packages</Link></li>
+            <li className="nav-item"><Link className="nav-link text-white" to="/flights">Flights</Link></li>
+            <li className="nav-item"><Link className="nav-link text-white" to="/hotels">Hotels</Link></li>
+            <li className="nav-item"><Link className="nav-link text-white" to="/packages">Packages</Link></li>
           </ul>
         </div>
       </div>

src/pages/Home.js

 import React from "react";
+import { Helmet } from "react-helmet";
 
 const Home = () => {
   return (
-    <div>
-      <h1>Welcome to HLAFLY</h1>
-      <p>Your one-stop solution for flights, hotels, and travel packages.</p>
+    <div className="text-center mt-5">
+      <Helmet>
+        <title>Chalpado - Home</title>
+        <meta name="description" content="Explore the best travel deals and vacation packages." />
+      </Helmet>
+      <h1>Welcome to Chalpado</h1>
+      <p>Find the best deals on flights, hotels, and travel packages.</p>
+      <button className="btn btn-primary">Start Exploring</button>
     </div>
   );
 };