muayjtp/awwwards_series
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-18 18:48:18 -05:00
parent 8658db0507
commit 8b04727f0f
25 changed files with 5920 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
awwwards_ss4/.eslintrc.cjs Normal file
View file

@ -0,0 +1,21 @@
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/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
awwwards_ss4/.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

2
awwwards_ss4/README.md Normal file
View file

@ -0,0 +1,2 @@
# In this project, we recreate the design of kit: | Modern formulas for all skinkind (https://kitskinkind.com.au/) by using Vite + React.
#### Start project --> npm run dev

14
awwwards_ss4/index.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awwwards | kit:</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

5459
awwwards_ss4/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

33
awwwards_ss4/package.json Normal file
View file

@ -0,0 +1,33 @@
{
"name": "awwwards_ss4",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^11.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.1.0",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"
}
}

6
awwwards_ss4/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

1
awwwards_ss4/public/vite.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
awwwards_ss4/src/App.jsx Normal file
View file

@ -0,0 +1,15 @@
import Home from "./components/Home"
import Shop from "./components/Shop"
function App() {
return (
<>
<Home/>
<Shop/>
</>
)
}
export default App

BIN
awwwards_ss4/src/assets/bg-1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 799 KiB

BIN
awwwards_ss4/src/assets/bg-2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
awwwards_ss4/src/assets/bg-3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 717 KiB

BIN
awwwards_ss4/src/assets/slide-1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
awwwards_ss4/src/assets/slide-2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
awwwards_ss4/src/assets/slide-3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
awwwards_ss4/src/assets/slide-4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
awwwards_ss4/src/assets/slide-5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 548 KiB

BIN
awwwards_ss4/src/assets/slide-6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 774 KiB

144
awwwards_ss4/src/components/Home.jsx Normal file
View file

