updated add to bag functionality
This commit is contained in:
parent
da3cce9f8f
commit
b7c4b528ec
4 changed files with 95 additions and 6 deletions
|
|
@ -2,12 +2,15 @@ import Navbar from "./Navbar";
|
|||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import {motion} from "framer-motion"
|
||||
import {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";
|
||||
|
||||
|
||||
const Home = () => {
|
||||
|
|
@ -25,6 +28,23 @@ const Home = () => {
|
|||
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 (
|
||||
<>
|
||||
|
|
@ -39,10 +59,22 @@ const Home = () => {
|
|||
</div>
|
||||
<Navbar/>
|
||||
<div className='flex flex-col'>
|
||||
<p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineShopping className="text-xl"/></p>
|
||||
<p className='bg-[#FBF8F4] w-10 h-10 rounded-full mb-5 flex justify-center items-center cursor-pointer'><AiOutlineSearch className="text-xl"/></p>
|
||||
<p className='icon-hidden bg-[#FBF8F4] w-10 h-10 rounded-full justify-center items-center cursor-pointer '><RiMenu2Fill className="text-xl"/></p>
|
||||
<div 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/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<Slider {...homeSlide}>
|
||||
<div >
|
||||
|
|
|
|||
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
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
const Navbar = () => {
|
||||
return (
|
||||
<div className='my-1'>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const Products = () => {
|
|||
<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://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" 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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue