-
-
Save adrianhajdin/ae10e2dd6ee5d51fc5b31437f73cf014 to your computer and use it in GitHub Desktop.
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 | |
}, | |
} |
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: "customer@nike.com", link: "mailto:customer@nike.com" }, | |
{ name: "+92554862354", link: "tel:+92554862354" }, | |
], | |
}, | |
]; | |
export const socialMedia = [ | |
{ src: facebook, alt: "facebook logo" }, | |
{ src: twitter, alt: "twitter logo" }, | |
{ src: instagram, alt: "instagram logo" }, | |
]; |
@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; | |
} | |
} |
// 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> |
/** @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: [], | |
} |
Hi guys, i want a multiplication icon just same as we used for the hamburger for my responsive navigation. Help me out......Thanks in advance
Hi guys, i want a multiplication icon just same as we used for the hamburger for my responsive navigation. Help me out......Thanks in advance
https://github.com/shubhamxdd/nike_landing_page/blob/master/public/icons/nav_cross.svg
Hi guys, i want a multiplication icon just same as we used for the hamburger for my responsive navigation. Help me out......Thanks in advance
https://github.com/shubhamxdd/nike_landing_page/blob/master/public/icons/nav_cross.svg
Thank you
Is there a chance you have autoformat on save / copy&paste active? If so, try to deactivate it and c&p the index.css again. I had the same error and realized the auto format did break it.
hi, i have question can you help me out? The
sm:
class does not exist. Ifsm:
is a custom class, make sure it is defined within a@layer
directive. how can i fix this?
I solved it by deleting and recreating index.css file
@adrianhajdin , just a heads up, for the video, the errors "Unknown at rule @tailwind" errors can be fixed by adding the following to VSCode's settings.json:
{
"files.associations": {
"*.css": "tailwindcss"
}
}
Here is a link to your video where you start mentioning it:
https://youtu.be/tS7upsfuxmo?si=_EMjhVQFYeMkbCmM&t=3122
I love your videos, but my original language is portuguese and sometimes i dont get it somethings but i learn somuch .. please can you make some videos in portuguese rsrs. Please.
thanks a lot
I just start, but let me tell you that you're the best ever.
In the tailwind.config.js, it adds a new screen as following:
screens: {
"wide": "1440px"
}
When I print the config in use, it is
screens {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
wide: '1440px'
}
Just as it states in https://tailwindcss.com/docs/screens#configuring-custom-screens, tailwind does not sort the screen. So, I change it to
const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
screens: {
sm: defaultScreens.sm,
md:defaultScreens.md,
lg:defaultScreens.lg,
xl:defaultScreens.xl,
"wide": "1440px",
"2xl":defaultScreens["2xl"],
},
extend: {
fontFamily: {
// add the css variable and include fallback fonts from tailwind default theme
palanquin: ["var(--font-palanquin)"],
montserrat: ["var(--font-montserrat)"],
},
// screens: {
// "wide": "1440px"
// },
colors: {
primary: "#ECEEFF",
"coral-red": "#FF6452",
"slate-gray": "#6D6D6D",
"pale-blue": "#F5F6FF",
"white-400": "rgba(255, 255, 255, 0.80)",
},
},
},
plugins: [],
};
Can I have your opinion?
As for max-sm or similiar max-XXX, there are no corresponding definitions. Could you add them in?
You are the king Big Bro, Big hug from canada
I just started Tailwind and I am understanding it so well, so happy I found you @adrianhajdin such a legend ❤️
You are a legend bro, happy to come in contact with your contents… so powerful👍
hi i am ahmed
hi threr
hi
hi there i got
Hello, World!
I can't thank you enough