@ -0,0 +1,144 @@
import Navbar from "./Navbar";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import {motion} from "framer-motion"
import { AiOutlineShopping, AiOutlineSearch } from "react-icons/ai";
import { RiMenu2Fill } from "react-icons/ri";
import Img1 from "../assets/bg-1.webp"
import Img2 from "../assets/bg-2.webp"
import Img3 from "../assets/bg-3.webp"
const Home = () => {
const homeSlide = {
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
speed: 1000,
autoplaySpeed: 2000,
};
const textAnimation = {
initial:{x: 0,},
animate:{x: "-100%", transition:{ease: "linear", repeat: Infinity, duration: 20},},
};
return (
<>
<div className="w-full h-screen overflow-hidden">
<div className="w-full bg-[#C20019] absolute z-50">
<motion.p className="text-white text-end" variants={textAnimation } initial="initial" animate="animate">Free shipping on all orders over $50.</motion.p>
</div>
<div className="w-full flex justify-between absolute z-50 px-5 md:px-10 py-10 md:py-14">
<div className='flex flex-col'>
<p className='bg-[#C20019] w-10 h-10 rounded-full mb-5'></p>
<p className='bg-[#C20019] w-10 h-10 rounded-full'></p>
</div>
<Navbar/>
<div className='flex flex-col'>
<p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineShopping className="text-xl"/></p>
<p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineSearch className="text-xl"/></p>
<p className='icon-hidden bg-[#FBF8F4] w-10 h-10 rounded-full justify-center items-center cursor-pointer '><RiMenu2Fill className="text-xl"/></p>
</div>
</div>
<Slider {...homeSlide}>
<div >
<div className="flex flex-col lg:grid lg:grid-cols-2 bottom-0 absolute">
<div className="w-[100vw] lg:flex lg:justify-between gap-10 px-5 md:px-10 items-end bottom-0">
<svg aria-label="Kit:" className="logo--full w-[100vw] md:w-[70vw] lg:w-[55vw] mb-[2vw] pr-10" viewBox="0 0 833 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M736.903 325.809C736.903 316.28 739.721 306.964 745 299.04C750.28 291.116 757.784 284.941 766.564 281.294C775.344 277.647 785.005 276.693 794.325 278.552C803.646
280.411 812.207 285 818.927 291.739C825.647 298.477 830.223 307.063 832.077 316.41C833.931 325.757 832.979 335.445 829.343 344.249C825.706 353.053 819.547 360.578 811.646
365.873C803.744 371.167 794.455 373.994 784.952 373.994C778.614 374.096 772.319 372.919 766.444 370.534C760.568 368.149 755.23 364.604 750.748 360.109C746.266 355.614
742.731 350.262 740.352 344.369C737.974 338.477 736.801 332.165 736.903 325.809ZM736.903 172.343C736.903 162.813 739.721 153.497 745 145.574C750.28 137.65 757.784 131.473
766.564 127.826C775.344 124.179 785.005 123.225 794.325 125.085C803.646 126.944 812.207 131.533 818.927 138.271C825.647 145.01 830.223 153.596 832.077 162.942C833.931
172.289 832.979 181.977 829.343 190.781C825.706 199.586 819.547 207.112 811.646 212.406C803.744 217.701 794.455 220.526 784.952 220.526C778.614 220.629 772.319 219.453
766.444 217.068C760.568 214.683 755.23 211.137 750.748 206.643C746.266 202.148 742.731 196.795 740.352 190.903C737.974 185.011 736.801 178.699 736.903 172.343ZM630.401
298.304C630.401 318.412 638.724 329.225 656.885 329.225C675.045 329.225 683.369 318.412 683.369 287.491H719.688C719.688 350.376 689.233 373.994 629.456 373.994C560.22
373.994 539.128 341.555 539.128 297.261V162.953H490.134V126.056C545.56 126.056 574.502 84.2276 574.502 25.7052H630.401V126.056H705.501V162.953H630.401V298.304ZM376.727
48.3733C376.708 38.8207 379.516 29.4773 384.795 21.5254C390.074 13.5736 397.586 7.3715 406.382 3.70286C415.177 0.0342193 424.86 -0.936165 434.205 0.915951C443.55 2.76807
452.137 7.35908 458.88 14.1072C465.622 20.8553 470.216 29.4581 472.082 38.8258C473.947 48.1935 472.999 57.9047 469.358 66.732C465.717 75.5593 459.546 83.1056 451.627
88.4148C443.708 93.7239 434.397 96.5578 424.871 96.5578C418.525 96.6732 412.221 95.5066 406.334 93.1272C400.447 90.7478 395.098 87.204 390.605 82.7078C386.113 78.2116
382.569 72.8552 380.185 66.9566C377.801 61.0579 376.625 54.7373 376.727 48.3733ZM469.514 305.133C469.514 326.284 475.851 335.201 507.348 335.201V372.096H340.502V335.201C371.904
335.201 378.336 326.284 378.336 305.133V162.858H335.678V125.961H469.609L469.514 305.133ZM274.766 162.858L228.136 204.687L288.007 311.962C297.466 329.129 302.195 333.113 321.774
334.536V372.476H172.71V334.536C186.425 334.536 193.802 329.129 193.802 321.257C193.802 316.894 192.762 314.428 186.898 303.615L164.292 261.786L128.539 293.75V305.038C128.539
326.189 136.39 334.536 154.077 334.536V372.476H0V335.579C31.4018 335.579 37.8336 326.664 37.8336 305.512V62.9806H0V26.0838H129.012V244.239L219.245
163.521H171.197V126.625H316.951V163.521L274.766 162.858Z" fill="#C20019"></path>
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">MODERN FORMULAS FOR ALL SKINKIND.</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
</div>
</div>
</div>
<img src={Img1} alt="" className="w-full h-screen object-cover"/>
</div>
<div>
<div className="flex flex-col lg:grid lg:grid-cols-2 bottom-0 absolute">
<div className="w-[100vw] lg:flex lg:justify-between gap-10 px-5 md:px-10 items-end bottom-0">
<svg aria-label="Kit:" className="logo--full w-[100vw] md:w-[70vw] lg:w-[55vw] mb-[2vw] pr-10" viewBox="0 0 833 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M736.903 325.809C736.903 316.28 739.721 306.964 745 299.04C750.28 291.116 757.784 284.941 766.564 281.294C775.344 277.647 785.005 276.693 794.325 278.552C803.646
280.411 812.207 285 818.927 291.739C825.647 298.477 830.223 307.063 832.077 316.41C833.931 325.757 832.979 335.445 829.343 344.249C825.706 353.053 819.547 360.578 811.646
365.873C803.744 371.167 794.455 373.994 784.952 373.994C778.614 374.096 772.319 372.919 766.444 370.534C760.568 368.149 755.23 364.604 750.748 360.109C746.266 355.614
742.731 350.262 740.352 344.369C737.974 338.477 736.801 332.165 736.903 325.809ZM736.903 172.343C736.903 162.813 739.721 153.497 745 145.574C750.28 137.65 757.784 131.473
766.564 127.826C775.344 124.179 785.005 123.225 794.325 125.085C803.646 126.944 812.207 131.533 818.927 138.271C825.647 145.01 830.223 153.596 832.077 162.942C833.931
172.289 832.979 181.977 829.343 190.781C825.706 199.586 819.547 207.112 811.646 212.406C803.744 217.701 794.455 220.526 784.952 220.526C778.614 220.629 772.319 219.453
766.444 217.068C760.568 214.683 755.23 211.137 750.748 206.643C746.266 202.148 742.731 196.795 740.352 190.903C737.974 185.011 736.801 178.699 736.903 172.343ZM630.401
298.304C630.401 318.412 638.724 329.225 656.885 329.225C675.045 329.225 683.369 318.412 683.369 287.491H719.688C719.688 350.376 689.233 373.994 629.456 373.994C560.22
373.994 539.128 341.555 539.128 297.261V162.953H490.134V126.056C545.56 126.056 574.502 84.2276 574.502 25.7052H630.401V126.056H705.501V162.953H630.401V298.304ZM376.727
48.3733C376.708 38.8207 379.516 29.4773 384.795 21.5254C390.074 13.5736 397.586 7.3715 406.382 3.70286C415.177 0.0342193 424.86 -0.936165 434.205 0.915951C443.55 2.76807
452.137 7.35908 458.88 14.1072C465.622 20.8553 470.216 29.4581 472.082 38.8258C473.947 48.1935 472.999 57.9047 469.358 66.732C465.717 75.5593 459.546 83.1056 451.627
88.4148C443.708 93.7239 434.397 96.5578 424.871 96.5578C418.525 96.6732 412.221 95.5066 406.334 93.1272C400.447 90.7478 395.098 87.204 390.605 82.7078C386.113 78.2116
382.569 72.8552 380.185 66.9566C377.801 61.0579 376.625 54.7373 376.727 48.3733ZM469.514 305.133C469.514 326.284 475.851 335.201 507.348 335.201V372.096H340.502V335.201C371.904
335.201 378.336 326.284 378.336 305.133V162.858H335.678V125.961H469.609L469.514 305.133ZM274.766 162.858L228.136 204.687L288.007 311.962C297.466 329.129 302.195 333.113 321.774
334.536V372.476H172.71V334.536C186.425 334.536 193.802 329.129 193.802 321.257C193.802 316.894 192.762 314.428 186.898 303.615L164.292 261.786L128.539 293.75V305.038C128.539
326.189 136.39 334.536 154.077 334.536V372.476H0V335.579C31.4018 335.579 37.8336 326.664 37.8336 305.512V62.9806H0V26.0838H129.012V244.239L219.245
163.521H171.197V126.625H316.951V163.521L274.766 162.858Z" fill="#C20019"></path>
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">NEW IN: A REMEDY FOR BUSY, OVERWORKED BODIES.</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop gua sha body tool</button>
</div>
</div>
</div>
<img src={Img2} alt="" className="w-full h-screen object-cover"/>
</div>
<div>
<div className="flex flex-col lg:grid lg:grid-cols-2 bottom-0 absolute">
<div className="w-[100vw] lg:flex lg:justify-between gap-10 px-5 md:px-10 items-end bottom-0">
<svg aria-label="Kit:" className="logo--full w-[100vw] md:w-[70vw] lg:w-[55vw] mb-[2vw] pr-10" viewBox="0 0 833 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M736.903 325.809C736.903 316.28 739.721 306.964 745 299.04C750.28 291.116 757.784 284.941 766.564 281.294C775.344 277.647 785.005 276.693 794.325 278.552C803.646
280.411 812.207 285 818.927 291.739C825.647 298.477 830.223 307.063 832.077 316.41C833.931 325.757 832.979 335.445 829.343 344.249C825.706 353.053 819.547 360.578 811.646
365.873C803.744 371.167 794.455 373.994 784.952 373.994C778.614 374.096 772.319 372.919 766.444 370.534C760.568 368.149 755.23 364.604 750.748 360.109C746.266 355.614
742.731 350.262 740.352 344.369C737.974 338.477 736.801 332.165 736.903 325.809ZM736.903 172.343C736.903 162.813 739.721 153.497 745 145.574C750.28 137.65 757.784 131.473
766.564 127.826C775.344 124.179 785.005 123.225 794.325 125.085C803.646 126.944 812.207 131.533 818.927 138.271C825.647 145.01 830.223 153.596 832.077 162.942C833.931
172.289 832.979 181.977 829.343 190.781C825.706 199.586 819.547 207.112 811.646 212.406C803.744 217.701 794.455 220.526 784.952 220.526C778.614 220.629 772.319 219.453
766.444 217.068C760.568 214.683 755.23 211.137 750.748 206.643C746.266 202.148 742.731 196.795 740.352 190.903C737.974 185.011 736.801 178.699 736.903 172.343ZM630.401
298.304C630.401 318.412 638.724 329.225 656.885 329.225C675.045 329.225 683.369 318.412 683.369 287.491H719.688C719.688 350.376 689.233 373.994 629.456 373.994C560.22
373.994 539.128 341.555 539.128 297.261V162.953H490.134V126.056C545.56 126.056 574.502 84.2276 574.502 25.7052H630.401V126.056H705.501V162.953H630.401V298.304ZM376.727
48.3733C376.708 38.8207 379.516 29.4773 384.795 21.5254C390.074 13.5736 397.586 7.3715 406.382 3.70286C415.177 0.0342193 424.86 -0.936165 434.205 0.915951C443.55 2.76807
452.137 7.35908 458.88 14.1072C465.622 20.8553 470.216 29.4581 472.082 38.8258C473.947 48.1935 472.999 57.9047 469.358 66.732C465.717 75.5593 459.546 83.1056 451.627
88.4148C443.708 93.7239 434.397 96.5578 424.871 96.5578C418.525 96.6732 412.221 95.5066 406.334 93.1272C400.447 90.7478 395.098 87.204 390.605 82.7078C386.113 78.2116
382.569 72.8552 380.185 66.9566C377.801 61.0579 376.625 54.7373 376.727 48.3733ZM469.514 305.133C469.514 326.284 475.851 335.201 507.348 335.201V372.096H340.502V335.201C371.904
335.201 378.336 326.284 378.336 305.133V162.858H335.678V125.961H469.609L469.514 305.133ZM274.766 162.858L228.136 204.687L288.007 311.962C297.466 329.129 302.195 333.113 321.774
334.536V372.476H172.71V334.536C186.425 334.536 193.802 329.129 193.802 321.257C193.802 316.894 192.762 314.428 186.898 303.615L164.292 261.786L128.539 293.75V305.038C128.539
326.189 136.39 334.536 154.077 334.536V372.476H0V335.579C31.4018 335.579 37.8336 326.664 37.8336 305.512V62.9806H0V26.0838H129.012V244.239L219.245
163.521H171.197V126.625H316.951V163.521L274.766 162.858Z" fill="#C20019"></path>
</svg>
<div className="flex flex-col justify-start items-start mb-14 w-[100vw] md:w-[45vw]">
<h2 className="text-[5vw] md:text-[3.5vw] lg:text-[2.5vw] leading-[5.5vw] md:leading-[3.5vw] lg:leading-[3vw] text-white mb-4">UNWIND WITH KIT</h2>
<button className="uppercase px-8 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop unwind routine</button>
</div>
</div>
</div>
<img src={Img3} alt="" className="w-full h-screen object-cover"/>
</div>
</Slider>
</div>
</>
)
}
export default Home

