marcoaccardi / dine-restaurant-landingpage

Dine Restaurant Landing page

A landing page for a restaurant build from a figma file.

Layout

DESKTOP

TABLET

MOBILE

DESIGN ELEMENTS

Links

• GitHub
• Website Live

User stories

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• See the correct content for the Family Gatherings, Special Events, and Social Events section when the user clicks each tab
• Receive an error message when the booking form is submitted if:
  • The Name or Email Address fields are empty. Alert shown would be "This field is required"
  • The Email Address is not formatted correctly. Alert shown would be "Please use a valid email address"
  • Any of the Pick a date or Pick a time fields are empty. Alert shown would be "This field is incomplete"
  • The Pick a time fields are between 12am - 8am. Alert shown would be "Invalid time"
• Receive a message for correctly completing the form. Alert shown would be "Success! Your request has been submitted"

Tools

• React
• React-Router-Dom
• Sass
• Mobile-first workflow

How to run the app

git clone https://github.com/marcoaccardi/dine-restaurant-landingpage.git
npm install
npm start