https://github.com/clementmadiot/nike_web_design

build a stunning Nike landing page with Reactjs and TailwindCSS, applying learned skills to create a visually impressive website.
https://github.com/clementmadiot/nike_web_design

Last synced: 12 days ago
JSON representation

build a stunning Nike landing page with Reactjs and TailwindCSS, applying learned skills to create a visually impressive website.

• Host: GitHub
• URL: https://github.com/clementmadiot/nike_web_design
• Owner: ClementMadiot
• Created: 2024-09-09T15:03:02.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T15:45:24.000Z (4 months ago)
• Last Synced: 2024-09-09T19:27:44.170Z (4 months ago)
• Language: JavaScript
• Size: 2.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  
Nike - Web Design



## 
 📋 Summary

- ✨ [Introduction](#introduction)

- 🛠 [Technology Used](#tech-stack)

- 🚀 [Launch App](#launch-app)

- 🎨 [Styling](#style)

## 
 ✨ Introduction

**[ENG]** This project is inspired by Nike's design. I've developed an immersive web application. Thanks to tools like React, Tailwind CSS, Framer Motion, and Swiper, it's a dynamic and responsive website that captivates users and showcases a range of products.

**[FR]** Ce projet s'inspire du design Nike. J'ai créé une application web immersive et dynamique, grâce à React, Tailwind CSS, Framer Motion et Swiper. Elle offre une expérience utilisateur unique et met en valeur une gamme de produits.

## 
 🛠 Technology Used

- [TailwindCSS](https://tailwindcss.com/docs/installation)

Tailwind CSS is a valuable tool for developers who want to build modern, responsive, and visually appealing websites without sacrificing development speed.

- [react-icon](https://www.npmjs.com/package/react-icons)

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

- [framer-motion](https://www.npmjs.com/package/framer-motion)

Framer Motion is an open source, production-ready library that’s designed for all creative developers.

- [react-tilt](https://www.npmjs.com/package/react-tilt?activeTab=readme)

A tiny request Animation Frame powered 60 fps light weight parallax hover tilt effect for ReactJS.

- [Swiper](https://swiperjs.com/react)

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

## 
 🚀 Launch App


**Cloning the Repository**

```bash

git clone {git remote URL}

```


**installation**

> After cloning the repository, run the command `npm install` to install the project's dependencies.

> Once the dependencies are installed, start the project with the command `npm run dev`.

## 
 🎨 Styling

Global styling are defined using TailwindCSS in the tailwind.config.js file.

````

  theme: {

    fontSize: {

      xs: ['12px', '16px'],

      sm: ['14px', '20px'],

      base: ['16px', '19.5px'],

      lg: ['18px', '21.94px'],

      xl: ['20px', '24.38px'],

      '2xl': ['24px', '29.26px'],

      '3xl': ['28px', '50px'],

      '4xl': ['48px', '58px'],

      '8xl': ['96px', '106px']

    },

    extend: {

      fontFamily: {

        palanquin: ['Palanquin', 'sans-serif'],

        montserrat: ['Montserrat', 'sans-serif'],

      },

      colors: {

        'primary': "#ECEEFF",

        "coral-red": "#FF6452",

        "slate-gray": "#6D6D6D",

        "pale-blue": "#F5F6FF",

        "white-400": "rgba(255, 255, 255, 0.80)"

      },

      boxShadow: {

        '3xl': '0 10px 40px rgba(0, 0, 0, 0.1)'

      },

      backgroundImage: {

        'hero': "url('assets/images/collection-background.svg')",

        'card': "url('assets/images/thumbnail-background.svg')",

      },

      screens: {

        "wide": "1440px"

      }

    },

  },