diff --git a/src/app/api/send-booking-email/route.ts b/src/app/api/send-booking-email/route.ts new file mode 100644 index 0000000..935a07f --- /dev/null +++ b/src/app/api/send-booking-email/route.ts @@ -0,0 +1,71 @@ +import { NextRequest, NextResponse } from 'next/server'; +import nodemailer from 'nodemailer'; + +const transporter = nodemailer.createTransport({ + service: 'gmail', + auth: { + user: process.env.HOTEL_EMAIL, + pass: process.env.HOTEL_EMAIL_PASSWORD, + }, +}); + +export async function POST(request: NextRequest) { + try { + const { recipientEmail, subject, htmlContent, bookingData, roomDetails } = await request.json(); + + // Validate required fields + if (!bookingData.phone || !bookingData.email || !bookingData.age || !bookingData.roomType) { + return NextResponse.json( + { error: 'Missing required booking information' }, + { status: 400 } + ); + } + + // Send email to hotel + await transporter.sendMail({ + from: process.env.HOTEL_EMAIL, + to: recipientEmail, + subject: subject, + html: htmlContent, + }); + + // Send confirmation email to customer + const confirmationHtml = ` +

Booking Confirmation - Hotel Shine Inn

+

Dear Guest,

+

Thank you for your booking request! We have received your information and will contact you shortly to confirm your reservation.

+

Booking Details:

+ +

Your Contact Information:

+ +

If you have any questions, please don't hesitate to contact us at +91 81305 21617 or reply to this email.

+

We look forward to hosting you at Hotel Shine Inn!

+

Best regards,
Hotel Shine Inn Team
Sector 3, Rohini, Delhi

+ `; + + await transporter.sendMail({ + from: process.env.HOTEL_EMAIL, + to: bookingData.email, + subject: 'Booking Confirmation - Hotel Shine Inn', + html: confirmationHtml, + }); + + return NextResponse.json( + { message: 'Booking email sent successfully' }, + { status: 200 } + ); + } catch (error) { + console.error('Email sending error:', error); + return NextResponse.json( + { error: 'Failed to send booking email' }, + { status: 500 } + ); + } +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 21d07ae..9b12bc8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,13 +10,107 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree'; import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen'; import ContactFaq from '@/components/sections/contact/ContactFaq'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; -import { Sparkles, Star, Home, Wifi, Wind, ParkingCircle, Heart, Lock, Users, MessageCircle, Phone, TrendingUp, Award, CheckCircle } from 'lucide-react'; +import { Sparkles, Star, Home, Wifi, Wind, ParkingCircle, Heart, Lock, Users, MessageCircle, Phone, TrendingUp, Award, CheckCircle, X } from 'lucide-react'; +import { useState } from 'react'; export default function LandingPage() { + const [isBookingModalOpen, setIsBookingModalOpen] = useState(false); + const [formData, setFormData] = useState({ + phone: '', + email: '', + age: '', + roomType: 'deluxe', + paymentMethod: 'online' + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [submitMessage, setSubmitMessage] = useState(''); + const handleCallNow = () => { window.location.href = 'tel:+918130521617'; }; + const handleBookNowClick = () => { + setIsBookingModalOpen(true); + setFormData({ + phone: '', + email: '', + age: '', + roomType: 'deluxe', + paymentMethod: 'online' + }); + setSubmitMessage(''); + }; + + const handleFormChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleFormSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setSubmitMessage(''); + + try { + const roomDetails = { + 'deluxe': { name: 'Deluxe Couple Room', price: '₹1,950/night' }, + 'standard': { name: 'Standard AC Room', price: '₹1,450/night' }, + 'premium': { name: 'Premium Comfort Room', price: '₹2,250/night' } + }; + + const selectedRoom = roomDetails[formData.roomType as keyof typeof roomDetails]; + + const emailContent = ` +

New Booking Request

+

Phone: ${formData.phone}

+

Email: ${formData.email}

+

Age: ${formData.age}

+

Room Type: ${selectedRoom.name}

+

Room Price: ${selectedRoom.price}

+

Payment Method: ${formData.paymentMethod === 'online' ? 'Online Payment' : 'Pay at Counter'}

+

Booking Date: ${new Date().toLocaleString()}

+ `; + + const response = await fetch('/api/send-booking-email', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + recipientEmail: 'contact@hotelshineinn.com', + subject: 'New Booking Request - Hotel Shine Inn', + htmlContent: emailContent, + bookingData: formData, + roomDetails: selectedRoom + }) + }); + + if (response.ok) { + setSubmitMessage('✓ Booking request submitted successfully! We will contact you soon.'); + setFormData({ + phone: '', + email: '', + age: '', + roomType: 'deluxe', + paymentMethod: 'online' + }); + setTimeout(() => { + setIsBookingModalOpen(false); + }, 2000); + } else { + setSubmitMessage('✗ Failed to submit booking. Please try again.'); + } + } catch (error) { + setSubmitMessage('✗ Error submitting booking. Please try again or call us directly.'); + console.error('Booking submission error:', error); + } finally { + setIsSubmitting(false); + } + }; + return ( + {/* Booking Modal */} + {isBookingModalOpen && ( +
+
+
+

Book Your Room

+ +
+ +
+ {/* Phone Number */} +
+ + +
+ + {/* Email */} +
+ + +
+ + {/* Age */} +
+ + +
+ + {/* Room Type */} +
+ + +
+ + {/* Payment Method */} +
+ +
+ + +
+
+ + {/* Submit Message */} + {submitMessage && ( +
+ {submitMessage} +
+ )} + + {/* Submit Button */} + + +

+ By booking, you agree to our terms and conditions +

+
+
+
+ )} +
); -} +} \ No newline at end of file