Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basedhound/nike_ui_react
Modern Nike landing page built with React and Tailwind CSS, featuring popular products showcase, special offers, and more. Tailwind CSS best practices, all in a fully responsive design.
https://github.com/basedhound/nike_ui_react
design landing landing-page react react18 responsive tailwind ui vite
Last synced: 18 days ago
JSON representation
Modern Nike landing page built with React and Tailwind CSS, featuring popular products showcase, special offers, and more. Tailwind CSS best practices, all in a fully responsive design.
- Host: GitHub
- URL: https://github.com/basedhound/nike_ui_react
- Owner: basedhound
- Created: 2024-01-03T14:50:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-06T12:14:35.000Z (6 months ago)
- Last Synced: 2024-11-09T03:24:01.217Z (2 months ago)
- Topics: design, landing, landing-page, react, react18, responsive, tailwind, ui, vite
- Language: JavaScript
- Homepage: https://nike-fv.netlify.app
- Size: 6.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##
📋 Table of Contents- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- đź“ť [Features](#features)
- 🚀 [Quick Start](#quick-start)**[EN]** Modern Nike landing page designed with React and Tailwind CSS, featuring a visually appealing hero section, popular products showcase, unique "About Us" section, special offers display, testimonials, and a newsletter integration. This project maximizes Tailwind CSS with best practices, theming techniques, and JavaScript-like tasks. The entire site is mobile-responsive, highlighting Tailwind's flexibility and design capabilities.
**[FR]** Page d'accueil moderne pour Nike, conçue avec React et Tailwind CSS. Ce projet comprend une section héro captivante, une présentation des produits populaires, une section "À propos" originale, des offres spéciales, des témoignages, et une intégration de la newsletter. Il optimise l'utilisation de Tailwind CSS avec des bonnes pratiques, des techniques de thématisation et des effets interactifs habituellement réalisés avec JavaScript. Le site est entièrement responsive, mettant en valeur la flexibilité et les capacités de design de Tailwind.
- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. Its virtual DOM enhances performance by minimizing direct interactions with the browser's DOM.
- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.
- [**Vite**](https://vitejs.dev/guide/) is a modern frontend build tool known for fast ES Module imports, efficient bundling, and quick development server startup times. It supports frameworks like Vue.js and React, optimizing workflow and performance compared to traditional bundlers.
👉 **Maximizing Tailwind CSS**: Discover tips and tricks to make the most out of Tailwind CSS.
👉 **Understanding Tailwind Internals**: Dive into the inner workings of Tailwind, gaining insights into its structure and optimizations.
👉 **Best Practices**: Learn Tailwind's best practices for efficient and maintainable code.
👉 **Theming**:Explore techniques to add different themes to your website using Tailwind CSS.
👉 **JavaScript-like Tasks with Tailwind**: Discover how Tailwind CSS can be used to achieve tasks that typically require JavaScript code
while building a beautiful Nike Website with a,
👉 **Complex Hero Section**: A visually appealing hero section showcasing key elements.
👉 **Popular Products Showcase**: A section highlighting popular Nike products
👉 **About Us Section**: An informative "About Us" section with a unique design.
👉 **Special Offers**: Showcase special offers in an eye-catching manner
👉 **Testimonials**: A testimonials section for a captivating user experience
👉 **Newsletter Integration**: A newsletter section with Tailwind styling, encouraging user engagement
👉 **Footer**: A comprehensive footer section containing various links
👉 **Mobile Responsive**: The entire website is responsive across various devices, emphasizing Tailwind's mobile-friendly capabilities.
Follow these steps to set up the project locally on your machine.
**Prerequisites**Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**```bash
git clone {git remote URL}
```
**Installation**Let's install the project dependencies, from your terminal, run:
```bash
npm install
# or
yarn install
```
**Running the Project**Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
npm run dev
# or
yarn dev
```Open [`http://localhost:5173`](http://localhost:5173) in your browser to view the project.