Enhanced sections to improve design and usability

[ambitiouss22]

Enhanced navbar,container,content box,heading,typography,form field,button styling,image preview styling and qr code.

1. Navbar

Simplified Design: The navbar was reduced to a single link aligned at the center for a minimalist feel, making it easier to navigate.

Button Styling: The background was updated to a bold color (#007BFF), contrasting with the main body and making the navigation clearly distinguishable.

2. Container and Content Box

Container Centering: The container was centered both vertically and horizontally using flexbox to create a visually balanced page, which also improves readability and flow.

Content Box Style: The registration form is wrapped in a .content box with padding and a box-shadow for depth, giving it a card-like appearance. This styling keeps the form focused and organized, separating it from the background for a more polished look.

3. Heading and Typography

Consistent Font Sizes: Font sizes were standardized to ensure readability and a smooth flow from heading to subheading to form fields.

Heading Color: The main heading color was changed to a striking blue (#007BFF) to match the navbar and buttons, adding a cohesive color theme.

4. Form Fields

Field Spacing and Padding: Added consistent spacing and padding around form elements to create a clean, easy-to-follow layout.

Improved Focus States: Enhanced focus states with a subtle border color change and box-shadow to guide the user as they navigate each input.

Clear Labels: Labels were added above each input field for clarity, improving accessibility and usability.

5. Button Styling

Button Color & Hover Effect: Buttons are styled in the same blue as the navbar, with a hover effect that darkens the color and changes cursor style. This interaction provides a visual cue, making buttons appear more responsive and interactive.

Rounded Corners: Slightly rounded corners for a modern touch, making the buttons more appealing.

6. Image Preview Styling

Preview Container: The image preview section for the profile picture is small and circular with a subtle box shadow to integrate it better into the form design, enhancing the user experience by providing immediate feedback.

7. QR Code

Spacing: The QR code container has additional margin at the top, separating it from other elements. This provides a clearer visual hierarchy, making it easier to locate and scan if needed.

8. Responsive Design

Media Queries for Mobile: A @media query adjusts text size and padding on smaller screens to ensure readability and maintain the structure on devices of all sizes.

Overall Design Improvements

Cohesive Color Scheme: A consistent blue and gray color palette was chosen to tie the navbar, buttons, and heading together, creating a visually coherent design.

Improved Spacing and Alignment: Uniform padding and alignment for all elements make the layout feel organized, with each component fitting naturally into the overall flow of the page.

Modern Styling: Adding shadows, rounded corners, and smooth hover/focus transitions made the page feel more modern and user-friendly.

Event.Registration.-.Opera.2024-11-06.17-17-58.mp4

A clip of how it looks now.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fest-registration	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 6, 2024 11:50am

[github-actions]

🎉 Thank you for your contribution! Your pull request has been submitted successfully. A maintainer from Fest Registration team will review it as soon as possible. We appreciate your support in making this project better

[ambitiouss22]

Please a little quick