added video section and product section
This commit is contained in:
parent
8b04727f0f
commit
bf9e25fdd3
7 changed files with 105 additions and 10 deletions
|
|
@ -1,4 +1,6 @@
|
|||
import Home from "./components/Home"
|
||||
import KitVideo from "./components/KitVideo"
|
||||
import Products from "./components/Products"
|
||||
import Shop from "./components/Shop"
|
||||
|
||||
|
||||
|
|
@ -8,6 +10,8 @@ function App() {
|
|||
<>
|
||||
<Home/>
|
||||
<Shop/>
|
||||
<KitVideo/>
|
||||
<Products/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
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/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 |
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">shop the gua sha body tool</button>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default KitVideo
|
||||
74
awwwards_ss4/src/components/Products.jsx
Normal file
74
awwwards_ss4/src/components/Products.jsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
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: 560,
|
||||
settings: {
|
||||
slidesToShow: 1.5,
|
||||
slidesToScroll: 1.5
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
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]">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>
|
||||
{/* Need 9 more*/}
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Products
|
||||
|
|
@ -35,11 +35,11 @@ const Shop = () => {
|
|||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col py-14 overflow-hidden bg-[#FAF3E8]">
|
||||
<div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10 ">
|
||||
<div className="w-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">
|
||||
|
|
@ -56,8 +56,8 @@ const Shop = () => {
|
|||
</div>
|
||||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">thank you kit</span>
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-5 md:px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[5vw] md:text-[2vw]">thank you kit</span>
|
||||
<span>01</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@ const Shop = () => {
|
|||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">Best sellers</span>
|
||||
<span className="text-[5vw] md:text-[2vw]">Best sellers</span>
|
||||
<span>23</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -85,7 +85,7 @@ const Shop = () => {
|
|||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">unwind</span>
|
||||
<span className="text-[5vw] md:text-[2vw]">unwind</span>
|
||||
<span>05</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -99,7 +99,7 @@ const Shop = () => {
|
|||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">treat</span>
|
||||
<span className="text-[5vw] md:text-[2vw]">treat</span>
|
||||
<span>07</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -113,7 +113,7 @@ const Shop = () => {
|
|||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">Body</span>
|
||||
<span className="text-[5vw] md:text-[2vw]">Body</span>
|
||||
<span>09</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -127,7 +127,7 @@ const Shop = () => {
|
|||
<div className="absolute inset-0 -z-[1] px-1">
|
||||
<div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
|
||||
<p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
|
||||
<span className="text-[2vw]">face</span>
|
||||
<span className="text-[5vw] md:text-[2vw]">face</span>
|
||||
<span>10</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue