© 2025 Chalpado. All rights reserved.
+ © 2025 hlafly. All rights reserved.
Privacy Policy
Terms of Service
@@ -12,4 +12,4 @@ const Footer = () => {
);
};
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/components/HeroSection.js b/src/components/HeroSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b52ca6293eee9a5449dfc5ec04579097dc3dd32
--- /dev/null
+++ b/src/components/HeroSection.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const HeroSection = () => {
+ return (
+
+
Find Your Perfect Trip
+
Search flights, hotels, and vacation packages at the best prices.
+
+
+
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/src/components/HotelsSection.js b/src/components/HotelsSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..f257faec8f58af46185e8d1759aa253c1fffbcd2
--- /dev/null
+++ b/src/components/HotelsSection.js
@@ -0,0 +1,30 @@
+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 (
+
+
Top International Hotels
+
+ {hotels.map((hotel) => (
+
+
+
+
+
{hotel.name}
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default HotelsSection;
+
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 8d098041adcc15e3cce1091f01c7ce2c66bf0596..e692d2259ba382866011388cbcc8532cfafed7ec 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -6,20 +6,39 @@ const Navbar = () => {
return (
);
};
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/TrendingSearches.js b/src/components/TrendingSearches.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/Flights.js b/src/pages/Flights.js
index dd1e89b60503ed67c479ac978e59cc880daa0c44..b2d255b7795315c918e88089b22a6916a06e31e3 100644
--- a/src/pages/Flights.js
+++ b/src/pages/Flights.js
@@ -1,23 +1,77 @@
-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 (
-
Available Flights
-
- {flights.map((flight, index) => (
- - {flight.name} - {flight.price}
- ))}
-
+
+ hlafly - Search Flights
+
+
+
+
Search Flights
+
+
);
};
diff --git a/src/pages/FlightsResults.js b/src/pages/FlightsResults.js
new file mode 100644
index 0000000000000000000000000000000000000000..394a6a4ca231b3b019cc00e29fee3c02996581a2
--- /dev/null
+++ b/src/pages/FlightsResults.js
@@ -0,0 +1,54 @@
+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 (
+
+
+ hlafly - Flight Results
+
+
+
+
Flight Results
+
+ {loading ? (
+
Loading flights...
+ ) : flights.length === 0 ? (
+
No flights available for this route.
+ ) : (
+
+ {flights.map((flight, index) => (
+ -
+ {flight.name} - ${flight.price} | {flight.departure} → {flight.arrival}
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default FlightsResults;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 25ceaa9ab8d79205950d8d1da9c50d153f7f2c07..daa62be0081cb06da9ca602b3a7fda6ef6bef1dd 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,16 +1,114 @@
-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 (
-
+
- Chalpado - Home
+ hlafly - Home
-
Welcome to Chalpado
-
Find the best deals on flights, hotels, and travel packages.
-
+
+ {/* Hero Section */}
+
+
+
Find Your Next Adventure
+
Book flights, hotels, and packages at the best prices.
+
+ {/* Search Box */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Popular Destinations */}
+
+
Popular Destinations
+
+
+
+
Dubai
+
+
+
+
Paris
+
+
+
+
Bali
+
+
+
);
};
diff --git a/src/pages/Hotels.js b/src/pages/Hotels.js
index 6df30add14a57193f1ba22f49cfd61a4fe1a2ec3..17978dd0a5375b3b4b67f45ac3deb13ed67034d0 100644
--- a/src/pages/Hotels.js
+++ b/src/pages/Hotels.js
@@ -1,12 +1,17 @@
import React from "react";
+import { Helmet } from "react-helmet";
-const Home = () => {
+const Hotels = () => {
return (
-
-
Welcome to Hotels
-
Your one-stop for Hotels
+
+
+ Find Best Hotels - hlafly
+
+
+
Hotels
+
Find and book top-rated hotels with great discounts.
);
};
-export default Home;
+export default Hotels;
diff --git a/src/pages/Packages.js b/src/pages/Packages.js
index b392ecbcdc428726afc950ed90768fa9db137507..a7411523bce48a5258857caa07f06a8ba57d106e 100644
--- a/src/pages/Packages.js
+++ b/src/pages/Packages.js
@@ -1,12 +1,17 @@
import React from "react";
+import { Helmet } from "react-helmet";
-const Home = () => {
+const Packages = () => {
return (
-
-
Welcome to Packages
-
Your one-stop for Packages
+
+
+ Travel Packages - hlafly
+
+
+
Travel Packages
+
Explore amazing vacation deals with flights and hotels included.
);
};
-export default Home;
+export default Packages;
+