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() {
return (
<div className="App">
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
{/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */}
<ProductDesign />
<VodProductDesign />
<BookDesign />
<ButtonDesign />
<ProductTags />
<CounterDesign />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
<HeaderDesign1 />
<ContactInfoSection />
<FooterDesign1 />
{/* <Testttt /> */}
{/* <Design2D /> */}
<Design2D />
<Functionality />
</div>
);

@ -44,7 +44,7 @@ const ProductDesign = ({
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 500);
}, 1000);
}, []);
return (
@ -98,19 +98,19 @@ const ProductDesign = ({
{/* icons on image */}
<div className="absolute left-2 top-2">
{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">
23<span>%</span>
</p>
</div>
)}
{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" />
</div>
)}
{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" />
</div>
)}
@ -224,7 +224,7 @@ const ProductDesign = ({
{/* add to cart */}
{addToCartHolder && (
<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" : ""
}`}
>
@ -249,7 +249,7 @@ const ProductDesign = ({
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-300`}
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}

@ -51,7 +51,7 @@ const VodProductDesign = ({
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 500);
}, 1000);
});
return (
<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 */}
<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={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
@ -86,19 +86,19 @@ const VodProductDesign = ({
{/* icons on image */}
<div className="absolute left-2 top-2">
{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">
23<span>%</span>
</p>
</div>
)}
{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" />
</div>
)}
{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" />
</div>
)}
@ -107,7 +107,11 @@ const VodProductDesign = ({
<div
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>
{/* select Color */}
{colors && (
@ -209,7 +213,7 @@ const VodProductDesign = ({
{/* add to cart */}
{addToCartHolder && (
<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" : ""
}`}
>
@ -243,7 +247,7 @@ const VodProductDesign = ({
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-300`}
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}

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

Loading…
Cancel
Save