Valentina Restaurant Website

This frontend project is a modern restaurant website built with React.js, React Bootstrap, and SASS. It provides a fully responsive user experience with dynamic components such as a carousel header, sticky navigation bar, carousel galery, and a reservation form powered by Formik and Yup.

---

📦 Tech Stack

• React.js
• SCSS (SASS)
• React-Bootstrap
• Formik & Yup
• FontAwesome Icons

---

📦 Project Features

• 📐 Styling and Design:

  • SASS-based styling with custom fonts and colors for consistency.
  • Fully functional and responsive design tailored for various screen sizes (mobile, tablet, desktop).
  • The entire design and styling approach is uniquely crafted by me, emphasizing both aesthetics and usability.

• Header:

  • Fullscreen responsive carousel with dynamic height adjustment.
  • Styled with SASS variables for consistency.
  • Custom slide intervals and dynamic navbar height adjustment using useEffect.

• 📌Sticky Navbar:

  • Fully responsive navigation bar using React Bootstrap.
  • Collapsible design with a toggle button for smaller screens.
  • Maintains visibility during scrolling with a sticky-top feature.

• ℹ️About Section:

  • Two-column layout with a styled Learn More button.

• 👨‍🍳 Chef Section:

  • Card-based layout displaying individual chef profiles with images and titles.
  • Integrated with Font Awesome social media icons for each chef.

• 🍽️ Specialities Section:

  • Interactive Image Card Gallery with expanding card effect on click.
  • Dynamic animation and scaling with CSS Grid and useState.
  • Fully responsive with various breakpoints and flexible grid adjustments.

• 🍷 Service Section:

  • CardGroup layout showcasing four services (private dining, catering, events).

• 📅 Reservation Form:

  • Built with Formik and Yup for form handling and validation.
  • Real-time validation feedback and custom error messages.
  • Automatic form reset on successful submission.

• 📞 Contact Section:

  • Two-column layout using React Bootstrap.
  • Left-side image with a gradient overlay and right-side contact details.

---

📜 Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode.
Open http://localhost:3000 to view the app in your browser.

npm run build

Builds the app for production, creating an optimized bundle in the build/ folder.

npm test

Launches the test runner in watch mode.

npm run eject

Ejects the build configuration. Use with caution!