Driver Service - Copy this React, Tailwind Component to your project
import React, { useState, useRef } from "react"; import { FaCar, FaUser, FaCalendar, FaClock, FaStar, FaPhone, FaEnvelope, FaMapMarkerAlt, FaFacebook, FaTwitter, FaInstagram, FaLinkedin, FaCreditCard, FaLock, FaSun, FaMoon } from "react-icons/fa"; import { BsArrowRight } from "react-icons/bs"; const DriverService = () => { const [activeTab, setActiveTab] = useState("home"); const [bookingData, setBookingData] = useState({ name: "", email: "", phone: "", pickup: "", dropoff: "", date: "", time: "", service: "designated", }); const homeRef = useRef(null); const servicesRef = useRef(null); const pricingRef = useRef(null); const bookingRef = useRef(null); const reviewsRef = useRef(null); const contactRef = useRef(null); const scrollToSection = (ref, tabName) => { setActiveTab(tabName); ref.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }; const services = [ { title: "Dịch Vụ Lái Xe Buổi Ngày", description: "Áp dụng từ 10 giờ sáng đến 23 giờ đêm", icon: <FaSun className="text-4xl text-yellow-500" />, prices: [ { range: "0-4Km", price: "99.000đ/chuyến" }, { range: "4Km-20Km", price: "99.000đ + 12.000đ/Km" }, { range: "Trên 21Km", price: "291.000đ + 10.000đ/Km" } ] }, { title: "Dịch Vụ Lái Xe Buổi Đêm", description: "Áp dụng từ 23 giờ đêm đến 01 giờ sáng", icon: <FaMoon className="text-4xl text-yellow-500" />, prices: [ { range: "0-4Km", price: "149.000đ/chuyến" }, { range: "4Km-20Km", price: "149.000đ + 12.000đ/Km" }, { range: "Trên 21Km", price: "341.000đ + 10.000đ/Km" } ] } ]; const steps = [ { title: "Đặt Dịch Vụ", description: "Gọi cho chúng tôi hoặc sử dụng ứng dụng di động", icon: <FaPhone className="text-3xl text-yellow-500" /> }, { title: "Tài Xế Đến", description: "Tài xế chuyên nghiệp đến địa điểm của bạn", icon: <FaCar className="text-3xl text-yellow-500" /> }, { title: "Hành Trình An Toàn", description: "Tận hưởng chuyến đi thoải mái và an toàn", icon: <FaLock className="text-3xl text-yellow-500" /> }, { title: "Thanh Toán", description: "Các phương thức thanh toán an toàn và thuận tiện", icon: <FaCreditCard className="text-3xl text-yellow-500" /> } ]; const reviews = [ { name: "Nguyễn Văn An", rating: 5, comment: "Dịch vụ xuất sắc! Tài xế rất chuyên nghiệp và lịch sự.", service: "Tài Xế Chuyên Nghiệp", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" }, { name: "Trần Thị Bình", rating: 5, comment: "Trải nghiệm tuyệt vời với dịch vụ tài xế VIP.", service: "Tài Xế VIP", image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" }, { name: "Phạm Văn Cường", rating: 5, comment: "Dịch vụ tài xế đường dài rất đáng tin cậy và chuyên nghiệp.", service: "Tài Xế Đường Dài", image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" } ]; const renderStars = (rating) => { return [...Array(5)].map((_, index) => ( <FaStar key={index} className={`${index < rating ? "text-yellow-400" : "text-gray-300"}`} /> )); }; return ( <div className="min-h-screen bg-gray-50"> {/* Header */} <header className="bg-white shadow-lg fixed w-full z-50"> <div className="max-w-7xl mx-auto px-4"> <div className="flex justify-between h-20"> <div className="flex items-center"> <span className="text-2xl font-bold text-yellow-500">Dịch Vụ Lái Xe Hộ P-Rent (24-7)</span> </div> <div className="hidden md:flex items-center space-x-8"> <button onClick={() => scrollToSection(homeRef, "home")} className={`${activeTab === "home" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Trang Chủ </button> <button onClick={() => scrollToSection(servicesRef, "services")} className={`${activeTab === "services" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Dịch Vụ </button> <button onClick={() => scrollToSection(pricingRef, "pricing")} className={`${activeTab === "pricing" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Bảng Giá </button> <button onClick={() => scrollToSection(bookingRef, "booking")} className={`${activeTab === "booking" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Đặt Xe </button> <button onClick={() => scrollToSection(reviewsRef, "reviews")} className={`${activeTab === "reviews" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Đánh Giá </button> <button onClick={() => scrollToSection(contactRef, "contact")} className={`${activeTab === "contact" ? "text-yellow-500 border-b-2 border-yellow-500" : "text-gray-600"} h-full px-3 transition duration-300 capitalize hover:text-yellow-500`} > Liên Hệ </button> </div> <div className="flex items-center space-x-4"> <FaPhone className="text-yellow-500" /> <span className="text-yellow-500">0123.456.789</span> </div> </div> </div> </header> {/* Hero Section */} <section ref={homeRef} className="pt-20"> <div className="relative h-[600px] bg-cover bg-center" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')" }}> <div className="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center"> <div className="text-center text-white space-y-6 p-8 max-w-4xl"> <h1 className="text-6xl font-bold">Dịch Vụ Lái Xe Hộ P-Rent (24-7)</h1> <p className="text-xl">An Toàn Là Ưu Tiên - Tài Xế Chuyên Nghiệp Phục Vụ Bạn</p> <button onClick={() => scrollToSection(bookingRef, "booking")} className="bg-yellow-500 text-white px-10 py-4 rounded-full hover:bg-yellow-400 transition duration-300 text-lg font-semibold"> Đặt Ngay </button> </div> </div> </div> </section> {/* Services Section */} <section ref={servicesRef} className="py-20 bg-white"> <div className="max-w-7xl mx-auto px-4"> <h2 className="text-4xl font-bold text-center text-yellow-500 mb-12">Dịch Vụ Của Chúng Tôi</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> {services.map((service, index) => ( <div key={index} className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border border-gray-100 hover:border-yellow-500"> <div className="flex flex-col items-center space-y-4"> {service.icon} <h3 className="text-2xl font-semibold text-yellow-500">{service.title}</h3> <p className="text-gray-600 text-center">{service.description}</p> <div className="space-y-2 w-full"> {service.prices.map((priceItem, idx) => ( <div key={idx} className="flex justify-between items-center border-b border-gray-200 py-2"> <span className="text-gray-600">{priceItem.range}</span> <span className="text-yellow-500 font-bold">{priceItem.price}</span> </div> ))} </div> <button className="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-400 transition duration-300"> Xem Thêm </button> </div> </div> ))} </div> </div> </section> {/* Process Section */} <section ref={pricingRef} className="py-20 bg-gray-50"> <div className="max-w-7xl mx-auto px-4"> <h2 className="text-4xl font-bold text-center text-yellow-500 mb-12">Quy Trình Hoạt Động</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {steps.map((step, index) => ( <div key={index} className="flex flex-col items-center space-y-4"> <div className="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center text-white"> {step.icon} </div> <h3 className="text-xl font-semibold text-yellow-500">{step.title}</h3> <p className="text-gray-600 text-center">{step.description}</p> </div> ))} </div> </div> </section> {/* Reviews Section */} <section ref={reviewsRef} className="py-20 bg-white"> <div className="max-w-7xl mx-auto px-4"> <h2 className="text-4xl font-bold text-center text-yellow-500 mb-12">Đánh Giá Từ Khách Hàng</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> {reviews.map((review, index) => ( <div key={index} className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border border-gray-100 hover:border-yellow-500"> <div className="flex items-center space-x-4 mb-4"> <img src={review.image} alt={review.name} className="w-16 h-16 rounded-full object-cover" /> <div> <h3 className="font-semibold text-lg">{review.name}</h3> <div className="flex">{renderStars(review.rating)}</div> </div> </div> <p className="text-gray-600 mb-4">{review.comment}</p> <span className="text-yellow-500 font-semibold">{review.service}</span> </div> ))} </div> </div> </section> {/* Footer */} <footer ref={contactRef} className="bg-yellow-500 text-white py-12"> <div className="max-w-7xl mx-auto px-4"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h3 className="text-2xl font-bold mb-4">Dịch Vụ Lái Xe Hộ P-Rent (24-7)</h3> <p className="text-gray-100">Đối tác tin cậy của bạn cho dịch vụ tài xế chuyên nghiệp.</p> </div> <div> <h4 className="text-xl font-semibold mb-4">Liên Hệ</h4> <div className="space-y-2"> <p><FaPhone className="inline mr-2" /> 0123.456.789</p> <p><FaEnvelope className="inline mr-2" /> info@p-rent.com</p> <p><FaMapMarkerAlt className="inline mr-2" /> 123 Đường Lê Lợi, TP.HCM</p> </div> </div> <div> <h4 className="text-xl font-semibold mb-4">Theo Dõi</h4> <div className="flex space-x-4"> <FaFacebook className="text-2xl cursor-pointer hover:text-gray-200" /> <FaTwitter className="text-2xl cursor-pointer hover:text-gray-200" /> <FaInstagram className="text-2xl cursor-pointer hover:text-gray-200" /> <FaLinkedin className="text-2xl cursor-pointer hover:text-gray-200" /> </div> </div> <div> <h4 className="text-xl font-semibold mb-4">Bản Tin</h4> <div className="flex"> <input type="email" placeholder="Nhập email của bạn" className="p-2 rounded-l-lg w-full text-gray-800" /> <button className="bg-yellow-600 px-4 rounded-r-lg hover:bg-yellow-700 transition duration-300"> Đăng Ký </button> </div> </div> </div> <div className="border-t border-yellow-400 mt-8 pt-8 text-center"> <p>© 2024 Dịch Vụ Lái Xe Hộ P-Rent (24-7). Đã đăng ký bản quyền.</p> </div> </div> </footer> {/* Floating Call Button */} <a href="tel:0123456789" className="fixed bottom-8 right-8 bg-yellow-500 text-white p-4 rounded-full shadow-lg hover:bg-yellow-400 transition duration-300"> <FaPhone className="text-2xl" /> </a> </div> ); }; export default DriverService; I mean update function in this code , when the user clicks the 'Đặt ngay' button, displays an interface using the Google Maps API to allow the user to select a pickup and drop off point. Calculate the distance in kilometers, determine the fare, and display the total cost to the user.