Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hamzazaidix/nike-landing-page

Nike website clone using React JS and Tailwind CSS
https://github.com/hamzazaidix/nike-landing-page

Last synced: about 1 month ago
JSON representation

Nike website clone using React JS and Tailwind CSS

Awesome Lists containing this project

README

        

# Nike Landing Page with React.js and Tailwind CSS 🏃‍♂️🥾

This is a simple **Nike landing page** built using **React.js and Tailwind CSS**. The project aims to demonstrate the use of these technologies to create a responsive and visually appealing website.

## Table of Contents
- [Project Overview](#project-overview)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Screenshots](#screenshots)
- [Materials Used](#materials-used)

## Project Overview
**The Nike website clone is a simple React.js application that showcases a collection of shoes. It includes a header with a logo, navigation links, and a search bar. The main content area displays a grid of shoe cards, each with a thumbnail image and a clickable area to view a larger image. The footer contains social media icons and a copyright notice.
**
## Features
- Responsive design using Tailwind CSS
- Shoe card component with thumbnail and larger image view
- Header with logo, navigation links, and search bar
- Footer with social media icons and copyright notice

## Installation
To set up the project, follow these steps:

1. Clone the repository:
```
git clone https://github.com/HamzaZaidiX/Nike-Landing-Page.git
```

2. Navigate to the project directory:
```
cd Nike-Landing-Page
```

3. Install dependencies:
```
npm install
```

4. Start the development server:
```
npm start
```

## Usage
Once the project is set up and running, you can access the website at http://localhost:3000. The shoe cards will display the thumbnail images of the shoes. Clicking on a shoe card will open a larger image in a modal.

## Screenshots
![image](https://github.com/user-attachments/assets/0b7b6296-7a15-4fa4-b301-ef960591f416)

## Materials Used
- [React.js](https://reactjs.org/): A JavaScript library for building user interfaces
- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs
- [Font Awesome](https://fontawesome.com/): A popular icon set and toolkit

## Contributing
If you'd like to contribute to this project, please feel free to submit a pull request. I'm always open to suggestions and improvements.

## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/your-username/nike_landing_page/blob/main/LICENSE) file for more information.

## Acknowledgments
- [Tailwind CSS](https://tailwindcss.com/)
- [React.js](https://reactjs.org/)
- [Font Awesome](https://fontawesome.com/)