-
+
Select Package
+
{/* Trip tabs */}
@@ -157,13 +241,16 @@ const HeroSection = () => {
{/* Form */}
-
+
@@ -175,38 +262,8 @@ const HeroSection = () => {
/* --- Sub-components --- */
-const FormField = ({ icon, label, placeholder }) => {
- const icons = {
- location: (
-
- ),
- destination: (
-
- ),
- calendar: (
-
- ),
- };
-
- return (
-
{getFormFields()}
{/* CTA Button */}
-
-
- );
-};
-
const Divider = () => (
-
+
);
export default HeroSection;
diff --git a/src/components/Hero/LocationAutocomplete.jsx b/src/components/Hero/LocationAutocomplete.jsx
new file mode 100644
index 0000000..b8ad05e
--- /dev/null
+++ b/src/components/Hero/LocationAutocomplete.jsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from "react";
+import { debounce } from "lodash";
+import { MapPin, Loader2 } from "lucide-react";
+
+const LocationAutocomplete = ({ label, value, onChange, placeholder, icon = "location" }) => {
+ const [query, setQuery] = useState(value || "");
+ const [suggestions, setSuggestions] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [showDropdown, setShowDropdown] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const fetchSuggestions = async (searchText) => {
+ if (searchText.length < 3) {
+ setSuggestions([]);
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ const response = await fetch(`https://photon.komoot.io/api?q=${encodeURIComponent(searchText)}&limit=5`);
+ const data = await response.json();
+
+ const results = data.features.map(feature => {
+ const { name, city, state, country } = feature.properties;
+ const mainText = name || city;
+ const secondaryText = [city, state, country].filter(Boolean).join(", ");
+ return {
+ id: feature.geometry.coordinates.join(","),
+ mainText,
+ secondaryText,
+ description: `${mainText}${secondaryText ? `, ${secondaryText}` : ""}`
+ };
+ });
+
+ setSuggestions(results);
+ setShowDropdown(results.length > 0);
+ } catch (error) {
+ console.error("Error fetching location suggestions:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const debouncedFetch = useRef(debounce(fetchSuggestions, 500)).current;
+
+ useEffect(() => {
+ if (query !== value) {
+ debouncedFetch(query);
+ }
+ }, [query]);
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setShowDropdown(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ const handleSelect = (suggestion) => {
+ setQuery(suggestion.description);
+ onChange(suggestion.description);
+ setShowDropdown(false);
+ };
+
+ return (
+
- {icons[icon]}
-
-
-
- {label}
- -
+
+ );
+};
+
+export default LocationAutocomplete;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 54740e1..6525589 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -5,10 +5,10 @@ const Navbar = ({ onLoginClick, user }) => {
const [mobileOpen, setMobileOpen] = useState(false);
const navLinks = [
- { label: "Home", href: "#hero" },
- { label: "Our Fleet", href: "#fleet" },
- { label: "About", href: "#about" },
- { label: "Contact", href: "#contact" },
+ { label: "Home", href: "/#hero" },
+ { label: "Our Fleet", href: "/#fleet" },
+ { label: "About", href: "/#about" },
+ { label: "Contact", href: "/#contact" },
];
return (
@@ -53,7 +53,7 @@ const Navbar = ({ onLoginClick, user }) => {
+
+
+ {/* Dropdown Suggestions */}
+ {showDropdown && suggestions.length > 0 && (
+
+
+ {label}
+
+ setQuery(e.target.value)}
+ onFocus={() => query.length >= 3 && setShowDropdown(true)}
+ placeholder={placeholder}
+ className="text-sm font-semibold text-dark-900 placeholder:text-gray-400 bg-transparent border-none outline-none w-full"
+ />
+ {isLoading && (
+
+
+ {suggestions.map((suggestion, index) => (
+
+ ))}
+
+ )}
+
{/* Logo */}
-
+
@@ -112,7 +112,7 @@ const Navbar = ({ onLoginClick, user }) => {
))}
setMobileOpen(false)}
>
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..eb9068e
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import HeroSection from "../components/Hero/HeroSection";
+import CabsSection from "../components/Cabs/CabsSection";
+import ServicesSection from "../components/Services/ServicesSection";
+import PromoBanners from "../components/Promotions/PromoBanners";
+import ReviewsSection from "../components/Reviews/ReviewsSection";
+import WhyChooseUs from "../components/Highlights/WhyChooseUs";
+import NewsSection from "../components/News/NewsSection";
+import Navbar from "../components/Navbar/Navbar";
+import Footer from "../components/Footer/Footer";
+
+const HomePage = ({ onLoginClick, user }) => {
+ return (
+ <>
+
+
+ );
+};
+
+const SearchPage = ({ onLoginClick, user }) => {
+ const [searchParams] = useSearchParams();
+ const [isBooking, setIsBooking] = useState(false);
+ const [bookingSuccess, setBookingSuccess] = useState(null);
+ const [showLeadModal, setShowLeadModal] = useState(!user); // Don't show if user logged in
+ const [cars, setCars] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // Extract search details
+ const tripType = searchParams.get("tripType") || "round";
+ const pickupLocation = searchParams.get("pickup") || "Not Specified";
+ const dropLocation = searchParams.get("drop") || "";
+ const pickupDateStr = searchParams.get("pickupDate");
+ const returnDateStr = searchParams.get("returnDate");
+ const packageType = searchParams.get("package") || "";
+
+ const pickupDate = pickupDateStr ? new Date(pickupDateStr) : new Date();
+ const returnDate = returnDateStr ? new Date(returnDateStr) : null;
+
+ useEffect(() => {
+ fetchPricing();
+ }, [tripType, pickupDateStr, returnDateStr, packageType]);
+
+ const fetchPricing = async () => {
+ setIsLoading(true);
+ try {
+ const response = await api.post("/api/pricing/calculate", {
+ tripType,
+ pickupDate: pickupDateStr,
+ returnDate: returnDateStr,
+ packageType
+ });
+ setCars(response.data);
+ } catch (err) {
+ console.error("Pricing Fetch Error:", err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleBookNow = async (car) => {
+ // If not logged in, ask for lead first (Leads-first flow)
+ if (!user && showLeadModal) {
+ // Modal is already handling this or will appear
+ return;
+ }
+
+ setIsBooking(true);
+ try {
+ const response = await api.post("/api/bookings", {
+ tripType,
+ pickupLocation,
+ dropLocation,
+ pickupDateTime: pickupDate.toISOString(),
+ returnDateTime: returnDate ? returnDate.toISOString() : null,
+ packageType,
+ carName: car.name,
+ totalAmount: car.calc.grandTotal
+ });
+
+ setBookingSuccess(response.bookingId);
+ } catch (err) {
+ alert("Failed to create booking: " + err.message);
+ } finally {
+ setIsBooking(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ Check Special Prices
+Enter your details to view exclusive discounted rates for your trip.
++ No spam. Only trip updates. +
+
+ setShowLeadModal(false)}
+ searchData={{ tripType, pickup: pickupLocation, drop: dropLocation }}
+ />
+
+
+
+ {/* Search Summary Header */}
+
+
+ {/* Success Modal */}
+ {bookingSuccess && (
+
+ );
+};
+
+export default SearchPage;
diff --git a/vite.config.js b/vite.config.js
index 601b0f2..286a5bc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,9 +7,8 @@ export default defineConfig({
server: {
proxy: {
'/api': {
- target: 'http://192.168.1.27:8000',
- changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, '')
+ target: 'http://localhost:8000',
+ changeOrigin: true
}
}
}
+
+
+
+
+
+
+
+
+
+ {dropLocation && (
+
+
+
+
+ Pickup
+{pickupLocation}
+
+
+ )}
+
+
+
+
+ Drop Location
+{dropLocation}
+
+
+
+
+
+
+ Schedule
++ {pickupDate.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })} + {returnDate && ` - ${returnDate.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}`} +
+
+
+ {/* Main Listings */}
+
+
+
+
+ {/* Pricing Summary Sidebar */}
+
+
+
+ {isLoading ? (
+ Available Fleets
++ Found {cars.length} Options +
+
+
+ ) : cars.map((car) => (
+ Finding Best Fares...
+
+
+ ))}
+
+ {/* Car Image Wrapper */}
+
+
+ 
+
+ {/* Badge */}
+ {car.badge && (
+
+
+ {/* Car Details */}
+
+ {car.badge}
+
+ )}
+
+
+ ★★★★★
+ Top Rated
+
+
+
+
+
+
+
+
+
+ {/* Transparency Math Block */}
+
+
+ {car.name}
+
+ {car.type}
+
+
+
+
+
+
+
+
+
+ ₹{car.calc.grandTotal}
+Final Amount
+
+
+
+ {/* Inclusions / Exclusions */}
+
+
+
+
+ 20% Booking Advance
+ Pay ₹{car.calc.advancePayment} to Confirm
+
+
+
+
+
+
+
-
+ {car.inclusions.map((inc, i) => (
+
- + {inc} + + ))} +
+
+
+
-
+ {car.exclusions.map((exc, i) => (
+
- + {exc} + + ))} +
+
+
+ Available Distance
+ {car.calc.totalKmIncluded} Km Included
+
+
+
+
+
+
+
+ {/* Decorative element */}
+
+
+
+
+ + Terms & Policy + < ShieldCheck className="w-5 h-5 text-green-500" /> +
+ +
+
+
+
+
+
+
+
+
+ Toll & State Permits
+To be paid by traveller as per actuals during the trip.
+
+
+
+
+
+
+ Extra Kilimoteres
+Charged at standard base rates mentioned on the car cards.
+
+
+
+
+
+
+ Night Charge
+Driver night allowance applicable after 10:00 PM.
+
+
+ Need Custom Help?
+ +91 7975942520 +
+
+
+
+
+
+
+ + Cancel up to 24 hours in advance and receive a full refund of your 20% booking deposit. +
+
+
+ )}
+
+
+
+
+
+
+ Trip Confirmed!
++ We've received your booking. Our professional driver will reach out to you shortly. +
+
+
+
+ Booking Transaction ID
+#RR-{bookingSuccess}
+