siavhnz / manage-landing-page

This is a solution to the Manage landing page challenge on Frontend Mentor

Frontend Mentor - Manage landing page solution

This is a solution to the Manage landing page challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Work time
  • Built with
  • Useful resources
• Author
• Acknowledgments

Overview

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
• See all testimonials in a horizontal slider
• Receive an error message when the newsletter sign up form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Solution: frontendmentor.io

• Live Site: cloudflare

My process

• Prepare Project (Download assets, Install Vite, Install TailwindCss, Initialize git, ...)
• Create manage landign page
  • 1.Identify a component
  • 2.Create component(Html, css, functionalilty)
  • 3.Go to step 1
  • Header, Menu(Menu, DesktopMenu, MobileMenu), Logo, Layout, Intro, Benefits, Testimonials, Simplify, Footer(Footer, NewsletterForm, FooterMenu), ManagePage
• Prepare and Publish(Write README.md, Push to github, Make it live on Cloudflare, Publish to frontendmentor, ...)

Work Time

• My Clockify Report

Built with

• React
• TailwindCss
• Framer Motion
• Swiper

Useful resources

• React Carousel

• Swiperjs Examples

• Accessible Form Validation for Screen Readers

Author

• Frontend Mentor - @siavhnz

• github - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension