Responsive Pricing Page

You can find a hosted version of this repo here

The purpose of this project was to create a responsive pricing page with 3 different plans, that adjusts well to different screen sizes and has different styling based on the card you are hovering over. I was also asked to include a dark/light mode toggle of my own design. I chose a sun and moon from React Icons to visualise this to the user, with a button that stays at the bottom right for easy access.

This README provides instructions on how to set up and run the React application on your local machine, including how to run Storybook.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

• Node.js (v14.x or later)
• npm (v6.x or later) or yarn (v1.x or later)

Setup

1. Clone the repository:

git clone https://github.com/emilyb93/price-page.git
cd price-page

2. Install dependencies:

Using npm:

npm install

Or using yarn:

yarn install

Running the Application

To start the React application locally, use the following command:

Using npm:

npm run dev

Or using yarn:

yarn dev

The application will be available at http://localhost:5174.

Running Storybook

Storybook is a tool for developing UI components in isolation. To run Storybook, use the following command:

Using npm:

npm run storybook

Or using yarn:

yarn storybook

Storybook will be available at http://localhost:6006.

Additional Scripts

• Build the application:

  Using npm:

  npm run build

  Or using yarn:

  yarn build

Contributing

If you would like to contribute to this project, please fork the repository and create a pull request with your changes.