Bookmark Landing Page

Bookmark Landing Page

This is a landing page that utilizes various libraries for its creation. Similar to other websites, this landing page has a hero section, a content section, multiple call-to-actions, a form, and a footer.

In addition, this is one of my earliest projects where I incorporated Cypress, an end-to-end(E2E) testing framework, into my workflow.

This project is the solution to one of the Frontend Mentor challenges.

Components

For the content section, three various components are used:

• accordion
• tabs
• list of cards

These components are created with the shadcn/ui component collection.

Form

The form section is created with the React Hook Form library. Input validation is provided through this library.

The Challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly