Compare commits
10 commits
8658db0507
...
4319c2cd06
| Author | SHA1 | Date | |
|---|---|---|---|
| 4319c2cd06 | |||
| c624d79b32 | |||
| bdaa6b64c5 | |||
| 4ae90daf2c | |||
| 550fcb21b7 | |||
| 312cb1be9b | |||
| b7c4b528ec | |||
| da3cce9f8f | |||
| bf9e25fdd3 | |||
| 8b04727f0f |
53 changed files with 6999 additions and 189 deletions
1
awwwards/.gitignore
vendored
Normal file
1
awwwards/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
assets
|
||||
BIN
awwwards/assets/logo.png
Normal file
BIN
awwwards/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
191
awwwards/index.html
Normal file
191
awwwards/index.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Awwwards Series Rebuild</title>
|
||||
</head>
|
||||
<body>
|
||||
<main class="app">
|
||||
<div class="nav">
|
||||
<div class="nav-container">
|
||||
<p class="nav-logo">Awwwards Rebuild by JTP</p>
|
||||
<div class="nav-select">
|
||||
<p>Grid</p>
|
||||
<div class="nav-select-toggle">
|
||||
<div class="nav-toggle"></div>
|
||||
</div>
|
||||
<p>Index</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="work">
|
||||
<div class="wrok-container">
|
||||
<div class="work-title">
|
||||
<h1>All projects</h1>
|
||||
</div>
|
||||
<div class="work-selector">
|
||||
<div class="work-grid">
|
||||
<div class="work-grid-item">
|
||||
<video class="work-grid-item-video" src="./assets/ochi-rebuild.webm" autoplay loop muted></video>
|
||||
<div class="work-grid-item-title">
|
||||
<h3>Ochi Design Rebuild</h3>
|
||||
</div>
|
||||
<div class="work-grid-item-info">
|
||||
<h2>(01)</h2>
|
||||
<ul>
|
||||
<li>Vite + React</li>
|
||||
<li>Tailwind</li>
|
||||
<li>GSAP</li>
|
||||
<li>Framer Motion</li>
|
||||
</ul>
|
||||
<div class="grid-btn">
|
||||
<a href="" class="grid-btn-1">Demo</a>
|
||||
<a href="" class="grid-btn-2">Source code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-grid-item --item-left">
|
||||
<video class="work-grid-item-video" src="./assets/sundown-rebuild.webm" autoplay loop muted></video>
|
||||
<div class="work-grid-item-title">
|
||||
<h3>Sundown Studio Rebuild</h3>
|
||||
</div>
|
||||
<div class="work-grid-item-info">
|
||||
<h2>(02)</h2>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
<div class="grid-btn">
|
||||
<a href="" class="grid-btn-1">Demo</a>
|
||||
<a href="" class="grid-btn-2">Source code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-grid-item">
|
||||
<video class="work-grid-item-video" src="./assets/rejouice-rebuild.webm" autoplay loop muted></video>
|
||||
<div class="work-grid-item-title">
|
||||
<h3>REJOUICE Rebuild</h3>
|
||||
</div>
|
||||
<div class="work-grid-item-info">
|
||||
<h2>(03)</h2>
|
||||
<ul>
|
||||
<li>Vite + React</li>
|
||||
<li>Tailwind</li>
|
||||
<li>GSAP</li>
|
||||
<li>Framer Motion</li>
|
||||
</ul>
|
||||
<div class="grid-btn">
|
||||
<a href="" class="grid-btn-1">Demo</a>
|
||||
<a href="" class="grid-btn-2">Source code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-grid-item --item-left">
|
||||
<video class="work-grid-item-video" src="./assets/kit-rebuild.webm" autoplay loop muted></video>
|
||||
<div class="work-grid-item-title">
|
||||
<h3>Kit: Rebuild</h3>
|
||||
</div>
|
||||
<div class="work-grid-item-info">
|
||||
<h2>(04)</h2>
|
||||
<ul>
|
||||
<li>Vite + React</li>
|
||||
<li>Tailwind</li>
|
||||
<li>Framer Motion</li>
|
||||
</ul>
|
||||
<div class="grid-btn">
|
||||
<a href="" class="grid-btn-1">Demo</a>
|
||||
<a href="" class="grid-btn-2">Source code</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-index">
|
||||
<div class="work-index-item">
|
||||
<div class="work-index-item-title">
|
||||
<div class="work-index-item-flex">
|
||||
<h2>Ochi Rebuild</h2>
|
||||
</div>
|
||||
<h1>1</h1>
|
||||
</div>
|
||||
<div class="work-index-item-media">
|
||||
<h2 class="work-index-item-media-arrow">→</h2>
|
||||
<video class="work-index-item-video" src="./assets/ochi-rebuild-pc.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/ochi-rebuild-ipad.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/ochi-rebuild-iphone.webm" muted loop autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-index-item">
|
||||
<div class="work-index-item-title">
|
||||
<div class="work-index-item-flex">
|
||||
<h2>Sundown Studio Rebuild</h2>
|
||||
</div>
|
||||
<h1>2</h1>
|
||||
</div>
|
||||
<div class="work-index-item-media">
|
||||
<h2 class="work-index-item-media-arrow">→</h2>
|
||||
<video class="work-index-item-video" src="./assets/sundown-rebuild-pc.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/sundown-rebuild-ipad.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/sundown-rebuild-iphone.webm" muted loop autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-index-item">
|
||||
<div class="work-index-item-title">
|
||||
<div class="work-index-item-flex">
|
||||
<h2>REJOUICE Rebuild</h2>
|
||||
</div>
|
||||
<h1>3</h1>
|
||||
</div>
|
||||
<div class="work-index-item-media">
|
||||
<h2 class="work-index-item-media-arrow">→</h2>
|
||||
<video class="work-index-item-video" src="./assets/rejouice-rebuild-pc.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/rejouice-rebuild-ipad.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/rejouice-rebuild-iphone.webm" muted loop autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="work-index-item">
|
||||
<div class="work-index-item-title">
|
||||
<div class="work-index-item-flex">
|
||||
<h2>Kit: Rebuild</h2>
|
||||
</div>
|
||||
<h1>4</h1>
|
||||
</div>
|
||||
<div class="work-index-item-media">
|
||||
<h2 class="work-index-item-media-arrow">→</h2>
|
||||
<video class="work-index-item-video" src="./assets/kit-rebuild-pc.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/kit-rebuild-ipad.webm" muted loop autoplay></video>
|
||||
<video class="work-index-item-video" src="./assets/kit-rebuild-iphone.webm" muted loop autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
76
awwwards/main.js
Normal file
76
awwwards/main.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
const toggle = {
|
||||
element: document.querySelector('.nav-select-toggle'),
|
||||
circle: document.querySelector('.nav-toggle'),
|
||||
};
|
||||
const view = {
|
||||
grid: document.querySelector('.work-grid'),
|
||||
index: document.querySelector('.work-index'),
|
||||
indexItem: document.querySelectorAll('.work-index-item'),
|
||||
indexMediaImage: document.querySelectorAll('.work-index-item-video'),
|
||||
indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'),
|
||||
};
|
||||
|
||||
const animateIndexItem = (item) =>{
|
||||
const itemImages = item.querySelectorAll('.work-index-item-video');
|
||||
const itemArrows = item.querySelectorAll('.work-index-item-media-arrow');
|
||||
const itemTitle = item.querySelectorAll('.work-index-item-title');
|
||||
|
||||
const tlIndexrow = gsap.timeline({
|
||||
paused: true,
|
||||
defaults: {
|
||||
duration: 0.6,
|
||||
ease: 'expo.inOut'
|
||||
},
|
||||
})
|
||||
.to(itemArrows, {autoAlpha: 1, xPercent: 0})
|
||||
.to(itemImages, {autoAlpha: 1, yPercent: 0, stagger: 0.03}, 0)
|
||||
.to(itemTitle, {autoAlpha: 0}, 0);
|
||||
|
||||
item.addEventListener('mouseenter', () => tlIndexrow.play())
|
||||
item.addEventListener('mouseleave', () => tlIndexrow.reverse())
|
||||
};
|
||||
|
||||
let isActive = false;
|
||||
const addEventListener = () => {
|
||||
const tlToggle = gsap.timeline({paused:true}).to(toggle.circle, {
|
||||
xPercent: 140,
|
||||
duration: 0.2,
|
||||
ease: 'expo.inOut',
|
||||
});
|
||||
gsap.set(view.index, {
|
||||
autoAlpha:0,
|
||||
display: 'none'
|
||||
});
|
||||
|
||||
const tlView = gsap.timeline({paused: true}).to(view.grid, {
|
||||
duration: 0.6,
|
||||
autoAlpha: 0,
|
||||
display: 'none',
|
||||
ease: 'expo.inOut',
|
||||
onComplete: () => {
|
||||
tlView.to(view.index, {
|
||||
autoAlpha: 1,
|
||||
display: 'block'
|
||||
});
|
||||
},
|
||||
});
|
||||
toggle.element.addEventListener('click', () => {
|
||||
!isActive ? tlToggle.play() : tlToggle.reverse();
|
||||
!isActive ? tlView.play() : tlView.reverse();
|
||||
|
||||
isActive = !isActive;
|
||||
});
|
||||
view.indexItem.forEach((item) => {
|
||||
gsap.set(view.indexMediaImage, {
|
||||
autoAlpha: 0,
|
||||
yPercent: 100
|
||||
});
|
||||
gsap.set(view.indexMediaArrow, {
|
||||
autoAlpha: 0,
|
||||
xPercent: -100
|
||||
});
|
||||
animateIndexItem(item);
|
||||
});
|
||||
|
||||
};
|
||||
addEventListener();
|
||||
233
awwwards/style.css
Normal file
233
awwwards/style.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root{
|
||||
--primary: #f7f7f7;
|
||||
--secondary: #181818;
|
||||
}
|
||||
html{
|
||||
font-size: calc(100vw / 1920 * 10);
|
||||
}
|
||||
body{
|
||||
background: var(--primary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
h1{
|
||||
font-size: 13rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
h2{
|
||||
font-size: 9rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h3{
|
||||
font-size: 4.8rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
h4{
|
||||
font-size: 3.2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p, li{
|
||||
font-size: 2.4rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
span{
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
/*=== navbar ===*/
|
||||
.nav{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 3.2rem 6.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.nav-select{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.nav-select-toggle{
|
||||
width: 6rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--secondary);
|
||||
border-radius: 200rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-toggle{
|
||||
background-color: var(--secondary);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 200rem;
|
||||
}
|
||||
/*=== projects ===*/
|
||||
.work{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 15rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrok-container{
|
||||
padding: 6.4rem;
|
||||
}
|
||||
.work-title{
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
gap: 3.2rem;
|
||||
padding-bottom: 4.8rem;
|
||||
border-bottom: 1px solid var(--secondary);
|
||||
}
|
||||
.work-title h1{
|
||||
font-size: 8rem;
|
||||
}
|
||||
.work-selector{
|
||||
position: relative;
|
||||
padding-top: 12rem;
|
||||
}
|
||||
/*=== grid ===*/
|
||||
.work-grid-item{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 1.5rem;
|
||||
grid-row-gap: 1.5rem;
|
||||
grid-template-areas: 'grid-video grid-info' 'grid-title .';
|
||||
margin-bottom: 12.8rem;
|
||||
}
|
||||
.--item-left{
|
||||
grid-template-areas: 'grid-info grid-video ' '. grid-title';
|
||||
}
|
||||
.work-grid-item-video{
|
||||
grid-area: grid-video;
|
||||
width: 96rem;
|
||||
height: 64rem;
|
||||
background-color: #181818;
|
||||
}
|
||||
.work-grid-item-info{
|
||||
grid-area: grid-info;
|
||||
}
|
||||
.work-grid-item-title{
|
||||
grid-area: grid-title;
|
||||
}
|
||||
.grid-btn{
|
||||
margin-top: 2.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.grid-btn-1{
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
background-color: #181818;
|
||||
color: white;
|
||||
border: 1px solid black;
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
.grid-btn-1:hover{
|
||||
background-color: gray;
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.grid-btn-2{
|
||||
padding: 10px;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
.grid-btn-2:hover{
|
||||
background-color: gray;
|
||||
color: white;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
/*=== index ===*/
|
||||
.work-index-item{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin-bottom: 3.2rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.work-index-item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.work-index-item-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.work-index-item-flex{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3.2rem;
|
||||
}
|
||||
.work-index-item-media{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.work-index-item-video{
|
||||
width: 32rem;
|
||||
height: 13rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/*=== grid responsive ===*/
|
||||
@media screen and (min-width: 768px){
|
||||
.--item-left .work-grid-item-info{
|
||||
justify-self: right;
|
||||
}
|
||||
}
|
||||
/*=== index responsive ===*/
|
||||
@media screen and (max-width: 768px){
|
||||
html{
|
||||
font-size: calc(100vw / 768 * 10);
|
||||
}
|
||||
h1{
|
||||
font-size: 7rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
p,li{
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
span{
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.work-grid-item, .work-grid-item.--item-left{
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: 'grid-video' 'grid-title' 'grid-info';
|
||||
}
|
||||
.work-grid-item-video{
|
||||
width: 100%;
|
||||
height: 64rem;
|
||||
}
|
||||
.work-title h1{
|
||||
font-size: 5rem;
|
||||
}
|
||||
.work-index-item-flex{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
# In this project, we recreate the design of OCHI design (https://ochi.design/) by using Vite + React.
|
||||
#### Start project --> npm run dev
|
||||
#
|
||||
P.S. This is a non-responsive website
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import FeaturedProjects from "./components/FeaturedProjects"
|
|||
import Footer from "./components/Footer"
|
||||
import Ready from "./components/Ready"
|
||||
import LocomotiveScroll from 'locomotive-scroll';
|
||||
import ScrollDown from "./components/ScrollDown"
|
||||
|
||||
|
||||
|
||||
|
|
@ -18,7 +17,6 @@ const App = () => {
|
|||
<div className="w-full h-screen bg-[#F1F1F1] text-[#212121]">
|
||||
<Navbar/>
|
||||
<Hero/>
|
||||
<ScrollDown/>
|
||||
<TextAnimation/>
|
||||
<About/>
|
||||
<Eyes/>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,22 @@ const About = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.15" className='about-text w-full pt-20 pb-20 bg-[#CDEA68] rounded-t-3xl'>
|
||||
<div data-scroll data-scroll-speed="-0.15" className='about-text w-full pt-[4vw] pb-[4vw] bg-[#CDEA68] rounded-t-3xl'>
|
||||
<div className="max-w-[1600px]">
|
||||
<h1 className="text-[3.2vw] leading-[4vw] tracking-tight px-16">Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products,
|
||||
<h1 className="text-[14px] sm:text-[3.2vw] leading-[4vw] tracking-tight px-[2vw] lg:px-[3.3vw]">Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products,
|
||||
explain complex ideas, and hire great people. </h1>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-[2vw]"></div>
|
||||
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-10"></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3">
|
||||
<div className="text-[1vw]">What you can expect:</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="text-[1vw] pr-10">
|
||||
<div className="w-[100vw] sm:w-[50vw] xl:w-full px-[2vw] lg:px-[3.3vw] mt-5 flex flex-col xl:grid xl:grid-cols-2 gap-3">
|
||||
<div className="text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw]">What you can expect:</div>
|
||||
<div className="flex flex-col xl:grid 2xl:grid-cols-2">
|
||||
<div className="text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw] pr-[2vw]">
|
||||
<p className=" mb-5">We create tailored presentations to help you persuade your colleagues, clients, or investors.
|
||||
Whether it’s live or digital, delivered for one or a hundred people. </p> <br />
|
||||
<p>We believe the mix of strategy and design (with a bit of coffee) is what makes your message clear, convincing, and captivating.</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center text-[1vw] mx-40 -mb-20">
|
||||
<div className="flex flex-col justify-center text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw] mx-0 2xl:mx-40 mt-10 2xl:mt-1 -mb-20">
|
||||
<p className="mb-4">S:</p>
|
||||
<p>Instagram </p>
|
||||
<p>Behance </p>
|
||||
|
|
@ -32,15 +31,15 @@ const About = () => {
|
|||
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-40"></div>
|
||||
|
||||
<div className="flex px-16 mt-5">
|
||||
<div className=" w-1/2">
|
||||
<p className="text-7xl text-[#212121] mb-8">Our approach:</p>
|
||||
<div className="h-[50vh] md:h-[70vh] flex flex-col lg:flex lg:flex-row px-[2vw] lg:px-[3.3vw] mt-5">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<p className="text-[3.75vw] text-[#212121] mb-[1.6vw]">Our approach:</p>
|
||||
<button className="btn flex justify-center items-center gap-8">
|
||||
<p className="text-[19px] uppercase">Read More</p>
|
||||
<span className="w-3 h-3 bg-white rounded-full"></span>
|
||||
<p className="text-[1vw] uppercase">Read More</p>
|
||||
<span className="w-2 md:w-3 h-2 md:h-3 bg-white rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-1/2 h-[70vh]"><img src={imgModel} alt="" className="rounded-xl h-full "/></div>
|
||||
<div className="w-full lg:w-1/2 h-[40vh] md:h-[50vh] xl:h-[60vh] 2xl:h-[70vh] mt-4 lg:mt-0"><img src={imgModel} alt="" className="rounded-xl h-full "/></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,17 +22,17 @@ const Eyes = () => {
|
|||
<div className="flex gap-10 absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[80%]">
|
||||
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
|
||||
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
|
||||
<p className="text-white uppercase text-3xl">play</p>
|
||||
<p className="text-white uppercase text-sm sm:text-[xl] 2xl:text-3xl">play</p>
|
||||
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
|
||||
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
<div className="w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
|
||||
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
|
||||
<p className="text-white uppercase text-3xl">play</p>
|
||||
<p className="text-white uppercase text-sm sm:text-[xl] 2xl:text-3xl">play</p>
|
||||
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
|
||||
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
<div className="w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,230 +12,184 @@ const FeaturedProjects = () => {
|
|||
featureTop[index].start({y: "100%"})
|
||||
}
|
||||
|
||||
const featurebottom = [useAnimation(), useAnimation()]
|
||||
const handleHoverTextStart = (index) => {
|
||||
featurebottom[index].start({y: "0"})
|
||||
}
|
||||
const handleHoverTextEnd = (index) => {
|
||||
featurebottom[index].start({y: "100%"})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.1" className="w-full pt-20 pb-20 bg-[#f1f1f1] rounded-t-3xl">
|
||||
<div className="px-16">
|
||||
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Feature projects</h1>
|
||||
<div data-scroll data-scroll-speed="-0.1" className="w-full pt-[4vw] pb-[40vw] bg-[#f1f1f1] rounded-t-3xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<h1 className="pt-[2vw] text-[8vw] leading-none lg:text-7xl text-[#212121] tracking-tight">Feature projects</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16"></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw]"></div>
|
||||
|
||||
<div className="px-16">
|
||||
<div className="w-full flex gap-5 mt-20">
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<div className="w-full flex flex-col md:flex md:flex-row gap-5 mt-[4vw]">
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>fyde</p>
|
||||
<motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className=" h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
<motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute hidden md:flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"fyde".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<h1 className="md:hidden w-full flex justify-center top-[45%] absolute z-10 text-[8vw] uppercase font-bold text-[#CDEA68] tracking-tight ">fyde</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/10/Fyde_Illustration_Crypto_2-663x551.png"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-5 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">audit</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">copywriting</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">sales desk</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">slides design</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">audit</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">copywriting</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">sales desk</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">slides design</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>vise</p>
|
||||
<motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="h-[80vh] relative">
|
||||
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
<motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative">
|
||||
<h1 className="feature-text absolute hidden md:flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"vise".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[1]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<h1 className="md:hidden w-full flex justify-center top-[45%] absolute z-10 text-[8vw] uppercase font-bold text-[#CDEA68] tracking-tight ">vise</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/09/Vise_front2-663x551.jpg"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-5 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">agency</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">company presentations</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">agency</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">company presentations</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-16">
|
||||
<div className="w-full flex gap-5 mt-20">
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>trawa</p>
|
||||
<motion.div onHoverStart={() => handleHoverTextStart(0)} onHoverEnd={() => handleHoverTextEnd(0)} className=" h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"trawa".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/08/Frame-3875-663x551.jpg"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-16 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand identity</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">design research</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">investor desk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>Premium Blend</p>
|
||||
<motion.div onHoverStart={() => handleHoverTextStart(1)} onHoverEnd={() => handleHoverTextEnd(1)} className="h-[80vh] relative">
|
||||
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"Premium Blend".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[1]} transition={{ease: Power4.ease, delay: index*0.01}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/12/PB-Front-4-663x551.png"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-16 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand template</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-center items-center text-center px-16 mt-40">
|
||||
|
||||
<div className="flex justify-center items-center text-center px-[2vw] lg:px-[3.3vw] mt-[2vw]">
|
||||
<button className="btn flex justify-center items-center gap-8">
|
||||
<p className="text-[19px] uppercase">view all case studies</p>
|
||||
<span className="w-3 h-3 bg-white rounded-full"></span>
|
||||
<p className="text-[1vw] xl:text-[19px] uppercase">view all case studies</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/*===== review section =====*/}
|
||||
<div className="about-text">
|
||||
<div className="px-16">
|
||||
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Clients’ reviews</h1>
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<h1 className="pt-[5vw] text-[8vw] leading-none lg:text-7xl text-[#212121] tracking-tight">Clients’ reviews</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw]"></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 flex flex-col lg:grid lg:grid-cols-2 gap-3 text-md xl:text-xl">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2">
|
||||
<p className="">Karman Ventures </p>
|
||||
<div className="">
|
||||
<p className="mb-20">Services:</p>
|
||||
<button className="btn-review uppercase mb-3 ">investor desk </button> <br />
|
||||
<button className="btn-review uppercase mb-3">sales desk </button>
|
||||
<p className="mb-[4vw] mt-5 lg:mt-0">Services:</p>
|
||||
<button className="btn-review uppercase mb-3 text-sm xl:text-xl">investor desk </button> <br />
|
||||
<button className="btn-review uppercase mb-3 text-sm xl:text-xl">sales desk </button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<p className="mb-20">William Barnes</p>
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[130px] rounded-xl"/>
|
||||
<p className="mt-10 w-2/3">They were transparent about the time and the stages of the project. The end product is high quality,
|
||||
<p className="mb-[4vw]">William Barnes</p>
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[100px] xl:w-[130px] rounded-xl"/>
|
||||
<p className="mt-10 w-4/4 lg:w-3/4 text-sm xl:text-xl">They were transparent about the time and the stages of the project. The end product is high quality,
|
||||
and I feel confident about how they were handholding the client through the process.
|
||||
I feel like I can introduce them to someone who needs to put a sales deck together from scratch, and they would be able to handhold the client experience
|
||||
from 0 to 100 very effectively from story to design. 5/5</p>
|
||||
</div>
|
||||
<p className="text-xl text-gray-400 uppercase">read</p>
|
||||
<p className="hidden lg:flex lg:text-xl text-gray-400 uppercase">read</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw] "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Planetly</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Nina Walloch</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Workiz Easy </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Tomer Levy</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Premium Blend </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Ellen Kim</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Hypercare Systems </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Brendan Goss</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Officevibe </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Raff Labrie</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Orderlion </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Stefan Strohmer</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Black Book </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Jaci Smith</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Trawa Energy </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>David Budde</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
</div>
|
||||
|
||||
{/*===== cardHero section =====*/}
|
||||
<div className="grid grid-cols-2 gap-5 px-16 pt-40 pb-40 bg-[#f1f1f1]">
|
||||
<div className="w-full h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-5 px-[2vw] lg:px-[3.3vw] pt-[8.5vw] bg-[#f1f1f1]">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
|
||||
<svg width="150" height="80" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="#CDEA68"></path>
|
||||
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="#CDEA68"></path>
|
||||
|
|
@ -243,16 +197,16 @@ const FeaturedProjects = () => {
|
|||
<path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="#CDEA68"></path>
|
||||
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="#CDEA68"></path>
|
||||
</svg>
|
||||
<button className="absolute left-10 bottom-10 py-1 px-4 border border-[#CDEA68] rounded-full text-[#CDEA68] text-xl">©2019-2022</button>
|
||||
<button className="absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#CDEA68] rounded-full text-[#CDEA68] text-sm xl:text-xl">©2019-2022</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<div className="flex flex-col sm:grid sm:grid-cols-2 gap-5">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo002.svg"} alt="" />
|
||||
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase">rating 5.0 0n clutch</button>
|
||||
<button className="btn-1 absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-sm xl:text-xl uppercase">rating 5.0 0n clutch</button>
|
||||
</div>
|
||||
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo003.png"} alt="" className="w-[100px] h-[100px]"/>
|
||||
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase tracking-tighter">business bootcamp alumni</button>
|
||||
<button className="btn-1 absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-sm xl:text-xl uppercase tracking-tighter">business bootcamp alumni</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
const Footer = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.2" className="w-full h-full flex bg-[#F1F1F1] rounded-t-3xl">
|
||||
<div className="px-16 w-1/2 h-full flex flex-col justify-between gap-3 text-xl">
|
||||
<div className="mt-20 uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[170px] leading-none">eye-</p>
|
||||
<p className="feature-text text-[170px] leading-none -mt-8">opening</p>
|
||||
<div className="w-1 md:w-1/2 h-full flex flex-col justify-between gap-3 text-sm lg:text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-[4.1vw] uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">eye-</p>
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">opening</p>
|
||||
</div>
|
||||
<div className="mb-10">
|
||||
<div className="hidden md:flex mb-10 px-[2vw] lg:px-[3.3vw]">
|
||||
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
|
||||
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>
|
||||
|
|
@ -17,12 +17,12 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2">
|
||||
<div className="mt-20 uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[170px] leading-none">Presentations</p>
|
||||
<div className="w-1 md:w-1/2 mt-[8.3vw] md:mt-0">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-[14vw] md:mt-[4.1vw] uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">Presentations</p>
|
||||
</div>
|
||||
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">S:</p>
|
||||
<p>Instagram</p>
|
||||
<p>Behance</p>
|
||||
|
|
@ -30,15 +30,15 @@ const Footer = () => {
|
|||
<p>Linkedin</p>
|
||||
</div>
|
||||
|
||||
<div className="w-5/6 flex justify-between">
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] w-[50vh] md:w-5/6 flex flex-col md:flex md:flex-row md:justify-between">
|
||||
<div className="text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">L:</p>
|
||||
<p>202-1965 W 4th Ave</p>
|
||||
<p>Vancouver, Canada</p> <br />
|
||||
<p>30 Chukarina St</p>
|
||||
<p>Lviv, Ukraine</p>
|
||||
</div>
|
||||
<div className="text-xl mt-10">
|
||||
<div className="text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">M:</p>
|
||||
<p>Home</p>
|
||||
<p>Services</p>
|
||||
|
|
@ -49,16 +49,16 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">E:</p>
|
||||
<p>hello@ochi.design</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-[#cecece]">
|
||||
<div className="text-xl mt-14">
|
||||
<div className="w-[60vh] md:w-5/6 flex flex-col md:flex md:flex-row md:justify-between text-[#cecece]">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-5 md:mt-14">
|
||||
<p>© ochi design 2024. Legal Terms</p>
|
||||
</div>
|
||||
<div className="text-xl mt-14 pr-16">
|
||||
<div className="text-sm lg:text-xl mt-5 md:mt-14 px-4 md:px-0 pr-16">
|
||||
<p className="mb-5">Website by Obys</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@ const boxSlide = {
|
|||
const Hero = () => {
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.3" className="w-full h-[90vh] bg-[#F1F1F1] pt-1">
|
||||
<div className="home-text mt-48 pl-16">
|
||||
<div data-scroll data-scroll-speed="-0.3" className="w-full h-[98vh] bg-[#F1F1F1] pt-1">
|
||||
<div className="home-text mt-[150px] xl:mt-[10vw] pl-[2vw] lg:pl-[3.3vw]">
|
||||
<div className="flex justify-between">
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">We create</h1>
|
||||
<div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-4">
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none">We create</h1>
|
||||
<div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-2 lg:p-3 xl:p-4">
|
||||
<p className="text-xl font-semibold mb-4">W.</p>
|
||||
<p className="home-text-2 [writing-mode:sideways-lr] text-sm">Site of the Day</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 -mt-12 items-center">
|
||||
<motion.p className="bg-[#B5D252] w-[150px] h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
|
||||
<div className="flex gap-2 -mt-[110px] lg:-mt-[80px] xl-mt-20 2xl:-mt-12 items-center">
|
||||
<motion.p className="hidden lg:flex bg-[#B5D252] w-[40px] lg:w-[60px] xl:w-[120px] 2xl:w-[150px] h-[40px] lg:h-[75px] xl:h-[85px] 2xl:h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
|
||||
</div>
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none -mt-6">presentations</h1>
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none -mt-4 lg:-mt-6">presentations</h1>
|
||||
</div>
|
||||
<div className="border-t-[1px] mt-36 border-[#b1b1b1]">
|
||||
<div className="flex justify-between px-16 mt-5 text-[21px]">
|
||||
<div className="border-t-[1px] mt-60 sm:mt-[35vw] lg:mt-[20vw] xl:mt-[7.5vw] border-[#b1b1b1]">
|
||||
<div className="flex flex-col xl:flex xl:flex-row xl:justify-between px-[2vw] lg:px-[3.3vw] mt-5 text-[4vw] sm:text-[2vw] lg:text-[21px]">
|
||||
<p>For public and private companies</p>
|
||||
<p>From the first pitch to IPO</p>
|
||||
<div className="flex gap-2 items-center cursor-pointer">
|
||||
<p className="uppercase border border-[#202020] py-1 px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out">start the project</p>
|
||||
<span className="p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-xl"/></span>
|
||||
<p className="uppercase border border-[#202020] py-[0.5vw] px-[1vw] lg:py-1 lg:px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out text-[3vw] sm:text-[2vw] lg:text-lg">start the project</p>
|
||||
<span className="p-[0.5vw] lg:p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-md lg:text-xl"/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { HiBars2 } from "react-icons/hi2";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<div className="nav-text w-full px-16 py-6 flex justify-between items-center fixed z-[999] backdrop-blur-sm">
|
||||
<div className="nav-text w-full px-[2vw] lg:px-[3.3vw] py-6 flex justify-between items-center fixed z-[999] backdrop-blur-sm">
|
||||
<div>
|
||||
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
|
||||
|
|
@ -10,15 +12,16 @@ const Navbar = () => {
|
|||
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex gap-10 text-xl tracking-tight cursor-pointer">
|
||||
<div className="hidden lg:flex gap-[2vw] text-[1.2vw] 2xl:text-[1vw] tracking-tight cursor-pointer">
|
||||
<p className="nav-topic">Services</p>
|
||||
<p className="nav-topic">Our work</p>
|
||||
<p className="nav-topic">About us</p>
|
||||
<p className="nav-topic">Insights</p>
|
||||
<div className=" ml-80">
|
||||
<p className="nav-topic">Contact us</p>
|
||||
<div className="ml-[15vw]">
|
||||
<p className="hidden nav-topic">Contact us</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="flex text-xl lg:hidden"><HiBars2/></p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
const Ready = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="0.1" className="w-full bg-[#CDEA68] rounded-t-3xl pt-48 pb-40 flex flex-col justify-center items-center text-center">
|
||||
<div className="text-ready flex flex-col uppercase font-bold text-[290px] tracking-tight leading-none">
|
||||
<div data-scroll data-scroll-speed="-0.4" className="w-full bg-[#CDEA68] rounded-t-3xl pt-[10vw] pb-60 flex flex-col justify-center items-center text-center">
|
||||
<div className="text-ready flex flex-col uppercase font-bold text-[15vw] tracking-tight leading-[15.5vw]">
|
||||
<p>Ready</p>
|
||||
<p className="-mt-12">to start</p>
|
||||
<p className="-mt-12">the project?</p>
|
||||
<p className="-mt-5 md:-mt-8 lg:-mt-10 xl:-mt-12">to start</p>
|
||||
<p className="-mt-5 md:-mt-8 lg:-mt-10 xl:-mt-12">the project?</p>
|
||||
</div>
|
||||
<button className="btn uppercase text-xl mb-4">start the project</button>
|
||||
<p className="uppercase text-xl mb-4">or</p>
|
||||
<button className="btn-2 uppercase text-xl">hello@ochi.design</button>
|
||||
<button className="btn uppercase text-sm lg:text-xl mb-4">start the project</button>
|
||||
<p className="uppercase text-sm lg:text-xl mb-4">or</p>
|
||||
<button className="btn-2 uppercase text-sm lg:text-xl">hello@ochi.design</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
const ScrollDown = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-sections data-scroll-speed="0" className="w-full h-[20vh] bg-[#F1F1F1] flex justify-center text-center mt-5">
|
||||
<p className="text-xl text-[#cecece]">Scroll down</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ScrollDown
|
||||
|
|
@ -9,9 +9,9 @@ const slider = {
|
|||
const TextAnimation = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-sections data-scroll-speed="-0.1" className="bg-[#F1F1F1]">
|
||||
<div className="marquee-text w-full pt-28 pb-20 bg-[#004D43] rounded-t-3xl">
|
||||
<div className="animate-text w-full pt-10 sm:pt-28 pb-20 bg-[#004D43] rounded-t-3xl">
|
||||
<div className="flex border-t-[1px] border-b-[1px] border-[#ffffff50] text-[#FFFFFF] overflow-hidden whitespace-nowrap gap-40">
|
||||
<motion.h1 className="text-[400px] font-bold uppercase leading-none -mb-20" variants={slider} initial="initial" animate="animate">
|
||||
<motion.h1 className="text-[50vw] sm:text-[40vw] lg:text-[30vw] 2xl:text-[20vw] font-bold uppercase leading-none -mb-20" variants={slider} initial="initial" animate="animate">
|
||||
We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ html{
|
|||
.home-text, .feature-text, .text-ready{
|
||||
font-family: "Bebas Neue", sans-serif;
|
||||
}
|
||||
.nav-text, .marquee-text, .home-text-2, .about-text{
|
||||
.nav-text, .animate-text, .home-text-2, .about-text{
|
||||
font-family: "Epilogue", sans-serif;
|
||||
}
|
||||
.nav-text{
|
||||
|
|
@ -39,7 +39,7 @@ html{
|
|||
|
||||
|
||||
.btn{
|
||||
padding: 20px 40px;
|
||||
padding: 1vw 2vw;
|
||||
border-radius: 50px;
|
||||
color: white;
|
||||
background: linear-gradient(#212121, #212121 50%, black 50%, black);
|
||||
|
|
@ -60,7 +60,7 @@ html{
|
|||
background-position: 100% 100%;
|
||||
}
|
||||
.btn-2{
|
||||
padding: 20px 40px;
|
||||
padding: 1vw 2vw;
|
||||
border-radius: 50px;
|
||||
border: 1px solid #212121;
|
||||
color: #212121;
|
||||
|
|
@ -73,7 +73,7 @@ html{
|
|||
background-position: 100% 100%;
|
||||
}
|
||||
.btn-review{
|
||||
padding: 6px 12px;
|
||||
padding: 0.3vw 1.2vh;
|
||||
border: 1px solid #212121;
|
||||
border-radius: 50px;
|
||||
transition: ease-in-out 0.3s;
|
||||
|
|
|
|||
|
|
@ -76,10 +76,6 @@
|
|||
</div>
|
||||
|
||||
<div id="section-3" class="section-3">
|
||||
<div class="section3-topic">
|
||||
<i class='bx bxs-circle'></i>
|
||||
<p>featured projects</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1694_Copy%2520of%2520211023_NikeCHI_PlayNewKids_Beauty-26-p-1080.webp">
|
||||
<div class="overlay"></div>
|
||||
|
|
|
|||
|
|
@ -315,9 +315,6 @@ nav h3{
|
|||
padding: 4vw 0;
|
||||
background-color: #EFEAE3;
|
||||
}
|
||||
.section3-topic{
|
||||
padding: 0 2.4rem;
|
||||
}
|
||||
.topic{
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
|
|
|
|||
21
awwwards_ss4/.eslintrc.cjs
Normal file
21
awwwards_ss4/.eslintrc.cjs
Normal 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
24
awwwards_ss4/.gitignore
vendored
Normal 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
2
awwwards_ss4/README.md
Normal 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
14
awwwards_ss4/index.html
Normal 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
5459
awwwards_ss4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
33
awwwards_ss4/package.json
Normal file
33
awwwards_ss4/package.json
Normal 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
6
awwwards_ss4/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
1
awwwards_ss4/public/vite.svg
Normal file
1
awwwards_ss4/public/vite.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
21
awwwards_ss4/src/App.jsx
Normal file
21
awwwards_ss4/src/App.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import Footer from "./components/Footer"
|
||||
import Home from "./components/Home"
|
||||
import KitVideo from "./components/KitVideo"
|
||||
import Products from "./components/Products"
|
||||
import Shop from "./components/Shop"
|
||||
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Home/>
|
||||
<Shop/>
|
||||
<KitVideo/>
|
||||
<Products/>
|
||||
<Footer/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
BIN
awwwards_ss4/src/assets/VProduct1.mp4
Normal file
BIN
awwwards_ss4/src/assets/VProduct1.mp4
Normal file
Binary file not shown.
BIN
awwwards_ss4/src/assets/bg-1.webp
Normal file
BIN
awwwards_ss4/src/assets/bg-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 799 KiB |
BIN
awwwards_ss4/src/assets/bg-2.webp
Normal file
BIN
awwwards_ss4/src/assets/bg-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
awwwards_ss4/src/assets/bg-3.webp
Normal file
BIN
awwwards_ss4/src/assets/bg-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
BIN
awwwards_ss4/src/assets/kit.mp4
Normal file
BIN
awwwards_ss4/src/assets/kit.mp4
Normal file
Binary file not shown.
BIN
awwwards_ss4/src/assets/product1.webp
Normal file
BIN
awwwards_ss4/src/assets/product1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
awwwards_ss4/src/assets/slide-1.webp
Normal file
BIN
awwwards_ss4/src/assets/slide-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
BIN
awwwards_ss4/src/assets/slide-2.webp
Normal file
BIN
awwwards_ss4/src/assets/slide-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
awwwards_ss4/src/assets/slide-3.webp
Normal file
BIN
awwwards_ss4/src/assets/slide-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
awwwards_ss4/src/assets/slide-4.webp
Normal file
BIN
awwwards_ss4/src/assets/slide-4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
awwwards_ss4/src/assets/slide-5.webp
Normal file
BIN
awwwards_ss4/src/assets/slide-5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
BIN
awwwards_ss4/src/assets/slide-6.jpg
Normal file
BIN
awwwards_ss4/src/assets/slide-6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
50
awwwards_ss4/src/components/Footer.jsx
Normal file
50
awwwards_ss4/src/components/Footer.jsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { FaArrowRight } from "react-icons/fa6";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col bg-[#FAF3E8] px-5 sm:px-10">
|
||||
<div className="border border-[#C20019] border-dashed -mt-60 md:-mt-32 xl:-mt-20 2xl:mt-20"></div>
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2">
|
||||
<div className="flex flex-col mt-10 text-[#C20019] pr-10">
|
||||
<p className="mb-10 text-2xl">Join Kit World below, say “hi” <button className="underline hover:text-black">@kitskinkind</button>, or <button className="underline hover:text-black"> drop us an email.</button></p>
|
||||
<form className="w-[30vh] md:w-[50vh] flex justify-between border border-[#C20019] py-2 px-4 rounded-full mb-10">
|
||||
<input type="text" placeholder="Enter email" className=" bg-transparent placeholder-[#c20019] outline-none"/>
|
||||
<button type="submit"><FaArrowRight className="font-semibold"/></button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex flex-col mt-10 text-[#c20019]">
|
||||
<p className="flex items-center text-2xl gap-2">Also <FaArrowRight className="text-[#C20019] font-semibold text-sm"/></p>
|
||||
<div className="text-2xl">
|
||||
<a href="" className="underline hover:text-black">FAQs</a>
|
||||
<a href="" className="underline hover:text-black pl-4">Privacy Policy</a>
|
||||
<a href="" className="underline hover:text-black pl-4">Returns Policy</a>
|
||||
<a href="" className="underline hover:text-black pl-4">Terms and Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-10">
|
||||
<svg aria-label="Kit:" className="logo--full w-[100vw] mb-[2vw]" 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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
180
awwwards_ss4/src/components/Home.jsx
Normal file
180
awwwards_ss4/src/components/Home.jsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import Navbar from "./Navbar";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import {motion, AnimatePresence} from "framer-motion"
|
||||
import { AiOutlineShopping, AiOutlineSearch } from "react-icons/ai";
|
||||
import { RiMenu2Fill } from "react-icons/ri";
|
||||
import { IoClose } from "react-icons/io5";
|
||||
import Img1 from "../assets/bg-1.webp"
|
||||
import Img2 from "../assets/bg-2.webp"
|
||||
import Img3 from "../assets/bg-3.webp"
|
||||
import { useState } from "react";
|
||||
import NavBag from "./NavBag";
|
||||
import NavSearch from "./NavSearch";
|
||||
import NavMenu from "./NavMenu";
|
||||
|
||||
|
||||
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},},
|
||||
};
|
||||
//NavClick
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const [isActiveBag, setIsActiveBag] = useState(false);
|
||||
const [isActiveSearch, setIsActiveSearch] = useState(false);
|
||||
const opacity = {
|
||||
initial: {
|
||||
opacity: 0
|
||||
},
|
||||
open: {
|
||||
opacity: 1,
|
||||
transition: {duration: 0.35}
|
||||
},
|
||||
closed: {
|
||||
opacity: 0,
|
||||
transition: {duration: 0.35}
|
||||
}
|
||||
}
|
||||
|
||||
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 text-sm sm:text-md" 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'>
|
||||
<div onClick={() => {setIsActiveBag(!isActiveBag)}} className="relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
|
||||
<motion.p variants={opacity} animate={!isActiveBag ? "open" : "closed"}><AiOutlineShopping className="text-xl"/></motion.p>
|
||||
<motion.p variants={opacity} animate={isActiveBag ? "open" : "closed"} className='absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
|
||||
</div>
|
||||
<div onClick={() => {setIsActiveSearch(!isActiveSearch)}} className="relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
|
||||
<motion.p variants={opacity} animate={!isActiveSearch ? "open" : "closed"}><AiOutlineSearch className="text-xl"/></motion.p>
|
||||
<motion.p variants={opacity} animate={isActiveSearch ? "open" : "closed"} className='absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
|
||||
</div>
|
||||
<div onClick={() => {setIsActive(!isActive)}} className="icon-hidden relative bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer">
|
||||
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="icon-hidden"><RiMenu2Fill className="text-xl"/></motion.p>
|
||||
<motion.p variants={opacity} animate={isActive ? "open" : "closed"} className='icon-hidden absolute opacity-0'><IoClose className="text-2xl text-[#C20019]"/></motion.p>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence mode="wait">
|
||||
{isActiveBag && <NavBag/>}
|
||||
{isActiveSearch && <NavSearch/>}
|
||||
{isActive && <NavMenu/>}
|
||||
</AnimatePresence>
|
||||
</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] duration-300">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] duration-300">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] duration-300">shop unwind routine</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src={Img3} alt="" className="w-full h-screen object-cover"/>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
17
awwwards_ss4/src/components/KitVideo.jsx
Normal file
17
awwwards_ss4/src/components/KitVideo.jsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import videoKit from "../assets/kit.mp4"
|
||||
|
||||
const KitVideo = () => {
|
||||
return (
|
||||
<div className='w-full h-screen flex items-end -mt-48 md:mt-0 bg-[#FAF3E8]'>
|
||||
<video src={videoKit} autoPlay loop muted className="w-[100%] h-[100%] object-cover"></video>
|
||||
<div className="w-full flex absolute px-5 sm:px-10">
|
||||
<h1 className="mb-10 text-white">
|
||||
<p className="w-[100vw] xl:w-[40vw] 2xl:w-[35vw] text-[32px] md:text-[36px] xl:text-[3vw] 2xl:text-[2.5vw]">For the good kind of stretch.</p>
|
||||
<button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] mt-5 duration-300">shop the gua sha body tool</button>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default KitVideo
|
||||
57
awwwards_ss4/src/components/NavBag.jsx
Normal file
57
awwwards_ss4/src/components/NavBag.jsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
const NavBag = () => {
|
||||
return (
|
||||
<div className="overflow-hidden bg-[#FBF8F4] flex flex-col absolute w-[80vw] md:w-[420px] h-[90vh] right-5 sm:right-20 md:right-28 rounded-2xl p-8 -z-10">
|
||||
<div className="w-[100%] h-[100%] flex flex-col justify-between">
|
||||
<div className="flex flex-col">
|
||||
<p className="uppercase text-xl mb-3">my bag (0)</p>
|
||||
<div className="border-2 border-[#F2E9DB] rounded-full mb-3"></div>
|
||||
<p className="text-[11px] tracking-tight mb-5">Spend another $50 to recieve FREE SHIPPING</p>
|
||||
<div className="border border-dashed border-black mb-3"></div>
|
||||
<p className="text-sm">No items in your bag</p>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[13px] uppercase mb-3">Build your kit</p>
|
||||
|
||||
<div className="border border-dashed border-black mb-2"></div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img src="https://cdn.shopify.com/s/files/1/0621/9313/9901/files/KIT_E-COMM_-_SMOOTHING_CONCENTRATE.png" alt="" className="w-[50px]"/>
|
||||
<a href="" className="flex flex-col">
|
||||
<p className="text-xs uppercase">Smoothing Concentrate</p>
|
||||
<p className="text-xs text-[#AAAAAA]">30ML / 1.01 FL. OZ </p>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<p className="text-sm">$37</p>
|
||||
<p className="text-sm text-[#C20019]">Add +</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-dashed border-black mb-2 mt-2"></div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img src="https://cdn.shopify.com/s/files/1/0621/9313/9901/files/KIT_E-COMM_-_SMOOTHING_CONCENTRATE.png" alt="" className="w-[50px]"/>
|
||||
<a href="" className="flex flex-col">
|
||||
<p className="text-xs uppercase">Rebalancing Concentrate</p>
|
||||
<p className="text-xs text-[#AAAAAA]">30ML / 1.01 FL. OZ </p>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<p className="text-sm">$37</p>
|
||||
<p className="text-sm text-[#C20019]">Add +</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-dashed border-black mb-2 mt-2"></div>
|
||||
<div className="flex justify-between mb-3">
|
||||
<p className="text-xl">Subtotal:</p>
|
||||
<p className="text-xl">$0</p>
|
||||
</div>
|
||||
<button className="py-2 rounded-full bg-[#AAAAAA] text-white uppercase">checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBag
|
||||
29
awwwards_ss4/src/components/NavMenu.jsx
Normal file
29
awwwards_ss4/src/components/NavMenu.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
|
||||
const NavMenu = () => {
|
||||
return (
|
||||
<div className='overflow-hidden bg-[#FBF8F4] absolute w-[90.5vw] h-[60vh] rounded-b-3xl -z-10 px-4'>
|
||||
<div className='mt-40 grid grid-cols-2'>
|
||||
<div className='px-2 flex flex-col'>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Best sellers<span className="text-xs">21</span></a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Latest<span className="text-xs">01</span></a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">All<span className="text-xs">21</span></a>
|
||||
</div>
|
||||
<div className='px-2 flex flex-col'>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Face<span className="text-xs">04</span></a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Body<span className="text-xs">04</span></a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Kits<span className="text-xs">20</span></a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Tools<span className="text-xs">05</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-dashed border-black mt-4 mb-4 mx-2"></div>
|
||||
<div className='px-2 flex flex-col'>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Ethos</a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Apothecary</a>
|
||||
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">journal</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavMenu
|
||||
60
awwwards_ss4/src/components/NavSearch.jsx
Normal file
60
awwwards_ss4/src/components/NavSearch.jsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { FaArrowRight } from "react-icons/fa6";
|
||||
|
||||
|
||||
const NavSearch = () => {
|
||||
return (
|
||||
<div className="overflow-hidden bg-[#FBF8F4] flex flex-col absolute w-[80vw] md:w-[420px] h-[90vh] right-5 sm:right-20 md:right-28 rounded-2xl p-6 sm:p-8 -z-10 overflow-y-auto">
|
||||
<form className="flex justify-between border border-[#C20019] py-2 px-4 rounded-full mb-8">
|
||||
<input type="text" placeholder="search store..." className=" bg-transparent placeholder-[#c20019] outline-none text-[#c20019]"/>
|
||||
<button type="submit"><FaArrowRight className="font-semibold text-[#c20019] hover:pl-1 duration-300"/></button>
|
||||
</form>
|
||||
<div>
|
||||
<p className="uppercase text-[13px] mb-5">Search Suggestions</p>
|
||||
<p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Face Oil</p><br className="mb-1"/>
|
||||
<p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">RE:SET Hand Wash</p><br className="mb-1"/>
|
||||
<p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Gift Sets</p><br className="mb-1"/>
|
||||
<p className="arrow-icon inline-block relative items-center text-sm hover:text-[#c20019] cursor-pointer">Lotion</p><br className="mb-1"/>
|
||||
</div>
|
||||
<div className="border border-dashed border-black mt-8 mb-5"></div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-between">
|
||||
<p className="uppercase text-sm">Best sellers</p>
|
||||
<a href="" className="uppercase text-sm hover:text-[#c20019]">View all</a>
|
||||
</div>
|
||||
<div className="flex justify-between mt-5 uppercase text-xs">
|
||||
<div className="flex flex-col justify-center items-center text-center p-1">
|
||||
<img src="http://kitskinkind.com.au/cdn/shop/files/Mineral_Cleanser_Front_SHOP.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
|
||||
<p className="w-[120px] mb-2">mineral water cleanser</p>
|
||||
<p className="text-[#AAAAAA] mb-2">100ML / 3.38 FL. OZ</p>
|
||||
<p>$30</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center text-center p-1">
|
||||
<img src="http://kitskinkind.com.au/cdn/shop/files/Skinkind_Faceoil_Front_front_SHOP.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
|
||||
<p className="w-[120px] mb-2">skinkind face oil</p>
|
||||
<p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
|
||||
<p>$42</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between mt-10 uppercase text-xs">
|
||||
<div className="flex flex-col justify-center items-center text-center p-1">
|
||||
<img src="http://kitskinkind.com.au/cdn/shop/files/KIT_E-COMM_-_BRIGHTENING_CONCENTRATE_THUMB_55189982-0054-4bb0-9799-c4d13d8c7f29.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
|
||||
<p className="w-[120px] mb-2">brightening concentrate</p>
|
||||
<p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
|
||||
<p>$37</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center text-center p-1">
|
||||
<img src="http://kitskinkind.com.au/cdn/shop/files/KIT_E-COMM_-_REBALANCING_CONCENTRATE_THUMB_c56af9b1-9e94-4be3-bd4c-154747ad7a2f.jpg" alt="" className="w-[100px] sm:w-[150px] mb-3"/>
|
||||
<p className="w-[120px] mb-2">rebalancing concentrate</p>
|
||||
<p className="text-[#AAAAAA] mb-2">30ML / 1.01 FL. OZ</p>
|
||||
<p>$37</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default NavSearch
|
||||
14
awwwards_ss4/src/components/Navbar.jsx
Normal file
14
awwwards_ss4/src/components/Navbar.jsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const Navbar = () => {
|
||||
return (
|
||||
<div className='my-1 -z-20'>
|
||||
<div className="hidden md:flex gap-5 uppercase border-transparent rounded-full backdrop-blur-md text-white text-sm md:text-lg">
|
||||
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">shop</a>
|
||||
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">ethos</a>
|
||||
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">apothecary</a>
|
||||
<a href="" className="py-3 px-6 hover:bg-[#FBF8F4] hover:text-[#c20019] rounded-full duration-300">journal</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
167
awwwards_ss4/src/components/Products.jsx
Normal file
167
awwwards_ss4/src/components/Products.jsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Product1 from "../assets/product1.webp"
|
||||
import VProduct1 from "../assets/VProduct1.mp4"
|
||||
|
||||
const Products = () => {
|
||||
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: 670,
|
||||
settings: {
|
||||
slidesToShow: 1.5,
|
||||
slidesToScroll: 1.5
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1.15,
|
||||
slidesToScroll: 1.15
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col pt-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]">What’s in your kit? </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] duration-300">shop all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pl-5 sm:pl-10 w-full h-screen">
|
||||
<Slider {...shopSlide}>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src={Product1} alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<video src={VProduct1} loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm">skinkind face oil</p>
|
||||
<p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
|
||||
<p className="mb-5 uppercase text-sm">$42</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/F_A.C.E_Serum_front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<video src="https://cdn.shopify.com/videos/c/vp/70c0e1ac978a4c5ebc458cba53d85d8e/70c0e1ac978a4c5ebc458cba53d85d8e.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm">(F)A.C.E serum</p>
|
||||
<p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
|
||||
<p className="mb-5 uppercase text-sm">$40</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" alt="" className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm mb-6">all body dry brush</p>
|
||||
<p className="mb-5 uppercase text-sm">$26</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/Body_Nutrition_Lotion_Front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<video src="https://cdn.shopify.com/videos/c/vp/b96fb62905ce4e5db802c596ae49f407/b96fb62905ce4e5db802c596ae49f407.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm">Body Nutrition Lotion</p>
|
||||
<p className="uppercase text-sm text-[#B9B8B7]">145ML / 4.9 FL. OZ</p>
|
||||
<p className="mb-5 uppercase text-sm">$36</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/GOOD_NIGHT_BALM_THUMB_6ccbc9aa-4e3a-4c63-ae3a-6cc53861962b.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<video src="https://cdn.shopify.com/videos/c/vp/b5d7a85e63ea43449bfcf0862929b19a/b5d7a85e63ea43449bfcf0862929b19a.HD-1080p-7.2Mbps-22274279.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm mb-6">Good night balm</p>
|
||||
<p className="mb-5 uppercase text-sm">$48</p>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
|
||||
<div className="relative overflow-hidden z-50">
|
||||
<div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
|
||||
<img src="https://kitskinkind.com.au/cdn/shop/files/Gua_Sha_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="bg-[#FBF8F4] rounded-3xl">
|
||||
<button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
|
||||
<span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
|
||||
</button>
|
||||
<video src="https://cdn.shopify.com/videos/c/vp/6b5e74042cda467ebed00ca1db370501/6b5e74042cda467ebed00ca1db370501.HD-1080p-7.2Mbps-25489853.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-5 uppercase text-sm mb-6">gua sha facial tool</p>
|
||||
<p className="mb-5 uppercase text-sm">$35</p>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Products
|
||||
156
awwwards_ss4/src/components/Shop.jsx
Normal file
156
awwwards_ss4/src/components/Shop.jsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
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: 670,
|
||||
settings: {
|
||||
slidesToShow: 1.5,
|
||||
slidesToScroll: 1.5
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 560,
|
||||
settings: {
|
||||
slidesToShow: 1.25,
|
||||
slidesToScroll: 1.25
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1.15,
|
||||
slidesToScroll: 1.15
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col pt-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] duration-300">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-5 md:px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[3.5vw] sm:text-[3vw] md: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-[3.5vw] sm:text-[3vw] md: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-[3.5vw] sm:text-[3vw] md: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-[3.5vw] sm:text-[3vw] md: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-[3.5vw] sm:text-[3vw] md: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-[3.5vw] sm:text-[3vw] md:text-[2vw]">face</span>
|
||||
<span>10</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Shop
|
||||
32
awwwards_ss4/src/index.css
Normal file
32
awwwards_ss4/src/index.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body{
|
||||
font-family: "Space Mono", monospace;
|
||||
}
|
||||
.icon-hidden{
|
||||
display: none;
|
||||
}
|
||||
.arrow-icon:hover{
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
padding-right: 24px;
|
||||
padding-left:8px;
|
||||
}
|
||||
.arrow-icon:hover::before {
|
||||
content: '\2192';
|
||||
padding-right:8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:810px){
|
||||
.icon-hidden{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
10
awwwards_ss4/src/main.jsx
Normal file
10
awwwards_ss4/src/main.jsx
Normal 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
12
awwwards_ss4/tailwind.config.js
Normal 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
7
awwwards_ss4/vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue