dynamic seo and pages

README.md

-React js b2c application initial
\ No newline at end of file
+React js b2c application initial
+
+/src
+ ├── /components
+ │    ├── Navbar.js
+ │    ├── HeroSection.js
+ │    ├── DealsSection.js
+ │    ├── HotelsSection.js
+ │    ├── DestinationsSection.js
+ │    ├── TrendingSearches.js
+ │    ├── Footer.js
+ ├── /pages
+ │    ├── Home.js
+ ├── /config
+ │    ├── api.js (for Sabre API calls)
+ ├── App.js
+ ├── index.js
\ No newline at end of file

package.json

@@ -5,10 +5,11 @@
   "description": "React js b2c application initial",
   "main": "index.js",
   "scripts": {
-    "start": "PORT=8080 react-scripts start",
+    "dev": "PORT=8080 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "generate-sitemap": "node scripts/generateSitemap.js"
   },
   "repository": {
     "type": "git",
@@ -20,10 +21,13 @@
   "dependencies": {
     "axios": "^1.8.4",
     "bootstrap": "^5.3.3",
+    "fs": "^0.0.1-security",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^7.4.1",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "sitemap": "^8.0.0"
   },
   "browserslist": {
     "production": [

public/robots.txt

+User-agent: *
+Allow: /
+Sitemap: https://www.uat.hlafly.com/sitemap.xml

scripts/generateSitemap.js

+import { createWriteStream } from "fs";
+import { SitemapStream, streamToPromise } from "sitemap";
+
+const generateSitemap = async () => {
+  const sitemap = new SitemapStream({ hostname: "https://www.hlafly.com" });
+
+  const pages = [
+    { url: "/", changefreq: "daily", priority: 1.0 },
+    { url: "/flights", changefreq: "weekly", priority: 0.8 },
+    { url: "/hotels", changefreq: "weekly", priority: 0.8 },
+    { url: "/packages", changefreq: "weekly", priority: 0.7 },
+  ];
+
+  const writeStream = createWriteStream("public/sitemap.xml");
+  sitemap.pipe(writeStream);
+
+  pages.forEach((page) => sitemap.write(page));
+  sitemap.end();
+
+  await streamToPromise(sitemap);
+  console.log("✅ Sitemap successfully generated!");
+};
+
+generateSitemap();

src/App.js

@@ -8,15 +8,22 @@ import Hotels from "./pages/Hotels.js";
 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
+
 
 
 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." />
+        <title>hlafly - Best Travel Deals</title>
+        <meta name="description" content="Find the best deals on flights, hotels, and travel packages with hlafly." />
         <meta name="keywords" content="flights, hotels, travel deals, vacation packages" />
+        <meta property="og:title" content="hlafly - Best Travel Deals" />
+        <meta property="og:description" content="Find the best deals on flights, hotels, and travel packages with hlafly." />
+        <meta property="og:image" content="/images/og-image.jpg" />
+        <meta property="og:url" content="https://www.hlafly.com" />
+        <meta name="twitter:card" content="summary_large_image" />
       </Helmet>
       <Navbar />
       <div className="container mt-5">
@@ -25,11 +32,12 @@ function App() {
           <Route path="/flights" element={<Flights />} />
           <Route path="/hotels" element={<Hotels />} />
           <Route path="/packages" element={<Packages />} />
+          <Route path="/flights/results" element={<FlightsResults />} />
         </Routes>
       </div>
       <Footer />
-      </>
-        );
+    </>
+  );
 }
 
 export default App;

src/components/DealsSection.js

+import React from "react";
+
+const DealsSection = () => {
+  const deals = [
+    { id: 1, title: "Up to 15% off", img: "/images/deal1.jpg" },
+    { id: 2, title: "Exclusive Flight Discounts", img: "/images/deal2.jpg" }
+  ];
+
+  return (
+    <div className="container mt-5">
+      <h2>Special Deals for You</h2>
+      <div className="row">
+        {deals.map((deal) => (
+          <div key={deal.id} className="col-md-6">
+            <div className="card">
+              <img src={deal.img} className="card-img-top" alt={deal.title} />
+              <div className="card-body">
+                <h5 className="card-title">{deal.title}</h5>
+                <button className="btn btn-primary">Book Now</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DealsSection;

src/components/Footer.js

@@ -3,7 +3,7 @@ import React from "react";
 const Footer = () => {
   return (
     <footer className="bg-dark text-white text-center py-3 mt-5">
-      <p>&copy; 2025 Chalpado. All rights reserved.</p>
+      <p>&copy; 2025 hlafly. 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>
@@ -12,4 +12,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;  

src/components/HeroSection.js

+import React from "react";
+
+const HeroSection = () => {
+  return (
+    <div className="hero-section text-center text-white" style={{ background: "url('/images/hero.jpg') center/cover", padding: "100px 0" }}>
+      <h1>Find Your Perfect Trip</h1>
+      <p>Search flights, hotels, and vacation packages at the best prices.</p>
+      <div className="container mt-4">
+        <input type="text" className="form-control" placeholder="Enter destination..." />
+        <button className="btn btn-danger mt-3">Search</button>
+      </div>
+    </div>
+  );
+};
+
+export default HeroSection;

src/components/HotelsSection.js

+import React from "react";
+
+const HotelsSection = () => {
+  const hotels = [
+    { id: 1, name: "Hotel Luxury", img: "/images/hotel1.jpg" },
+    { id: 2, name: "Beach Resort", img: "/images/hotel2.jpg" }
+  ];
+
+  return (
+    <div className="container mt-5">
+      <h2>Top International Hotels</h2>
+      <div className="row">
+        {hotels.map((hotel) => (
+          <div key={hotel.id} className="col-md-6">
+            <div className="card">
+              <img src={hotel.img} className="card-img-top" alt={hotel.name} />
+              <div className="card-body">
+                <h5 className="card-title">{hotel.name}</h5>
+                <button className="btn btn-secondary">View Details</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HotelsSection;
+    
\ No newline at end of file

src/components/Navbar.js

@@ -6,20 +6,39 @@ const Navbar = () => {
   return (
     <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
       <div className="container">
-        <Link className="navbar-brand" to="/">Chalpado</Link>
-        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+        {/* Brand Logo */}
+        <Link className="navbar-brand fw-bold" to="/">hlafly</Link>
+
+        {/* Mobile Toggle Button */}
+        <button 
+          className="navbar-toggler" 
+          type="button" 
+          data-bs-toggle="collapse" 
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
           <span className="navbar-toggler-icon"></span>
         </button>
+
+        {/* Navigation Links */}
         <div className="collapse navbar-collapse" id="navbarNav">
           <ul className="navbar-nav ms-auto">
-            <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>
+            <li className="nav-item"><Link className="nav-link text-white fw-semibold" to="/flights">Flights</Link></li>
+            <li className="nav-item"><Link className="nav-link text-white fw-semibold" to="/hotels">Hotels</Link></li>
+            <li className="nav-item"><Link className="nav-link text-white fw-semibold" to="/packages">Packages</Link></li>
           </ul>
+          
+          {/* Search Box */}
+          <form className="d-flex ms-3">
+            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+            <button className="btn btn-light" type="submit">Search</button>
+          </form>
         </div>
       </div>
     </nav>
   );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;

src/pages/Flights.js

-import React, { useEffect, useState } from "react";
-import { fetchFlights } from "../config/api.js";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 const Flights = () => {
-  const [flights, setFlights] = useState([]);
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useState({
+    origin: "",
+    destination: "",
+    date: "",
+    passengers: 1,
+  });
 
-  useEffect(() => {
-    fetchFlights()
-      .then((data) => setFlights(data))
-      .catch((error) => console.error(error));
-  }, []);
+  const handleSearch = () => {
+    if (!searchParams.origin || !searchParams.destination || !searchParams.date) {
+      alert("Please fill all fields");
+      return;
+    }
+    navigate(`/flights/results?origin=${searchParams.origin}&destination=${searchParams.destination}&date=${searchParams.date}&passengers=${searchParams.passengers}`);
+  };
 
   return (
     <div className="container mt-5">
-      <h1>Available Flights</h1>
-      <ul>
-        {flights.map((flight, index) => (
-          <li key={index}>{flight.name} - {flight.price}</li>
-        ))}
-      </ul>
+      <Helmet>
+        <title>hlafly - Search Flights</title>
+        <meta name="description" content="Search for flights and get the best deals." />
+      </Helmet>
+
+      <h1 className="mb-4">Search Flights</h1>
+
+      <div className="row">
+        <div className="col-md-3">
+          <label>From</label>
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Enter origin"
+            value={searchParams.origin}
+            onChange={(e) => setSearchParams({ ...searchParams, origin: e.target.value })}
+          />
+        </div>
+        <div className="col-md-3">
+          <label>To</label>
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Enter destination"
+            value={searchParams.destination}
+            onChange={(e) => setSearchParams({ ...searchParams, destination: e.target.value })}
+          />
+        </div>
+        <div className="col-md-3">
+          <label>Date</label>
+          <input
+            type="date"
+            className="form-control"
+            value={searchParams.date}
+            onChange={(e) => setSearchParams({ ...searchParams, date: e.target.value })}
+          />
+        </div>
+        <div className="col-md-2">
+          <label>Passengers</label>
+          <input
+            type="number"
+            className="form-control"
+            min="1"
+            value={searchParams.passengers}
+            onChange={(e) => setSearchParams({ ...searchParams, passengers: e.target.value })}
+          />
+        </div>
+        <div className="col-md-1 d-flex align-items-end">
+          <button className="btn btn-primary w-100" onClick={handleSearch}>Search</button>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/FlightsResults.js

+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
+import { fetchFlights } from "../config/api.js"; // Ensure this function fetches flight data
+
+const FlightsResults = () => {
+  const [searchParams] = useSearchParams();
+  const origin = searchParams.get("origin");
+  const destination = searchParams.get("destination");
+  const date = searchParams.get("date");
+  const passengers = searchParams.get("passengers");
+
+  const [flights, setFlights] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchFlights({ origin, destination, date, passengers })
+      .then((data) => {
+        setFlights(data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        setLoading(false);
+      });
+  }, [origin, destination, date, passengers]);
+
+  return (
+    <div className="container mt-5">
+      <Helmet>
+        <title>hlafly - Flight Results</title>
+        <meta name="description" content={`Find flights from ${origin} to ${destination} on ${date}.`} />
+      </Helmet>
+
+      <h1 className="mb-4">Flight Results</h1>
+
+      {loading ? (
+        <p>Loading flights...</p>
+      ) : flights.length === 0 ? (
+        <p>No flights available for this route.</p>
+      ) : (
+        <ul className="list-group">
+          {flights.map((flight, index) => (
+            <li key={index} className="list-group-item">
+              {flight.name} - ${flight.price} | {flight.departure} → {flight.arrival}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default FlightsResults;

src/pages/Home.js

-import React from "react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const Home = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useState({
+    origin: "",
+    destination: "",
+    date: "",
+    passengers: 1,
+    tripType: "one-way"
+  });
+
+  const handleSearch = () => {
+    if (!searchParams.origin || !searchParams.destination || !searchParams.date) {
+      alert("Please fill all fields");
+      return;
+    }
+    navigate(`/flights/results?origin=${searchParams.origin}&destination=${searchParams.destination}&date=${searchParams.date}&passengers=${searchParams.passengers}&tripType=${searchParams.tripType}`);
+  };
+
   return (
-    <div className="text-center mt-5">
+    <div>
       <Helmet>
-        <title>Chalpado - Home</title>
+        <title>hlafly - 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>
+
+      {/* Hero Section */}
+      <div className="hero-section text-center text-white d-flex align-items-center justify-content-center">
+        <div>
+          <h1 className="display-4 fw-bold">Find Your Next Adventure</h1>
+          <p className="lead">Book flights, hotels, and packages at the best prices.</p>
+
+          {/* Search Box */}
+          <div className="search-box p-4 bg-white rounded shadow mt-4">
+            <div className="row mb-3">
+              <div className="col-md-12 d-flex justify-content-center">
+                <button className={`btn ${searchParams.tripType === "one-way" ? "btn-primary" : "btn-outline-primary"} me-2`} onClick={() => setSearchParams({ ...searchParams, tripType: "one-way" })}>One-way</button>
+                <button className={`btn ${searchParams.tripType === "round-trip" ? "btn-primary" : "btn-outline-primary"} me-2`} onClick={() => setSearchParams({ ...searchParams, tripType: "round-trip" })}>Round-trip</button>
+                <button className={`btn ${searchParams.tripType === "multi-city" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setSearchParams({ ...searchParams, tripType: "multi-city" })}>Multi-city</button>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-md-3">
+                <label>From</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Enter origin"
+                  value={searchParams.origin}
+                  onChange={(e) => setSearchParams({ ...searchParams, origin: e.target.value })}
+                />
+              </div>
+              <div className="col-md-3">
+                <label>To</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Enter destination"
+                  value={searchParams.destination}
+                  onChange={(e) => setSearchParams({ ...searchParams, destination: e.target.value })}
+                />
+              </div>
+              <div className="col-md-3">
+                <label>Date</label>
+                <input
+                  type="date"
+                  className="form-control"
+                  value={searchParams.date}
+                  onChange={(e) => setSearchParams({ ...searchParams, date: e.target.value })}
+                />
+              </div>
+              <div className="col-md-2">
+                <label>Passengers</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  min="1"
+                  value={searchParams.passengers}
+                  onChange={(e) => setSearchParams({ ...searchParams, passengers: e.target.value })}
+                />
+              </div>
+              <div className="col-md-1 d-flex align-items-end">
+                <button className="btn btn-primary w-100" onClick={handleSearch}>Search</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Popular Destinations */}
+      <div className="container mt-5">
+        <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" />
+            <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" />
+            <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" />
+            <h5 className="mt-2 text-center">Bali</h5>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/Hotels.js

 import React from "react";
+import { Helmet } from "react-helmet";
 
-const Home = () => {
+const Hotels = () => {
   return (
-    <div>
-      <h1>Welcome to Hotels</h1>
-      <p>Your one-stop for Hotels</p>
+    <div className="text-center mt-5">
+      <Helmet>
+        <title>Find Best Hotels - hlafly</title>
+        <meta name="description" content="Discover and book the best hotels at the lowest prices." />
+      </Helmet>
+      <h1>Hotels</h1>
+      <p>Find and book top-rated hotels with great discounts.</p>
     </div>
   );
 };
 
-export default Home;
+export default Hotels;

src/pages/Packages.js

 import React from "react";
+import { Helmet } from "react-helmet";
 
-const Home = () => {
+const Packages = () => {
   return (
-    <div>
-      <h1>Welcome to Packages</h1>
-      <p>Your one-stop for Packages</p>
+    <div className="text-center mt-5">
+      <Helmet>
+        <title>Travel Packages - hlafly</title>
+        <meta name="description" content="Book vacation packages with flights, hotels, and more." />
+      </Helmet>
+      <h1>Travel Packages</h1>
+      <p>Explore amazing vacation deals with flights and hotels included.</p>
     </div>
   );
 };
 
-export default Home;
+export default Packages;