Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/R1shA3h/nike_landing_page.git
cd nike_landing_page
Installation
Install the project dependencies using npm:
npm install
Running the Project
npm start
Open http://localhost:5173 in your browser to view the project.
.eslintrc.cjs
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
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
@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
// To showcase the demo of dark theme. Copy paste :)
<script type="text/javascript">
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!")
});
});
</script>
tailwind.config.js
/** @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: [],
}
- Assets used in the project are here
- Tailwind Play