vedgge/ejam-challenge

Clarifion Air Ionizer Upsell Page

This project is a web page that recreates a UI/UX design created in Figma for the Clarifion Air Ionizer product. The goal is to create a pixel-perfect implementation of the design, following the provided instructions.

Table of Contents

• Description
• Technologies Used
• Challenge Implementation
• Setup and Usage

Description

The Clarifion Air Ionizer Upsell Page is a landing page that showcases the Clarifion Air Ionizer product and offers a special discount for purchasing additional units. The page features an attractive layout with product images, customer reviews, and a call-to-action section encouraging users to claim the discount.

Technologies Used

• HTML5: The structure and content of the page are built using HTML5.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework used for styling the page. It provides a set of low-level utility classes that can be composed to build complex components and layouts.
• React & Next.js: React is a JavaScript library for building user interfaces, and Next.js is a React framework for server-side rendering, static site generation, and more. The project is built using React and Next.js for improved performance and developer experience.
• React Icons: React Icons is a library that provides a set of popular icons as React components, which are used throughout the project for various icons and symbols.

Challenge Implementation

The challenge for this project was to recreate the provided Figma design as accurately as possible while ensuring a responsive and functional implementation. To achieve this, the following steps were taken:

1. Design Analysis: The Figma design was thoroughly analyzed to understand the layout, typography, color scheme, and overall aesthetic.
2. Component Breakdown: The design was broken down into individual components and sections, making it easier to manage and develop.
3. Responsive Approach: A mobile-first approach was adopted, ensuring the page was optimized for smaller screens before scaling up to larger displays.
4. Tailwind CSS Integration: Tailwind CSS was integrated into the project to streamline the styling process and leverage its utility classes for efficient CSS development.
5. Pixel-Perfect Implementation: Careful attention was paid to ensuring that the final implementation matched the Figma design as closely as possible, achieving a pixel-perfect result.

Setup and Usage

To view the Clarifion Air Ionizer Upsell Page, you can visit the following public URL: Ejam Challenge

Alternatively, you can clone the repository and run the project locally:

1. Clone the repository: git clone https://github.com/Vedgge/ejam-challenge.git
2. Navigate to the project directory: cd ejam-challenge
3. Install dependencies: npm install
4. Start the development server: npm run dev
5. Open your browser and visit http://localhost:3000 to see the page.

Feel free to explore the page and test the responsiveness across different devices and screen sizes.