A
Anonymous

Home Component - Copy this React, Tailwind Component to your project

Create a flight booking system lading page with file name as home component in this U need to add login signup button which then results into modal and on successful login it directs to specific dashboards based on role r. The apis are 1. POST http://localhost:8080/simply fly/customers/create account Create a new customer account 2. POST http://localhost:8080/simply fly/home/login Login to the system and login api will return jwt token and role and on the basis of role you need to direct to the dashboards if customer then to customer dashboard if admin then to admin dashboard if flightowner then to flightowner dashboard . Also on landing page i need search flights just ike indigo which will use api 3. GET http://localhost:8080/simply fly/flightTrips/getflighttrips/{sourceIATACode}/{destinationIATACode}/{date} Get flight trips and this will return me flights . The flights have json returning [ { "departure": "2024 09 30T16:40:00", "arrival": "2024 09 30T18:00:00", "ticketPrice": 1700.0, "status": "Running", "filledSeats": 0, "flightTripId": 15, "flightId": "AI 12345", "duration": "1 hours 20 minutes", "sourceAirport": { "name": "Indira Gandhi International Airport", "iataCode": "DEL", "location": "Delhi" }, "destinationAirport": { "name": "Chhatrapati Shivaji Maharaj International Airport", "iataCode": "BOM", "location": "Mumbai" } } ] now display this in good visual but the library can be only semantic ui or bootsrap or material ui for create account user will have to enter { "username": "priya", "name": "priya Laad", "email": "priya@example.com", "password": "priya", "contact": "1234567890", "age": 25 } and for login username and passowrd . keep the theme blue and white. For background use image of clouds or something related to flights that I will use thoroughout my website. Light image of clouds .Proper logo has to be there and proper footer as well. in the page add advertisement sliders like 50 percent off on first booking family trips discount off for senior citizen etc add proper footer as well.

Prompt
Component Preview

About

HomeComponent - Create a flight booking landing page with login/signup modals, flight search, role-based dashboards, and ad sliders. Bui. Start coding now!

Share

Last updated 1 month ago