Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Build and Deploy a COMPLETE Car Rental Website Using React JS", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Setting Up the Project
Before building the "Car Rental Website" with React.js and CSS, ensure Node.js is installed on your computer. If not, download and install it from the official Node.js website.
Create a Project Folder:
- Make a new folder, for instance, “car-rental”.
- Open this folder in your VS Code editor.
Initialize the Project:
Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:
npm create vite@latest ./ -- --template react
Install necessary dependencies and start the development server:
npm install
Install the following dependcies:
- TailwindCSS
- React Icons
Run your development server:
npm run devIf your project is running in your browser, congratulations! You’ve successfully set up your app. Now, let’s move on to modifying folders and files.
Modify folder and CSS Files:
- Remove the default assets folder and App.css file.
- Replace the content of index.css with the provided CSS code.
@import "tailwindcss";
Download Images:
- You can download the images used here.
Creating Components
Within the src directory of your project, organize your files by creating a “components” folder. Inside the components folder, create the following files:
- FeaturedCars.jsx
- Features.jsx
- Footer.jsx
- Hero.jsx
- Home.jsx
- Layout.jsx
- Nav.jsx
- VideoSection.jsx
Creating Pages
Within the src directory of your project, organize your files by creating a “pages” folder. Inside the components folder, create the following files:- Login.jsx
- Register.jsx
Within the src directory of your project, organize your files by creating a “pages” folder. Inside the components folder, create the following files:
- Login.jsx
- Register.jsx
Adding the Codes
Add the respective code to each newly created file to define the layout.
In src/component/FeaturedCars.jsx, add the code.
import React from 'react'
import bmw from "../assets/bmw.jpg"
import tesla from "../assets/tesla.jpg"
import audi from "../assets/audi.jpg"
import toyota from "../assets/toyota.jpg"
import kia from "../assets/kia.jpg"
import ford from "../assets/ford.jpg"
import { Car } from "lucide-react";
import { MapPin } from 'lucide-react';
import { Users } from 'lucide-react';
import { Cog } from 'lucide-react';
import { Fuel } from 'lucide-react';
import { Star } from 'lucide-react';
import { ArrowRight } from 'lucide-react';
//ScrollReveal
import ScrollReveal from 'scrollreveal'
const cars = [
{
id: 1,
name: 'Tesla Model 3',
year: 2023,
location: 'San Francisco',
seats: 5,
transmission: 'Automatic',
fuel: 'Electric',
price: 89,
rating: 4.8,
badges: ['Autopilot', 'Premium Audio', '+2 more'],
type: 'Electric',
status: 'Available',
image: tesla,
},
{
id: 2,
name: 'BMW X5',
year: 2023,
location: 'New York',
seats: 7,
transmission: 'Automatic',
fuel: 'Gasoline',
price: 149,
rating: 4.7,
badges: ['Leather Seats', 'Navigation', '+2 more'],
type: 'Luxury SUV',
status: 'Available',
image: bmw,
},
{
id: 3,
name: 'Audi A4',
year: 2023,
location: 'Los Angeles',
seats: 5,
transmission: 'Automatic',
fuel: 'Gasoline',
price: 79,
rating: 4.6,
badges: ['Virtual Cockpit', 'Heated Seats', '+2 more'],
type: 'Sedan',
status: 'Available',
image: audi,
},
{
id: 4,
name: 'Toyota Auris',
year: 2022,
location: 'New York',
seats: 5,
transmission: 'Automatic',
fuel: 'Petrol',
price: 49,
rating: 4.4,
badges: ['Reliable', 'Fuel Efficient', '+1 more'],
type: 'Sedan',
status: 'Available',
image: toyota,
},
{
id: 5,
name: 'Ford Explorer',
year: 2021,
location: 'Phoenix',
seats: 7,
transmission: 'Automatic',
fuel: 'Petrol',
price: 69,
rating: 4.5,
badges: ['Spacious', 'All-wheel drive'],
type: 'SUV',
status: 'Available',
image: ford,
},
{
id: 6,
name: 'Kia Sportage',
year: 2022,
location: 'London',
seats: 5,
transmission: 'Automatic',
fuel: 'Hybrid',
price: 65,
rating: 4.3,
badges: ['Hybrid', 'Modern Interior'],
type: 'Crossover',
status: 'Available',
image: kia,
},
];
const FeaturedCars = () => {
return (
<section className="bg-gray-100 py-20 sm:px-16 px-4">
<div className="max-w-7xl mx-auto text-center mb-12 head-reveal">
<h2 className="sm:text-4xl text-3xl font-bold mb-2 flex justify-center items-center gap-2">
<span className="text-blue-500"><Car className='w-12 h-12' /></span><span className='text-gray-800'>Featured Cars</span>
</h2>
<p className="text-gray-600 text-lg">Discover our handpicked selection of premium vehicles, perfect for any journey</p>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{cars.map((car) => (
<div key={car.id} className="bg-white rounded-xl p-4 shadow-md hover:shadow-lg transition duration-300 hover:-translate-y-3 reveal-y">
<div className="relative overflow-hidden">
<img src={car.image} alt={car.name} className="rounded-md w-full h-48 sm:h-56 md:h-60 object-cover" />
<span className="absolute top-2 left-2 bg-white text-xs font-semibold px-2 py-1 rounded-full shadow">{car.type}</span>
<span className="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">{car.status}</span>
</div>
<div className="mt-4">
<div className='flex justify-between items-center'>
<h3 className="text-lg font-semibold">{car.name}</h3>
<div className="text-yellow-500 text-sm flex items-center gap-1"><Star className='w-5 h-5' />{car.rating}</div>
</div>
<p className="text-sm text-gray-500">{car.year}</p>
<div className="flex items-center text-sm text-gray-500 my-4 gap-1">
<MapPin className='w-4 h-4' /><span>{car.location}</span>
</div>
<div className="flex sm:items-center sm:flex-row flex-col sm:gap-10 gap-2 mt-2 text-gray-600 text-sm">
<span className='inline-flex items-center gap-1'><Users className='w-4 h-4 text-blue-500' /> {car.seats} seats</span>
<span className='inline-flex items-center gap-1'><Cog className='w-4 h-4 text-blue-500' /> {car.transmission}</span>
<span className='inline-flex items-center gap-1'><Fuel className='w-4 h-4 text-blue-500' /> {car.fuel}</span>
</div>
<div className="flex flex-wrap gap-2 mt-3">
{car.badges.map((badge, i) => (
<span key={i} className="bg-gray-50 text-xs px-2 py-1 rounded-full font-semibold border border-gray-200">{badge}</span>
))}
</div>
<div className="mt-4">
<p className="text-lg font-bold text-blue-500">${car.price}<span className="text-sm font-normal text-gray-500">/day</span></p>
</div>
<div className="flex sm:flex-row flex-col mt-4 gap-3">
<button className="sm:w-1/2 w-full border border-gray-300 px-3 py-2 rounded cursor-pointer transition duration-300 hover:bg-gray-300">View Details</button>
<button className="sm:w-1/2 w-full bg-green-600 text-white px-3 py-2 rounded cursor-pointer transition duration-300 hover:bg-green-700">Book Now</button>
</div>
</div>
</div>
))}
</div>
<button className='mx-auto flex items-center justify-center mt-12 bg-blue-500 py-3 px-5 text-white rounded cursor-pointer gap-1 transition duration-300 hover:bg-blue-700'>View All Cars <ArrowRight className='w-5 h-5' /></button>
</section>
)
}
export default FeaturedCars
Add the respective code to each newly created file to define the layout.
In src/component/Featured.jsx, add the code.
import React from 'react'
import { Shield, Clock4, CreditCard, MapPin, Headphones, FileBadge, Users, Zap } from 'lucide-react';
const features = [
{
title: 'Fully Insured',
description: 'All our vehicles come with comprehensive insurance coverage for your peace of mind.',
icon: <Shield className='w-8 h-8' />,
},
{
title: '24/7 Service',
description: 'Round-the-clock customer support and roadside assistance whenever you need it.',
icon: <Clock4 className='w-8 h-8' />,
},
{
title: 'Easy Payment',
description: 'Secure online payments with multiple payment options and instant confirmation.',
icon: <CreditCard className='w-8 h-8' />,
},
{
title: 'Multiple Locations',
description: 'Pick up and drop off at any of our 50+ convenient locations across the country.',
icon: <MapPin className='w-8 h-8' />,
},
{
title: 'Expert Support',
description: 'Our dedicated team is here to help you find the perfect vehicle for your needs.',
icon: <Headphones className='w-8 h-8' />,
},
{
title: 'Premium Quality',
description: 'All vehicles are regularly maintained and meet our high-quality standards.',
icon: <FileBadge className='w-8 h-8' />,
},
{
title: 'Trusted by Thousands',
description: 'Join over 100,000 satisfied customers who trust us with their transportation needs.',
icon: <Users className='w-8 h-8' />,
},
{
title: 'Instant Booking',
description: 'Book your car in just a few clicks and get instant confirmation via email.',
icon: <Zap className='w-8 h-8' />,
},
];
const Features = () => {
return (
<section className="py-16 bg-gray-100 px-4 sm:px-6 lg:px-28">
<div className="max-w-7xl mx-auto text-center">
<h2 className="sm:text-4xl text-3xl font-bold text-gray-800 mb-4 hero-reveal">Why Choose AutoRent?</h2>
<p className="text-gray-600 mb-12 max-w-2xl mx-auto text-lg hero-reveal">
We're committed to providing you with the best car rental experience through our premium services and customer-first approach.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => (
<div
key={index}
className="flex flex-col bg-white items-center text-center border border-gray-300 rounded-lg p-6 shadow-sm hover:shadow-md transform hover:-translate-y-2 transition duration-300 reveal-y"
>
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-blue-500 mb-4 text-white">{feature.icon}</div>
<h3 className="text-lg font-semibold text-gray-800 mb-2">{feature.title}</h3>
<p className="text-sm text-gray-600">{feature.description}</p>
</div>
))}
</div>
</div>
</section>
)
}
export default Features
Add the respective code to each newly created file to define the layout.
In src/component/Footer.jsx, add the code.
import React from 'react'
import { Link } from 'react-router-dom';
import { Car, Facebook, Twitter, Instagram, Phone, Mail, MapPin } from 'lucide-react';
const Footer = () => {
return (
<footer className="bg-gray-900 text-gray-300 py-16 px-4 sm:px-6 lg:px-20">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
{/* Company Info */}
<div>
<Link to='/' className="flex items-center space-x-2">
<Car className="h-8 w-8 text-blue-500" />
<span className="text-xl font-bold">AutoRent</span>
</Link>
<p className="leading-relaxed my-4">
Your trusted partner for premium car rentals. Experience the freedom of the road with our quality vehicles and exceptional service.
</p>
<div className="flex gap-4 mt-2">
<Facebook className="hover:text-white cursor-pointer" />
<Twitter className="hover:text-white cursor-pointer" />
<Instagram className="hover:text-white cursor-pointer" />
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="text-white font-semibold mb-4">Quick Links</h4>
<ul className="space-y-2">
<li><a href="#" className="hover:underline">Home</a></li>
<li><a href="#" className="hover:underline">Our Cars</a></li>
<li><a href="#" className="hover:underline">About Us</a></li>
<li><a href="#" className="hover:underline">Contact</a></li>
<li><a href="#" className="hover:underline">Terms & Conditions</a></li>
</ul>
</div>
{/* Services */}
<div>
<h4 className="text-white font-semibold mb-4">Services</h4>
<ul className="space-y-2">
<li><a href="#" className="hover:underline">Economy Cars</a></li>
<li><a href="#" className="hover:underline">Luxury Vehicles</a></li>
<li><a href="#" className="hover:underline">SUVs & Trucks</a></li>
<li><a href="#" className="hover:underline">Electric Cars</a></li>
<li><a href="#" className="hover:underline">Long-term Rentals</a></li>
</ul>
</div>
{/* Contact */}
<div>
<h4 className="text-white font-semibold mb-4">Contact Us</h4>
<ul className="space-y-3">
<li className="flex items-center gap-2">
<Phone className="text-blue-400 w-5 h-5" /> +1 (555) 123-4567
</li>
<li className="flex items-center gap-2">
<Mail className="text-blue-400 w-5 h-5" /> info@autorent.com
</li>
<li className="flex items-center gap-2">
<MapPin className="text-blue-400 w-5 h-5" /> 123 Main St, City, State 12345
</li>
</ul>
</div>
</div>
{/* Bottom Bar */}
<div className="border-t border-gray-700 mt-10 pt-6 text-sm flex flex-col sm:flex-row justify-between items-center text-gray-500">
<p>© {new Date().getFullYear()} AutoRent. All rights reserved.</p>
<div className="flex gap-4 mt-4 sm:mt-0">
<a href="#" className="hover:underline">Privacy Policy</a>
<a href="#" className="hover:underline">Terms of Service</a>
</div>
</div>
</footer>
)
}
export default Footer
Add the respective code to each newly created file to define the layout.
In src/component/Hero.jsx, add the code.
import React, { useEffect } from 'react'
import { MapPin } from 'lucide-react';
import { Calendar } from 'lucide-react';
import { Clock } from 'lucide-react';
import { Search } from 'lucide-react';
//Scroll Reveal
import ScrollReveal from 'scrollreveal';
const Hero = () => {
useEffect(() => {
ScrollReveal().reveal('.hero-reveal', {
distance: '50px',
duration: 1000,
easing: 'ease-in-out',
origin: 'left',
reset: false,
});
}, []);
useEffect(() => {
ScrollReveal().reveal(".head-reveal", {
scale: 0.85,
distance: "0px",
duration: 1500,
easing: "ease-in-out",
reset: false
})
}, []);
useEffect(() => {
ScrollReveal().reveal(".reveal-y", {
origin: "bottom",
distance: "100px",
duration: 1500,
interval: 200,
easing: "ease-in-out",
reset: false
})
}, []);
return (
<section className="bg-gradient-to-br from-blue-500 to-blue-700 text-white sm:py-28 py-16 px-4 text-center">
<h1 className="text-4xl sm:text-5xl font-bold mb-4 hero-reveal">
Find Your Perfect <span className="text-yellow-400">Rental Car</span>
</h1>
<p className="text-lg sm:text-xl mb-12 text-gray-200 hero-reveal">
Discover amazing deals on quality vehicles. Book now and drive away with confidence.
</p>
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-5 gap-4 items-end text-black hero-reveal">
{/* Pickup Location */}
<div>
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
<MapPin className='w-5 h-5' /> <span>Pickup Location</span>
</label>
<select className="w-full p-2 border border-gray-300 rounded cursor-pointer">
<option>Select city</option>
<option>New York</option>
<option>Phoenix</option>
<option>Austin</option>
</select>
</div>
{/* Pickup Date */}
<div>
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
<Calendar className='w-5 h-5' /> <span>Pickup Date</span>
</label>
<input type="date" className="w-full p-2 border border-gray-300 rounded cursor-pointer" />
</div>
{/* Pickup Time */}
<div>
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
<Clock className='w-5 h-5' /> <span>Pickup Time</span>
</label>
<input type='time' className="w-full p-2 border border-gray-300 rounded cursor-pointer" />
</div>
{/* Return Date */}
<div>
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
<Calendar className='w-5 h-5' /> <span>Return Date</span>
</label>
<input type="date" className="w-full p-2 border border-gray-300 rounded" />
</div>
{/* Button */}
<div>
<button className="flex items-center justify-center gap-2 w-full cursor-pointer bg-blue-500 text-white p-2 rounded hover:bg-blue-700 transition duration-300">
<Search className='w-5 h-5' /> <span>Search Cars</span>
</button>
</div>
</div>
{/* Stats */}
<div className="mt-16 max-w-4xl mx-auto grid grid-cols-2 sm:grid-cols-4 gap-8 text-white hero-reveal">
<div>
<h2 className="sm:text-4xl text-3xl font-bold">500+</h2>
<p className="sm:text-lg text-gray-200">Premium Cars</p>
</div>
<div>
<h2 className="sm:text-4xl text-3xl font-bold">50+</h2>
<p className="sm:text-lg text-gray-200">Locations</p>
</div>
<div>
<h2 className="sm:text-4xl text-3xl font-bold">24/7</h2>
<p className="sm:text-lg text-gray-200">Support</p>
</div>
<div>
<h2 className="sm:text-4xl text-3xl font-bold">99%</h2>
<p className="sm:text-lg text-gray-200">Satisfaction</p>
</div>
</div>
</section>
)
}
export default Hero
Add the respective code to each newly created file to define the layout.
In src/component/Home.jsx, add the code.
import React from 'react'
import Hero from './Hero'
import FeaturedCars from './FeaturedCars'
import VideoSection from './VideoSection'
import Features from './Features'
import Footer from './Footer'
const Home = () => {
return <>
<Hero />
<FeaturedCars />
<VideoSection />
<Features />
<Footer />
</>
}
export default Home
Add the respective code to each newly created file to define the layout.
In src/component/Layout.jsx, add the code.
import React from 'react'
import Nav from './Nav'
import { Outlet } from 'react-router-dom'
const Layout = () => {
return <>
<Nav />
<main>
<Outlet />
</main>
</>
}
export default Layout
Add the respective code to each newly created file to define the layout.
In src/component/Nav.jsx, add the code.
import React from 'react'
import { useState } from "react";
import { Button } from '@mui/material';
import { Car, Menu, X, LogIn } from "lucide-react";
import { Link } from 'react-router-dom';
const Nav = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false)
return (
<nav className="bg-white shadow-elegant sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<Link to='/' className="flex items-center space-x-2 text-gray-800">
<Car className="h-8 w-8" />
<span className="text-xl font-bold">AutoRent</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-8">
<Link to='/' className="text-gray-700 hover:text-blue-700 transition-colors">Home</Link>
<Link to='#' className="text-gray-700 hover:text-blue-700 transition-colors">Cars</Link>
<Link to='#' className="text-gray-700 hover:text-blue-700 transition-colors">About</Link>
<Link to='#' className="text-gray-700 hover:text-blue-700 transition-colors">Contact</Link>
</div>
<div className="hidden md:flex items-center space-x-4">
<Link to='/login' className='py-1 px-2 flex items-center gap-2 rounded-sm transition duration-300 hover:bg-gray-200'><LogIn className="h-4 w-4" /><span>Login</span></Link>
<Link to='/register' className='rounded-sm py-1 px-3 transition duration-300 bg-blue-500 text-white hover:bg-blue-700'>Sign Up</Link>
</div>
{/* Mobile menu button */}
<div className="md:hidden">
<Button
variant="ghost"
size="small"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</Button>
</div>
</div>
{/* Mobile Navigation */}
{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
<Link
to="/"
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Home
</Link>
<Link
to=''
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Cars
</Link>
<Link
to=''
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
About
</Link>
<Link
to=''
className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
Contact
</Link>
</div>
<div className="flex items-center space-x-4 pb-5">
<Link to="/login">
<Button variant='ghost' size="small">
<LogIn className="h-4 w-4 mr-2" /> Login
</Button>
</Link>
<Link to='/register'>
<Button variant='contained' size="small">Sign Up</Button>
</Link>
</div>
</div>
)}
</div>
</nav>
)
}
export default Nav
Add the respective code to each newly created file to define the layout.
In src/component/VideoSection.jsx, add the code.
import React, { useState } from 'react'
import videoImg from "../assets/video-img.jpg"
import { Play, X } from 'lucide-react';
const VideoSection = () => {
const [showVideo, setShowVideo] = useState(false);
return (
<section className="px-4 sm:py-20 py-16 flex justify-center items-center bg-white head-reveal">
<div className="relative w-full max-w-7xl">
{/* Image Container */}
<img
src={videoImg}
alt="BMW car"
className="w-full sm:h-[450px] h-[300px] rounded-xl object-cover shadow-lg"
/>
{/* Play Button */}
<button
onClick={() => setShowVideo(true)}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
>
<span className="relative flex justify-center items-center w-20 h-20 rounded-full bg-white bg-opacity-70 shadow-xl">
<span className="absolute w-28 h-28 bg-white opacity-50 rounded-full -z-10 animate-ping ease-linear"></span>
<span className="absolute w-32 h-32 bg-white opacity-20 rounded-full -z-10 animate-ping delay-100 ease-linear"></span>
<Play className='text-red-500 w-8 h-8' />
</span>
</button>
{/* Video Modal */}
{showVideo && (
<div className="fixed inset-0 bg-black bg-opacity-10 z-50 flex items-center justify-center px-4">
<div className="relative w-full max-w-3xl">
<button
onClick={() => setShowVideo(false)}
className="absolute top-2 right-2 text-white text-2xl hover:text-red-500"
>
<X className='cursor-pointer' />
</button>
<div className="aspect-w-16 aspect-h-9 h-[400px] w-full">
<iframe
src="https://www.youtube.com/embed/tgbNymZ7vqY"
title="Demo Video"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
className="rounded-lg w-full h-full"
></iframe>
</div>
</div>
</div>
)}
</div>
</section>
)
}
export default VideoSection
Add the respective code to each newly created file to define the layout.
In src/pages/Login.jsx, add the code.
import React, { useEffect } from 'react'
import { Facebook, Mail, Lock, Instagram, Car } from 'lucide-react';
import ScrollReveal from 'scrollreveal';
const Login = () => {
useEffect(() => {
ScrollReveal().reveal(".reveal-x-alt", {
origin: "right",
distance: "100px",
duration: 1500,
easing: "ease-in-out",
reset: false
})
}, []);
return (
<div className="py-14 flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700 px-4">
{/* Logo */}
<div className="text-center mb-6">
<div className="text-white text-3xl font-bold flex justify-center items-center gap-2">
<Car className='w-10 h-10' /> <span>AutoRent</span>
</div>
</div>
<div className="w-full max-w-md bg-gray-100 rounded-lg shadow-lg p-8 pt-5 reveal-x-alt">
{/* Heading */}
<h2 className="text-2xl font-bold text-center text-gray-800 mb-1">Welcome Back</h2>
<p className="text-center text-gray-500 mb-6">Sign in to your account</p>
{/* Form */}
<form>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
<div className="relative">
<Mail className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="email"
placeholder="Enter your email"
className="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Password</label>
<div className="relative">
<Lock className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="password"
placeholder="Enter your password"
className="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div className="flex sm:flex-row flex-col sm:items-center sm:gap-0 gap-2 justify-between text-sm mb-6">
<label className="flex items-center gap-1 cursor-pointer">
<input type="checkbox" className="cursor-pointer appearance-none h-4 w-4 border border-gray-300 rounded-sm checked:bg-blue-500 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400" />
<span className='text-base'>Remember me</span>
</label>
<a href="#" className="text-blue-500 hover:underline">Forgot password?</a>
</div>
<button
type="submit"
className="w-full cursor-pointer bg-blue-500 hover:bg-blue-700 text-white py-2 rounded-md font-medium transition duration-200"
>
Sign In
</button>
</form>
{/* Divider */}
<div className="flex items-center justify-between gap-6 my-6">
<span className="border-t border-gray-300 w-full"></span>
<span className="text-sm text-gray-400 w-full">Or continue with</span>
<span className="border-t border-gray-300 w-full"></span>
</div>
{/* Social Login */}
<div className="flex gap-4">
<button className="w-1/2 flex cursor-pointer items-center justify-center border border-gray-300 py-2 rounded-md hover:bg-blue-700 hover:text-white transition duration-300">
<Instagram className="mr-2" /> Google
</button>
<button className="w-1/2 flex cursor-pointer items-center justify-center border border-gray-300 py-2 rounded-md hover:bg-blue-700 hover:text-white transition duration-300">
<Facebook className="mr-2" /> Facebook
</button>
</div>
{/* Sign up link */}
<p className="text-center text-sm text-gray-600 mt-6">
Don't have an account?{' '}
<a href="/register" className="text-blue-500 hover:underline">Sign up</a>
</p>
</div>
</div>
)
}
export default Login
Add the respective code to each newly created file to define the layout.
In src/pages/Register.jsx, add the code.
import React, { useEffect } from 'react'
import { Facebook, Mail, Lock, Instagram, Car, User } from 'lucide-react';
import ScrollReveal from 'scrollreveal';
const Register = () => {
useEffect(() => {
ScrollReveal().reveal(".reveal-x", {
origin: "left",
distance: "100px",
duration: 1500,
easing: "ease-in-out",
reset: false
})
}, [])
return (
<div className="py-14 flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700 px-4">
{/* Logo */}
<div className="text-center mb-6">
<div className="text-white text-3xl font-bold flex justify-center items-center gap-2">
<Car className='w-10 h-10' /> <span>AutoRent</span>
</div>
</div>
<div className="w-full max-w-md bg-gray-100 rounded-lg shadow-lg p-8 pt-5 reveal-x">
{/* Heading */}
<h2 className="text-2xl font-bold text-center text-gray-800 mb-1">Create Account</h2>
<p className="text-center text-gray-500 mb-6">Join thousands of happy customers</p>
{/* Form */}
<form>
{/* Name */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
<div className="relative">
<User className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="First Name"
className="w-full bg-white pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="relative">
<User className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="Last Name"
className="w-full bg-white pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
{/* Email */}
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
<div className="relative">
<Mail className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="email"
placeholder="Enter your email"
className="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
{/* Password */}
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 mb-2">Password</label>
<div className="relative">
<Lock className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
<input
type="password"
placeholder="Enter your password"
className="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div className="flex sm:flex-row flex-col sm:items-center sm:gap-0 gap-2 justify-between text-sm mb-6">
<label className="flex items-center gap-1 cursor-pointer">
<input type="checkbox" className="cursor-pointer appearance-none h-4 w-4 border border-gray-300 rounded-sm checked:bg-blue-500 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400" />
<span className='text-base'>Remember me</span>
</label>
<a href="#" className="text-blue-500 hover:underline">Forgot password?</a>
</div>
<button
type="submit"
className="w-full cursor-pointer bg-blue-500 hover:bg-blue-700 text-white py-2 rounded-md font-medium transition duration-200"
>
Sign In
</button>
</form>
{/* Divider */}
<div className="flex items-center justify-between gap-6 my-6">
<span className="border-t border-gray-300 w-full"></span>
<span className="text-sm text-gray-400 w-full">Or continue with</span>
<span className="border-t border-gray-300 w-full"></span>
</div>
{/* Social Login */}
<div className="flex gap-4">
<button className="w-1/2 flex cursor-pointer items-center justify-center border border-gray-300 py-2 rounded-md hover:bg-blue-700 hover:text-white transition duration-300">
<Instagram className="mr-2" /> Google
</button>
<button className="w-1/2 flex cursor-pointer items-center justify-center border border-gray-300 py-2 rounded-md hover:bg-blue-700 hover:text-white transition duration-300">
<Facebook className="mr-2" /> Facebook
</button>
</div>
{/* Sign up link */}
<p className="text-center text-sm text-gray-600 mt-6">
Don't have an account?{' '}
<a href="/login" className="text-blue-500 hover:underline">Log in</a>
</p>
</div>
</div>
)
}
export default Register
In App.jsx, add the code.
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Layout from './components/Layout'
import Home from './components/Home'
import Login from './pages/Login'
import Register from './pages/Register'
const App = () => {
return (
<Router>
<Layout />
<Routes>
<Route path='/' index element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path='/register' element={<Register />} />
</Routes>
</Router>
)
}
export default App
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create a"Car Rental Website Using React JS". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS, JavaScript React Js & Tailwind Projects, its gonna be fun, trust me 😃.
Keep experimenting! You can add other cool features. Try improving error handling and adding other cool updates to make your chatbot even better.
If you run into any issues, you can download the source code for this AI chatbot project by clicking the “Download” button. Don’t forget to check the README.md file for setup and usage instructions. If you need help, you’ll also find support information there.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.