Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hghyhghy/nike
A nike shoe store online website ..
https://github.com/hghyhghy/nike
front-end-development javascript reactjs tailwindcss vercel-deployment web-development
Last synced: about 1 month ago
JSON representation
A nike shoe store online website ..
- Host: GitHub
- URL: https://github.com/hghyhghy/nike
- Owner: hghyhghy
- Created: 2024-07-21T19:50:50.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-21T19:55:57.000Z (5 months ago)
- Last Synced: 2024-07-21T21:33:18.721Z (5 months ago)
- Topics: front-end-development, javascript, reactjs, tailwindcss, vercel-deployment, web-development
- Language: JavaScript
- Homepage: https://nike-psi-pied.vercel.app/
- Size: 2.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets](#snippets)
6. 🔗 [Links](#links)
7. 🚀 [More](#more)
## 🚨 Tutorial
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
Master Tailwind CSS in two parts by first learning fundamentals, advanced techniques, and theming. Then, build a stunning Nike landing page, applying learned skills to create a visually impressive website.
If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.
- Tailwind CSS
- React.js
## 🔋 Features
👉 **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.
and many more, including code architecture and reusability
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 https://github.com/adrianhajdin/nike_landing_page.git
cd nike_landing_page
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm start
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🕸️ Snippets
.eslintrc.cjs
```javascript
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react/prop-types": 0
},
}
```
constants.index.js
```javascript
import { facebook, instagram, shieldTick, support, truckFast, twitter } from "../assets/icons";
import { bigShoe1, bigShoe2, bigShoe3, customer1, customer2, shoe4, shoe5, shoe6, shoe7, thumbnailShoe1, thumbnailShoe2, thumbnailShoe3 } from "../assets/images";
export const navLinks = [
{ href: "#home", label: "Home" },
{ href: "#about-us", label: "About Us" },
{ href: "#products", label: "Products" },
{ href: "#contact-us", label: "Contact Us" },
];
export const shoes = [
{
thumbnail: thumbnailShoe1,
bigShoe: bigShoe1,
},
{
thumbnail: thumbnailShoe2,
bigShoe: bigShoe2,
},
{
thumbnail: thumbnailShoe3,
bigShoe: bigShoe3,
},
];
export const statistics = [
{ value: '1k+', label: 'Brands' },
{ value: '500+', label: 'Shops' },
{ value: '250k+', label: 'Customers' },
];
export const products = [
{
imgURL: shoe4,
name: "Nike Air Jordan-01",
price: "$200.20",
},
{
imgURL: shoe5,
name: "Nike Air Jordan-10",
price: "$210.20",
},
{
imgURL: shoe6,
name: "Nike Air Jordan-100",
price: "$220.20",
},
{
imgURL: shoe7,
name: "Nike Air Jordan-001",
price: "$230.20",
},
];
export const services = [
{
imgURL: truckFast,
label: "Free shipping",
subtext: "Enjoy seamless shopping with our complimentary shipping service."
},
{
imgURL: shieldTick,
label: "Secure Payment",
subtext: "Experience worry-free transactions with our secure payment options."
},
{
imgURL: support,
label: "Love to help you",
subtext: "Our dedicated team is here to assist you every step of the way."
},
];
export const reviews = [
{
imgURL: customer1,
customerName: 'Morich Brown',
rating: 4.5,
feedback: "The attention to detail and the quality of the product exceeded my expectations. Highly recommended!"
},
{
imgURL: customer2,
customerName: 'Lota Mongeskar',
rating: 4.5,
feedback: "The product not only met but exceeded my expectations. I'll definitely be a returning customer!"
}
];
export const footerLinks = [
{
title: "Products",
links: [
{ name: "Air Force 1", link: "/" },
{ name: "Air Max 1", link: "/" },
{ name: "Air Jordan 1", link: "/" },
{ name: "Air Force 2", link: "/" },
{ name: "Nike Waffle Racer", link: "/" },
{ name: "Nike Cortez", link: "/" },
],
},
{
title: "Help",
links: [
{ name: "About us", link: "/" },
{ name: "FAQs", link: "/" },
{ name: "How it works", link: "/" },
{ name: "Privacy policy", link: "/" },
{ name: "Payment policy", link: "/" },
],
},
{
title: "Get in touch",
links: [
{ name: "[email protected]", link: "mailto:[email protected]" },
{ name: "+92554862354", link: "tel:+92554862354" },
],
},
];
export const socialMedia = [
{ src: facebook, alt: "facebook logo" },
{ src: twitter, alt: "twitter logo" },
{ src: instagram, alt: "instagram logo" },
];
```
index.css
```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Palanquin:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Palanquin:wght@100;200;300;400;500;600;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
@layer components {
.max-container {
max-width: 1440px;
margin: 0 auto;
}
.input {
@apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
}
}
@layer utilities {
.padding {
@apply sm:px-16 px-8 sm:py-24 py-12;
}
.padding-x {
@apply sm:px-16 px-8;
}
.padding-y {
@apply sm:py-24 py-12;
}
.padding-l {
@apply sm:pl-16 pl-8;
}
.padding-r {
@apply sm:pr-16 pr-8;
}
.padding-t {
@apply sm:pt-24 pt-12;
}
.padding-b {
@apply sm:pb-24 pb-12;
}
.info-text {
@apply font-montserrat text-slate-gray text-lg leading-7;
}
}
```
script.js
```javascript
// To showcase the demo of dark theme. Copy paste :)
document.addEventListener("DOMContentLoaded", () => {
const toggleDark = document.getElementById('toggleDark')
toggleDark.addEventListener('click', function() {
if(document.documentElement.classList.includes('dark')) {
document.documentElement.classList.remove('dark')
}
else {
document.documentElement.classList.add('dark')
}
alert("click!")
});
});
```
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
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"
}
},
},
plugins: [],
}
```
## 🔗 Links
- Assets used in the project are [here](https://drive.google.com/file/d/1ccqjc8gJ7CLvXT_vUhVT4Gmys-Ze13FK/view)
- [Tailwind Play](https://play.tailwindcss.com/)