master
mahdi 3 years ago
parent a612ab9299
commit 9b21dfda29
  1. 32
      src/App.js
  2. 12
      src/components/productDesign/ProductDesign.js
  3. 20
      src/components/vodProductDesign/VodProductDesign.js
  4. 4
      src/components/vodProductDesign/VodProductDesign.scss

@ -21,23 +21,23 @@ import Functionality from "./components/functionality/Functionality";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
{/* <ProductDesign /> */} <ProductDesign />
{/* <VodProductDesign /> */} <VodProductDesign />
{/* <BookDesign /> */} <BookDesign />
{/* <ButtonDesign /> */} <ButtonDesign />
{/* <ProductTags /> */} <ProductTags />
{/* <CounterDesign /> */} <CounterDesign />
{/* <BlogDesign1 /> */} <BlogDesign1 />
{/* <BlogDesign2 /> */} <BlogDesign2 />
{/* <BlogDesign3 /> */} <BlogDesign3 />
{/* <BlogDesign4 /> */} <BlogDesign4 />
{/* <BlogDesign5 /> */} <BlogDesign5 />
{/* <BlogDesign6 /> */} <BlogDesign6 />
{/* <HeaderDesign1 /> */} <HeaderDesign1 />
{/* <ContactInfoSection /> */} <ContactInfoSection />
{/* <FooterDesign1 /> */} <FooterDesign1 />
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */} <Design2D />
<Functionality /> <Functionality />
</div> </div>
); );

@ -44,7 +44,7 @@ const ProductDesign = ({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setProgressFlag(true); setProgressFlag(true);
}, 500); }, 1000);
}, []); }, []);
return ( return (
@ -98,19 +98,19 @@ const ProductDesign = ({
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce"> <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2 cursor-pointer hover:animate-pulse"> <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
@ -224,7 +224,7 @@ const ProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -249,7 +249,7 @@ const ProductDesign = ({
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div <div
className={`bg-rangeFillBgColor h-3 rounded duration-300`} className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{ style={{
width: progressFlag ? rangeWidth : 0, width: progressFlag ? rangeWidth : 0,
}} }}

@ -51,7 +51,7 @@ const VodProductDesign = ({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setProgressFlag(true); setProgressFlag(true);
}, 500); }, 1000);
}); });
return ( return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -75,7 +75,7 @@ const VodProductDesign = ({
> >
{/* product image */} {/* product image */}
<div <div
className="group w-full relative flex items-center justify-center cursor-pointer" className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{ style={{
backgroundImage: `url(${watermelon})`, backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
@ -86,19 +86,19 @@ const VodProductDesign = ({
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 cursor-pointer hover:motion-safe:animate-spin"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce"> <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2 cursor-pointer hover:animate-pulse"> <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
@ -107,7 +107,11 @@ const VodProductDesign = ({
<div <div
className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`} className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
> >
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> <img
src={whitePlayIcon}
alt=""
className="playBtnImg w-5 h-5 group-hover:w-7 group-hover:h-7"
/>
</div> </div>
{/* select Color */} {/* select Color */}
{colors && ( {colors && (
@ -209,7 +213,7 @@ const VodProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -243,7 +247,7 @@ const VodProductDesign = ({
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div <div
className={`bg-rangeFillBgColor h-3 rounded duration-300`} className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{ style={{
width: progressFlag ? rangeWidth : 0, width: progressFlag ? rangeWidth : 0,
}} }}

@ -1,7 +1,3 @@
.playBtnImg { .playBtnImg {
transition: all 0.4s; transition: all 0.4s;
} }
.parent-img:hover .playBtnImg {
transition: all 0.4s;
transform: translateY(-10px) !important;
}

Loading…
Cancel
Save