14
awwwards_ss4/src/components/Navbar.jsx Normal file
View file

@ -0,0 +1,14 @@
const Navbar = () => {
return (
<div className='my-1'>
<div className="hidden md:flex gap-12 uppercase px-6 py-4 rounded-full backdrop-blur-md text-white text-sm md:text-lg">
<a href="">shop</a>
<a href="">ethos</a>
<a href="">apothecary</a>
<a href="">journal</a>
</div>
</div>
)
}
export default Navbar

142
awwwards_ss4/src/components/Shop.jsx Normal file
View file

@ -0,0 +1,142 @@
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import imgSlide1 from "../assets/slide-1.webp"
import imgSlide2 from "../assets/slide-2.webp"
import imgSlide3 from "../assets/slide-3.webp"
import imgSlide4 from "../assets/slide-4.webp"
import imgSlide5 from "../assets/slide-5.webp"
import imgSlide6 from "../assets/slide-6.jpg"
const Shop = () => {
const shopSlide = {
dots: false,
arrows: false,
infinite: false,
speed: 500,
slidesToShow: 3.5,
slidesToScroll: 3.5,
initialSlide: 0,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 2.5,
slidesToScroll: 2.5,
infinite: false,
dots: false
}
},
{
breakpoint: 560,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5
}
}
]
};
return (
<div className="w-full h-full flex flex-col py-14 overflow-hidden bg-[#FAF3E8]">
<div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10 ">
<div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
<p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">Everyone’s kit is different, and we’ve got a kit for everyone. </p>
<div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
</div>
</div>
</div>
<div className="pl-5 sm:pl-10 w-full h-screen">
<Slider {...shopSlide}>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full h-[90vh] flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Thank you kit <span className="text-xs"> 01</span></p>
<img src={imgSlide1} alt="" className="w-[100vw] h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">thank you kit</span>
<span>01</span>
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Best sellers <span className="text-xs"> 23</span></p>
<img src={imgSlide2} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">Best sellers</span>
<span>23</span>
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">unwind<span className="text-xs"> 05</span></p>
<img src={imgSlide3} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">unwind</span>
<span>05</span>
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">treat<span className="text-xs"> 07</span></p>
<img src={imgSlide4} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">treat</span>
<span>07</span>
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Body <span className="text-xs"> 09</span></p>
<img src={imgSlide5} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">Body</span>
<span>09</span>
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden">
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
<p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">face <span className="text-xs"> 10</span></p>
<img src={imgSlide6} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
</div>
<div className="absolute inset-0 -z-[1] px-1">
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
<span className="text-[2vw]">face</span>
<span>10</span>
</p>
</div>
</div>
</div>
</Slider>
</div>
</div>
)
}
export default Shop

16
awwwards_ss4/src/index.css Normal file
View file

@ -0,0 +1,16 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body{
font-family: "Space Mono", monospace;
}
.icon-hidden{
display: none;
}
@media (max-width:810px){
.icon-hidden{
display: flex;
}
}

10
awwwards_ss4/src/main.jsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

12
awwwards_ss4/tailwind.config.js Normal file
View file

@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

7
awwwards_ss4/vite.config.js Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})