Frontend Mentor - Manage landing page solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments
• License

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 URL: managing landing page Repository
• Live Site URL: Live site URL

My process

Built with

• Tailwind CSS
• React.js
• Vite
• Mobile-first workflow
• React - JS library
• TailwindCSS - For styles
• Vite - Build Tool

What I learned

While building this project I have learned to enforce the mobile first approach to build a responsive site,How to align svg illustration and I have built a custom carousel slider with Tailiwind and React.

Code I am Proud of

Below is snapshot of the code I implmented the Carousal slider for the testimonials,

<div className="flex flex-col items-center mt-8">
  <div className="flex ">
    // Carousal Card section
  </div>
  // below section of code is the button I have written  to handle slider and select the specific testimonial card to show
  <div className="flex my-2">
    {slides.map((_, index) => (
      <button
        key={index}
        onClick={() => setCurrentSlide(index)}
        className={`w-2 h-2 mx-1 border rounded-full border-primary-bright-red ${
          index === currentSlide ? "bg-primary-bright-red" : "opacity-50"
        } focus:outline-none`}
      ></button>
    ))}
  </div>
</div>

Continued development

In the future I want to refactor and find a better way of implementing the illustraters and I would like to refine and use the skills I have practiced by building the carousel slides for future projects.

Useful resources

• tailwind documentations - I have refered to the tailwindCSS documentation for some features such as handling SVG fills and adding and proper position of backgound illustrations.

Author

• Website - Feven Seyfu
• Frontend Mentor - @FevenSeyfu
• Twitter - @FevenSeyfu
• Linkedin - Feven Seyfu

Acknowledgments

I would like to thank all who have reviewed my solution and given me feedback.

License

This project is licensed under the MIT License.