internal
/
sangwaritaxi_website
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'fix : call button' (#26) from feature/email into main
continuous-integration/drone/push Build is passing Details 

Reviewed-on: #26
This commit is contained in:
hardik 2025-10-16 10:24:14 +05:30
parent a82eef4daa 69c3985441
commit a59f82018d
9 changed files with 405 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
dist/assets/index-DQSe76my.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/components/BookingConfirmation.tsx
View File

@ -170,12 +170,12 @@ export function BookingConfirmation({
{bookingData.dropoff.includes("Airport Taxi") ? "Airport Taxi Fee" : "Customize Price"}
</span>
<span className="text-xl font-semibold text-green-600">
{bookingData.dropoff.includes("Airport Taxi") ? "₹1099" : "Call for Quote"}
{bookingData.dropoff.includes("Airport Taxi") ? "₹999" : "Call for Quote"}
</span>
</div>
<div className="text-sm text-muted-foreground text-center">
{bookingData.dropoff.includes("Airport Taxi")
? `₹1099 fixed rate for airport taxi. Driver will contact you at ${bookingData.contactNumber} for pickup details.`
? `₹999 fixed rate for airport taxi. Driver will contact you at ${bookingData.contactNumber} for pickup details.`
: `Driver will contact you at ${bookingData.contactNumber} for final pricing and trip details.`}
</div>
</div>

466
src/components/BookingForm.tsx
View File

@ -48,248 +48,248 @@ export function BookingForm({ onSubmit }: BookingFormProps) {
className="w-full max-w-2xl mx-auto"
>
<Card className="w-full bg-white border-0 shadow-none">
<CardHeader className="text-center pb-4 sm:pb-6 lg:pb-8 bg-transparent px-4 sm:px-6 rounded-[0px]">
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<CardTitle className="flex flex-col sm:flex-row items-center justify-center gap-2 text-center text-lg sm:text-xl lg:text-2xl bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
<div className="mb-1 sm:mb-0">
<MapPin className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
</div>
<span className="font-bold leading-tight text-[32px]">Book Your Airport Taxi Now</span>
</CardTitle>
</motion.div>
<motion.div
className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-primary/30 via-primary to-primary/30 mx-auto mt-2 sm:mt-3 lg:mt-4 rounded-full"
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ delay: 0.3, duration: 0.8 }}
/>
<CardHeader className="text-center pb-4 sm:pb-6 lg:pb-8 bg-transparent px-4 sm:px-6 rounded-[0px]">
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<CardTitle className="flex flex-col sm:flex-row items-center justify-center gap-2 text-center text-lg sm:text-xl lg:text-2xl bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
<div className="mb-1 sm:mb-0">
<MapPin className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
</div>
<span className="font-bold leading-tight text-[32px]">Book Your Airport Taxi Now</span>
</CardTitle>
</motion.div>
<motion.div
className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-primary/30 via-primary to-primary/30 mx-auto mt-2 sm:mt-3 lg:mt-4 rounded-full"
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ delay: 0.3, duration: 0.8 }}
/>
</CardHeader>
<CardContent className="bg-transparent px-4 sm:px-6 pt-[0px] pr-[21px] pb-[21px] pl-[21px]">
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
{/* Location Inputs */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
</CardHeader>
<CardContent className="bg-transparent px-4 sm:px-6 pt-[0px] pr-[21px] pb-[21px] pl-[21px]">
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
{/* Location Inputs */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label htmlFor="pickup" className="text-sm sm:text-base">Pickup Location</Label>
<Select value={formData.pickup} onValueChange={(value) => handleInputChange("pickup", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select pickup city" />
</SelectTrigger>
<SelectContent className="max-h-48">
{indiaLocations.map((location) => (
<SelectItem key={location} value={location}>
{location}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="dropoff" className="text-sm sm:text-base">Drop-off Location / Service</Label>
<Select value={formData.dropoff} onValueChange={(value) => handleInputChange("dropoff", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select destination or service" />
</SelectTrigger>
<SelectContent className="max-h-48">
<div className="px-2 py-1 text-xs text-muted-foreground border-b">Services</div>
{serviceTypes.map((service) => (
<SelectItem key={service} value={service}>
{service}
</SelectItem>
))}
<div className="px-2 py-1 text-xs text-muted-foreground border-b">All India Locations</div>
{indiaLocations.map((location) => (
<SelectItem key={location} value={location}>
{location}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{/* Date and Time */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label htmlFor="date" className="flex items-center gap-2 text-sm sm:text-base">
<Calendar className="h-3 w-3 sm:h-4 sm:w-4" />
Date
</Label>
<Input
id="date"
type="date"
min={currentDate}
value={formData.date}
onChange={(e) => handleInputChange("date", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="time" className="flex items-center gap-2 text-sm sm:text-base">
<Clock className="h-3 w-3 sm:h-4 sm:w-4" />
Time
</Label>
<Input
id="time"
type="time"
value={formData.time}
onChange={(e) => handleInputChange("time", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
</div>
{/* Contact Information */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label htmlFor="contactName" className="flex items-center gap-2 text-sm sm:text-base">
<User className="h-3 w-3 sm:h-4 sm:w-4" />
Contact Name
</Label>
<Input
id="contactName"
type="text"
placeholder="Enter your name"
value={formData.contactName}
onChange={(e) => handleInputChange("contactName", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="contactNumber" className="flex items-center gap-2 text-sm sm:text-base">
<Phone className="h-3 w-3 sm:h-4 sm:w-4" />
Contact Number
</Label>
<Input
id="contactNumber"
type="tel"
placeholder="Enter your contact number"
value={formData.contactNumber}
onChange={(e) => handleInputChange("contactNumber", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
</div>
{/* Email (Optional) */}
<div className="space-y-2">
<Label htmlFor="pickup" className="text-sm sm:text-base">Pickup Location</Label>
<Select value={formData.pickup} onValueChange={(value) => handleInputChange("pickup", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select pickup city" />
</SelectTrigger>
<SelectContent className="max-h-48">
{indiaLocations.map((location) => (
<SelectItem key={location} value={location}>
{location}
<Label htmlFor="customerEmail" className="flex items-center gap-2 text-sm sm:text-base">
<Mail className="h-3 w-3 sm:h-4 sm:w-4" />
Email Address <span className="text-xs text-muted-foreground">(For booking confirmation)</span>
</Label>
<Input
id="customerEmail"
type="email"
placeholder="Enter your email address"
// value={formData.customerEmail}
onChange={(e) => handleInputChange("customerEmail", e.target.value)}
className="h-10 sm:h-11"
/>
</div>
{/* Passengers and Vehicle Type */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label className="flex items-center gap-2 text-sm sm:text-base">
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
Passengers
</Label>
<Select value={formData.passengers} onValueChange={(value) => handleInputChange("passengers", value)}>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1 Passenger</SelectItem>
<SelectItem value="2">2 Passengers</SelectItem>
<SelectItem value="3">3 Passengers</SelectItem>
<SelectItem value="4">4 Passengers</SelectItem>
<SelectItem value="5">5 Passengers</SelectItem>
<SelectItem value="6">6 Passengers</SelectItem>
<SelectItem value="7">7 Passengers</SelectItem>
<SelectItem value="8">8+ Passengers</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-sm sm:text-base">Vehicle Type</Label>
<Select value={formData.vehicleType} onValueChange={(value) => handleInputChange("vehicleType", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select vehicle" />
</SelectTrigger>
<SelectContent>
<SelectItem value="5-seater">
<span className="text-xs sm:text-sm">5 Seater - Airport Taxi </span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="dropoff" className="text-sm sm:text-base">Drop-off Location / Service</Label>
<Select value={formData.dropoff} onValueChange={(value) => handleInputChange("dropoff", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select destination or service" />
</SelectTrigger>
<SelectContent className="max-h-48">
<div className="px-2 py-1 text-xs text-muted-foreground border-b">Services</div>
{serviceTypes.map((service) => (
<SelectItem key={service} value={service}>
{service}
<SelectItem value="7-seater">
<span className="text-xs sm:text-sm">7 Seater (Ertiga) - Airport Taxi </span>
</SelectItem>
))}
<div className="px-2 py-1 text-xs text-muted-foreground border-b">All India Locations</div>
{indiaLocations.map((location) => (
<SelectItem key={location} value={location}>
{location}
<SelectItem value="innova">
<span className="text-xs sm:text-sm">Innova - Airport Taxi </span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{/* Date and Time */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label htmlFor="date" className="flex items-center gap-2 text-sm sm:text-base">
<Calendar className="h-3 w-3 sm:h-4 sm:w-4" />
Date
</Label>
<Input
id="date"
type="date"
min={currentDate}
value={formData.date}
onChange={(e) => handleInputChange("date", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="time" className="flex items-center gap-2 text-sm sm:text-base">
<Clock className="h-3 w-3 sm:h-4 sm:w-4" />
Time
</Label>
<Input
id="time"
type="time"
value={formData.time}
onChange={(e) => handleInputChange("time", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
</div>
{/* Contact Information */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label htmlFor="contactName" className="flex items-center gap-2 text-sm sm:text-base">
<User className="h-3 w-3 sm:h-4 sm:w-4" />
Contact Name
</Label>
<Input
id="contactName"
type="text"
placeholder="Enter your name"
value={formData.contactName}
onChange={(e) => handleInputChange("contactName", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="contactNumber" className="flex items-center gap-2 text-sm sm:text-base">
<Phone className="h-3 w-3 sm:h-4 sm:w-4" />
Contact Number
</Label>
<Input
id="contactNumber"
type="tel"
placeholder="Enter your contact number"
value={formData.contactNumber}
onChange={(e) => handleInputChange("contactNumber", e.target.value)}
className="h-10 sm:h-11"
required
/>
</div>
</div>
{/* Email (Optional) */}
<div className="space-y-2">
<Label htmlFor="customerEmail" className="flex items-center gap-2 text-sm sm:text-base">
<Mail className="h-3 w-3 sm:h-4 sm:w-4" />
Email Address <span className="text-xs text-muted-foreground">(For booking confirmation)</span>
</Label>
<Input
id="customerEmail"
type="email"
placeholder="Enter your email address"
value={formData.customerEmail}
onChange={(e) => handleInputChange("customerEmail", e.target.value)}
className="h-10 sm:h-11"
/>
</div>
{/* Passengers and Vehicle Type */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div className="space-y-2">
<Label className="flex items-center gap-2 text-sm sm:text-base">
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
Passengers
</Label>
<Select value={formData.passengers} onValueChange={(value) => handleInputChange("passengers", value)}>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1 Passenger</SelectItem>
<SelectItem value="2">2 Passengers</SelectItem>
<SelectItem value="3">3 Passengers</SelectItem>
<SelectItem value="4">4 Passengers</SelectItem>
<SelectItem value="5">5 Passengers</SelectItem>
<SelectItem value="6">6 Passengers</SelectItem>
<SelectItem value="7">7 Passengers</SelectItem>
<SelectItem value="8">8+ Passengers</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-sm sm:text-base">Vehicle Type</Label>
<Select value={formData.vehicleType} onValueChange={(value) => handleInputChange("vehicleType", value)} required>
<SelectTrigger className="h-10 sm:h-11">
<SelectValue placeholder="Select vehicle" />
</SelectTrigger>
<SelectContent>
<SelectItem value="5-seater">
<span className="text-xs sm:text-sm">5 Seater - Airport Taxi </span>
</SelectItem>
<SelectItem value="7-seater">
<span className="text-xs sm:text-sm">7 Seater (Ertiga) - Airport Taxi </span>
</SelectItem>
<SelectItem value="innova">
<span className="text-xs sm:text-sm">Innova - Airport Taxi </span>
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-3 sm:space-y-4">
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<Button type="submit" className="w-full h-11 sm:h-12 text-sm sm:text-base shadow-lg hover:shadow-xl transition-all duration-300 rounded-[8px]">
<span className="font-semibold">
Book Your Airport Taxi
</span>
</Button>
</motion.div>
<div className="flex items-center gap-2">
<div className="h-px bg-border flex-1"></div>
<span className="text-xs text-muted-foreground px-2">OR</span>
<div className="h-px bg-border flex-1"></div>
</SelectContent>
</Select>
</div>
</div>
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="relative"
>
<div className="space-y-3 sm:space-y-4">
<motion.div
className="absolute inset-0 bg-gradient-to-r from-green-400 to-green-600 rounded-lg"
animate={{
opacity: [0.8, 1, 0.8],
scale: [1, 1.02, 1]
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut"
}}
/>
<Button
type="button"
className="w-full h-11 sm:h-12 relative z-10 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white border-0 shadow-lg"
onClick={() => window.open('tel:+91-7477247488', '_self')}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<Phone className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
<div className="text-center">
<div className="font-semibold text-sm sm:text-base">Call to Book Taxi</div>
<div className="text-xs opacity-90">7477247488</div>
</div>
</Button>
</motion.div>
</div>
</form>
</CardContent>
</Card>
<Button type="submit" className="w-full h-11 sm:h-12 text-sm sm:text-base shadow-lg hover:shadow-xl transition-all duration-300 rounded-[8px]">
<span className="font-semibold">
Book Your Airport Taxi
</span>
</Button>
</motion.div>
<div className="flex items-center gap-2">
<div className="h-px bg-border flex-1"></div>
<span className="text-xs text-muted-foreground px-2">OR</span>
<div className="h-px bg-border flex-1"></div>
</div>
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="relative"
>
<motion.div
className="absolute inset-0 bg-gradient-to-r from-green-400 to-green-600 rounded-lg"
animate={{
opacity: [0.8, 1, 0.8],
scale: [1, 1.02, 1]
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut"
}}
/>
<Button
type="button"
className="w-full h-11 sm:h-12 relative z-10 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white border-0 shadow-lg"
onClick={() => window.open('tel:+91-7477247488', '_self')}
>
<Phone className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
<div className="text-center">
<div className="font-semibold text-sm sm:text-base">Call to Book Taxi</div>
<div className="text-xs opacity-90">7477247488</div>
</div>
</Button>
</motion.div>
</div>
</form>
</CardContent>
</Card>
</motion.div>
);
}

15
src/components/FloatingCallButton.tsx
View File

@ -12,7 +12,7 @@ export function FloatingCallButton() {
delay: 1,
type: "spring",
stiffness: 200,
damping: 20
damping: 20,
}}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
@ -21,28 +21,31 @@ export function FloatingCallButton() {
<Button
size="lg"
className="bg-transparent hover:bg-white/10 border-0 px-3 py-2 sm:px-4 sm:py-2 h-auto rounded-full"
onClick={() => window.open('tel:+91-7477247488', '_self')}
onClick={() => {
// Opens dialpad directly on mobile
window.location.href = "tel:+917477247488";
}}
>
<div className="mr-1 sm:mr-2">
<Phone className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
</div>
<div className="text-white">
<div className="text-white text-left">
<div className="text-xs sm:text-sm font-bold">Call to Book</div>
<div className="text-xs opacity-90">7477247488</div>
</div>
</Button>
{/* Simple pulse effect */}
{/* Simple pulse animation */}
<motion.div
className="absolute inset-0 rounded-full bg-green-400/50"
animate={{
scale: [1, 1.5, 1],
opacity: [0.7, 0, 0.7]
opacity: [0.7, 0, 0.7],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut"
ease: "easeInOut",
}}
/>
</div>

4
src/components/HeroSection.tsx
View File

@ -104,7 +104,7 @@ export function HeroSection({ children }: HeroSectionProps) {
transition={{ duration: 0.8, delay: 0.4 }}
className="block text-white"
>
Durg/Bhilai-Raipur Airport Drop(Oneway)
Durg/Bhilai-Raipur Airport Drop(Oneway)
</motion.span>
<motion.span
className="block text-yellow-400 text-xl sm:text-3xl md:text-4xl lg:text-5xl"
@ -112,7 +112,7 @@ export function HeroSection({ children }: HeroSectionProps) {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
>
₹1099
₹999
</motion.span>
</motion.h1>

4
src/components/ServicesSection.tsx
View File

@ -18,8 +18,8 @@ const services = [
icon: Plane,
title: "Airport Taxi",
description: "Comfortable and punctual airport taxi services. Never miss a flight with our dedicated airport service.",
features: ["Flight monitoring", "Meet & greet service", "Fixed rate ₹1099"],
price: "₹1099",
features: ["Flight monitoring", "Meet & greet service", "Fixed rate ₹999"],
price: "₹999",
image: "https://images.unsplash.com/photo-1733222012917-e9e74636080c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhaXJwb3J0JTIwdHJhbnNmZXIlMjBjYXIlMjBzZXJ2aWNlfGVufDF8fHx8MTc1NTYwMDgwM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
imageAlt: "Premium car at airport terminal"
},

2
src/constants/locations.ts
View File

@ -34,7 +34,7 @@ export const indiaLocations = [
// Service types for drop-off options
export const serviceTypes = [
"City Ride - Customize Price",
"Airport Taxi - ₹1099",
"Airport Taxi - ₹999",
"Outstation - Customize Price",
"Mover and Packer - Customize Price",
"Corporate Services - Customize Price"

4
src/constants/vehicles.ts
View File

@ -5,11 +5,11 @@ export const mockVehicles: Vehicle[] = [
id: "1",
type: "5-seater",
name: "5 Seater",
price: 1099,
price: 999,
capacity: 5,
rating: 4.5,
estimatedTime: "Rider will contact you soon",
features: ["AC", "Music System", "Comfortable", "Airport Taxi ₹1099"],
features: ["AC", "Music System", "Comfortable", "Airport Taxi ₹999"],
image: ""
},
{

4
src/supabase/functions/server/index.tsx
View File

@ -69,8 +69,8 @@ app.post("/make-server-10d555e8/send-booking-email", async (c) => {
// Get vehicle pricing
const getVehiclePrice = (vehicleType) => {
switch(vehicleType) {
case '5-seater': return '₹1099';
switch (vehicleType) {
case '5-seater': return '₹999';
case '7-seater': return '₹1600';
case 'innova': return '₹2000';
default: return 'Contact for pricing';