Adding Booking Page

[pragyanbhatt1213]

🖥️ Frontend Issue

Description

Added new booking page component with search functionality and train class filters

Steps to Reproduce

1. Go to Homepage
2. Click on 'Booking' icon
3. Navigate to new booking page with search functionality

Expected behavior

The booking page should:

• Display a search interface with from/to station inputs
• Include date picker for journey selection
• Show train class filters (1AC, 2AC, 3AC, Sleeper)
• Match existing application theme and styling
• Navigate correctly from homepage booking icon

Actual behavior

New booking page implementation includes:

• Search form with station inputs and date picker
• Train class selection with visual toggles
• Responsive design matching login/register pages
• Navigation from homepage booking icon

Screenshots or Video

Implementation Details

• Created new booking.jsx component
• Added routing in App.jsx
• Implemented station search with date filter
• Added train class selection cards
• Matched existing application theme
• Connected navigation from homepage booking icon

Files Changed

• Added: /src/Pages/booking.jsx
• Modified: /src/App.jsx (added route)
• Modified: /src/Pages/Herosection.jsx (added navigation)

Are you participating in GSSoC?

• Yes
• No

Additional Notes

The booking page follows the existing design system and implements core train booking functionality. Future enhancements could include:

• Station autocomplete
• Fare calculator
• Recent searches
• Seat availability indicator

[github-actions]

Thank you for raising this issue! We'll look into it as soon as possible. Please ensure that the issue is not duplicate, and you read CONTRIBUTING.md carefully. Your contributions are highly appreciated! 😊

[dhairyagothi]

Bro check figma design first
We don't want to book train
We have 3 booking options to add

Wheelchair booking
Cloak room booking

Check figma design
And design just booking page only
Don't add different types of booking for now

Assigned @pragyanbhatt1213

[pragyanbhatt1213]

Bro check figma design first We don't want to book train We have 3 booking options to add

Wheelchair booking Cloak room booking

Check figma design And design just booking page only Don't add different types of booking for now

Assigned @pragyanbhatt1213

Ohhk let me make the changes according to the Figma design.
Then I will update the issue.

[dhairyagothi]

Bro check figma design first We don't want to book train We have 3 booking options to add

Wheelchair booking Cloak room booking

Check figma design And design just booking page only Don't add different types of booking for now

Assigned @pragyanbhatt1213

Ohhk let me make the changes according to the Figma design.
Then I will update the issue.

Directly make PR after doing change

[pragyanbhatt1213]

Bro check figma design first We don't want to book train We have 3 booking options to add

Wheelchair booking Cloak room booking

Check figma design And design just booking page only Don't add different types of booking for now

Assigned @pragyanbhatt1213

Ohhk let me make the changes according to the Figma design.
Then I will update the issue.

Directly make PR after doing change

Okay I will do it.

[github-actions]

Hello @pragyanbhatt1213! Your issue #64 has been closed. Thank you for your contribution!