This project is built with HTML5, CSS, Tailwind, React (ES6), and Next Js. The form data will be sent to the FormSpree API for collection.

The HTML

The HTML has:

• Three pages:
  • Home
    • Nav bar
    • Header
      • Find the best (h1)
      • Info text (p)
      • Two background images at desktop size
      • Only one background image at tablet and mobile size
    • Build and manage
      • Build and manage (h2)
      • Background Image
      • Benefits cards
        • Experienced Individuals (h3)
        • Easy to Implement (h3)
        • Enhanced Productivity (h3)
      • Delivering results (h2)
        • Two background Image
        • Success stories cards
          • Quote
          • Full name (h3)
          • Position
          • Avatar
          • Background quote image
      • Ready to get started
      • Footer
  • About
    • Header
      • About (h1)
      • Info text (p)
      • Background image
    • Meet the Directors (h2)
      • Two background images
      • director card
        • Avatar
        • Full name (h3)
        • Position (p)
        • Plus or minus btn that shows/hides
          • Full name (h2)
          • Quote
          • Social icons
    • Clients
      • Background image
        • Some of our clients (h2)
        • list of clients (Image)
    • Ready to get started
    • Footer
  • Contact
    • Nav
    • Header
      • Contact (h1)
      • Ask about (h2)
      • Benefits cards
        • Quality (h3)
        • Usage (h3)
        • Innovation (h3)
    • Form
      • Name
      • Email address
      • Company name
      • Title
      • Message
      • Submit btn
    • Footer
• All pages will reuse the following components:
  • Nav
    • Logo
    • Page links
    • Contact Btn
  • Footer
    • Logo
    • Page links
    • Address
    • Social links
    • Copyright
• Other components reused across pages:
  • Ready to get started
    • Background image
    • Ready to get started (h2)
    • Contact Btn
  • Benefits cards
    • Image
    • Heading (h3)
    • Info (p)

The CSS

The CSS has:

• Modular style sheets
• Mobile first development
• Tailwind - only used for general styling like margin and padding
• Prefers light or dark mode
• Variables
• The organization of the styles.css will be(in descending order):
  • Variables
  • Resets
  • All typography
  • Media query for typography
  • General styles
  • Media query for General styles

The JavaScript

The JavaScript has:

• All forms will use FormSpree for data collection
• GetWindowWidth function to dynamically render content
• ToggleClass function to toggle a class for dynamic rendering and transitions
• Logic for mobile nav bar

Expected Behavior

All Pages

• When the "Contact us" call-to-action in the Nav bar is clicked, navigate to the Contact page

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site

Home

• When the "Contact us" call-to-action in the Ready to get started component is clicked, navigate to the Contact page

About

• When the "Contact us" call-to-action in the Ready to get started component is clicked, navigate to the Contact page
• See the correct content for each team member when the + icon is clicked
• Hide the extra content for each team member when the - icon is clicked

Contact

• Receive an error message when the contact form is submitted if:
  • The Name, Email Address or Message fields are empty should show "This field is required"
  • The Email Address is not formatted correctly should show "Please use a valid email address"

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: live site

Built with

• Semantic HTML5 - HTML5 with clear and descriptive tags for better accessibility and search engine optimization
• CSS - A utility-first CSS framework
• Mobile-first workflow
• Tailwind - A utility-first CSS framework
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• FormSpree - Form API with endpoint for submitted form data to be sent to

Author

• Frontend Mentor - @Eileenpk
• LinkedIn - @Eileenpk