master
mahdi 3 years ago
parent 274b79c827
commit a5672afc53
  1. 28
      src/App.js
  2. BIN
      src/assets/icons/customer-support.png
  3. 16
      src/components/Blogs/design2/BlogDesign2.js
  4. 12
      src/components/Blogs/design3/BlogDesign3.js
  5. 12
      src/components/Blogs/design4/BlogDesign4.js
  6. 12
      src/components/Blogs/design5/BlogDesign5.js
  7. 8
      src/components/Blogs/design6/BlogDesign6.js
  8. 9
      src/components/Header/desgin1/HeaderDesign1.js
  9. 5
      src/components/buttonDesign/ButtonDesign.js
  10. 6
      src/components/contactInfoSection/ContactInfoSection.js
  11. 16
      src/components/counterDesign/CounterDesign.js
  12. 21
      src/components/productDesign/ProductDesign.js
  13. 6
      src/components/vodProductDesign/VodProductDesign.js

@ -22,21 +22,21 @@ function App() {
<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 />
</div> </div>
); );
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -58,29 +58,29 @@ const BlogDesign2 = ({
</button> </button>
)} )}
<div className="z-10 child-text"> <div className="z-10 child-text">
<h2 className="text-white text-sm"> <h2 className="text-white text-base">
آیا مواد غذایی پر فیبر مفید هستند؟ آیا مواد غذایی پر فیبر مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-white text-sm mt-2">شما چه فکری می کنید</h2> <h2 className="text-white text-base mt-2">شما چه فکری می کنید</h2>
)} )}
</div> </div>
<div className="z-10 flex item-center justify-between w-full mt-4 child-text"> <div className="z-10 flex item-center justify-between w-full mt-4">
{blogAuthor && ( {blogAuthor && (
<div className="flex items-center"> <div className="flex items-center transition duration-200 transform hover:-translate-y-1">
<img src={blogAuthorImg} alt="" className="w-6 h-6" /> <img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-xs text-white font-light mr-2"> <p className="text-sm text-white font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className="flex items-center"> <div className="flex items-center">
<p className="text-xs text-white font-light ml-2"> <p className="text-sm text-white font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<div className="relative"> <div className="relative">
<img src={whiteCommentIcon} alt="" className="w-6 h-6" /> <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
<span <span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`} className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
> >

@ -47,20 +47,20 @@ const BlogDesign3 = ({
> >
{/* <img src={blogFeaturedImage2} alt="" /> */} {/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20"> <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2 className={`text-sm text-justify ${blogTitleColor}`}> <h2 className={`text-base text-justify ${blogTitleColor}`}>
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className={`text-sm text-justify mt-2 ${blogTitleColor}`}> <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
نظر شما چیه نظر شما چیه
</h2> </h2>
)} )}
<div className="flex item-center justify-between w-full mt-4"> <div className="flex item-center justify-between w-full mt-4">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-6 h-6" /> <img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p <p
className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`} className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
> >
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
@ -69,12 +69,12 @@ const BlogDesign3 = ({
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className=" flex items-center">
<p <p
className={`text-xs font-light ml-2 ${blogCommentAuthorTextColor}`} className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
> >
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<div className="relative"> <div className="relative">
<img src={commentIcon} alt="" className="w-6 h-6" /> <img src={commentIcon} alt="" className="w-7 h-7" />
<span <span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`} className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
> >

@ -37,11 +37,11 @@ const BlogDesign4 = ({
<img src={blogImage} alt="" className="w-full h-full " /> <img src={blogImage} alt="" className="w-full h-full " />
</div> </div>
<div className="w-3/5 flex flex-col justify-around transform translate-x-10"> <div className="w-3/5 flex flex-col justify-around transform translate-x-10">
<h2 className="text-sm text-grayTextColor"> <h2 className="text-base text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (
<p className="text-xs text-justify leading-6 text-grayTextColor"> <p className="text-sm text-justify leading-6 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند. دیگران متوجه شوند.
@ -50,19 +50,19 @@ const BlogDesign4 = ({
<div className=" flex item-center justify-between"> <div className=" flex item-center justify-between">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-6 h-6" /> <img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-xs text-lightGrayTextColor font-light mr-2"> <p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2"> <p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<div className="relative"> <div className="relative">
<img src={commentIcon} alt="" className="w-6 h-6" /> <img src={commentIcon} alt="" className="w-7 h-7" />
<span <span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`} className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
> >

@ -37,11 +37,11 @@ const BlogDesign5 = ({
<img src={blogImage} alt="" className="w-full h-full" /> <img src={blogImage} alt="" className="w-full h-full" />
</div> </div>
<div className="w-3/5 flex flex-col justify-around mr-4"> <div className="w-3/5 flex flex-col justify-around mr-4">
<h2 className="text-sm text-justify text-grayTextColor"> <h2 className="text-base text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (
<p className="text-justify text-xs leading-6 text-grayTextColor"> <p className="text-justify text-sm leading-6 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند. دیگران متوجه شوند.
@ -50,19 +50,19 @@ const BlogDesign5 = ({
<div className="flex item-center justify-between w-full"> <div className="flex item-center justify-between w-full">
{blogAuthor && ( {blogAuthor && (
<div className="flex items-center"> <div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-6 h-6" /> <img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-xs text-lightGrayTextColor font-light mr-2"> <p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className="flex items-center"> <div className="flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2"> <p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<div className="relative"> <div className="relative">
<img src={commentIcon} alt="" className="w-6 h-6" /> <img src={commentIcon} alt="" className="w-7 h-7" />
<span <span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`} className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
> >

@ -50,19 +50,19 @@ const BlogDesign6 = ({
<div className="flex item-center justify-between w-full mt-4"> <div className="flex item-center justify-between w-full mt-4">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" /> <img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-xs text-lightGrayTextColor mr-2"> <p className="text-sm text-lightGrayTextColor mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2"> <p className="text-sm text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<div className="relative"> <div className="relative">
<img src={commentIcon} alt="" className="w-6 h-6" /> <img src={commentIcon} alt="" className="w-7 h-7" />
<span <span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`} className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
> >

@ -47,11 +47,14 @@ const HeaderDesign1 = ({
> >
{topHeader && ( {topHeader && (
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<div className=""> <div
<span className={`text-xs font-light ml-4 ${topHeaderItemsColor}`}> className="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
انتخاب کشور انتخاب کشور
</span> </span>
<span className={`text-xs font-light ${topHeaderItemsColor}`}> <span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
پیگیری سفارش پیگیری سفارش
</span> </span>
</div> </div>

@ -34,7 +34,7 @@ const ButtonDesign = ({
rightArrowBlack, rightArrowBlack,
upwardArrowBlack, upwardArrowBlack,
downwardArrowBlack, downwardArrowBlack,
buttonBgHoverColor,
circleArrow, circleArrow,
}) => { }) => {
return ( return (
@ -55,7 +55,7 @@ const ButtonDesign = ({
<div className="flex flex-wrap justify-around items-center"> <div className="flex flex-wrap justify-around items-center">
<div> <div>
<button <button
className={`flex items-center text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`} className={`flex items-center text-sm md:text-base hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
> >
اطلاعات بیشتر اطلاعات بیشتر
{leftArrowWhite && ( {leftArrowWhite && (
@ -141,6 +141,7 @@ export default ButtonDesign;
ButtonDesign.defaultProps = { ButtonDesign.defaultProps = {
buttonBgColor: "bg-darkGreenBg", buttonBgColor: "bg-darkGreenBg",
buttonBgHoverColor: "bg-greenBookBg",
circleArrowBgClr: "bg-darkGreenBg", circleArrowBgClr: "bg-darkGreenBg",
buttonTextColor: "text-white", buttonTextColor: "text-white",
buttonBorder: "border-b-4", buttonBorder: "border-b-4",

@ -2,8 +2,6 @@ import React from "react";
import "./ContactInfoSection.scss"; import "./ContactInfoSection.scss";
import ReactTooltip from "react-tooltip";
import customerSupport from "../../assets/icons/customer-support.png"; import customerSupport from "../../assets/icons/customer-support.png";
import lightGreenLine from "../../assets/icons/light-green-line.svg"; import lightGreenLine from "../../assets/icons/light-green-line.svg";
import lightBlueLine from "../../assets/icons/light-blue-line.svg"; import lightBlueLine from "../../assets/icons/light-blue-line.svg";
@ -27,10 +25,8 @@ const ContactInfoSection = ({
<img <img
src={customerSupport} src={customerSupport}
alt="" alt=""
data-tip="صفحه تماس با ما" className="w-14 cursor-pointer customer-support"
className="w-20 cursor-pointer customer-support"
/> />
<ReactTooltip place="bottom" type="dark" effect="float" />
<p <p
className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`} className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
> >

@ -36,22 +36,22 @@ const CounterDesign = ({
</div> </div>
{/* counter design */} {/* counter design */}
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
{likeBtn && ( {/* {likeBtn && (
<div className="flex items-center"> <div className="flex items-center">
<img <img
src={blackLikeIcon} src={blackLikeIcon}
alt="" alt=""
className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2" className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out transform hover:-translate-y-2"
onClick={() => setCount(count + 1)} onClick={() => setCount(count + 1)}
/> />
<img <img
src={blackDisLikeIcon} src={blackDisLikeIcon}
alt="" alt=""
className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2" className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out transform hover:translate-y-2"
onClick={() => setCount(count - 1)} onClick={() => setCount(count - 1)}
/> />
</div> </div>
)} )} */}
{counterIncreaseBtn && ( {counterIncreaseBtn && (
<img <img
src={incrementCounterIcon} src={incrementCounterIcon}
@ -62,7 +62,13 @@ const CounterDesign = ({
)} )}
<p <p
className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`} className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`}
style={count > 0 ? { color: "green" } : { color: "red" }} style={
count > -1
? count === 0
? { color: "gray" }
: { color: "green" }
: { color: "red" }
}
> >
{count} {count}
</p> </p>

@ -1,3 +1,4 @@
import React, { useEffect, useState } from "react";
import "./ProductDesign.scss"; import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating"; import StarRating from "../starRating/StarRating";
@ -39,6 +40,13 @@ const ProductDesign = ({
rangeWidth, rangeWidth,
addToCartHolder, addToCartHolder,
}) => { }) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 500);
}, []);
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
@ -90,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"> <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">
<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"> <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2"> <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
@ -241,7 +249,10 @@ 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 ${rangeWidth}`} className={`bg-rangeFillBgColor h-3 rounded duration-300`}
style={{
width: progressFlag ? rangeWidth : 0,
}}
></div> ></div>
</div> </div>
)} )}
@ -293,7 +304,7 @@ ProductDesign.defaultProps = {
productCatTextColor: "text-darkCrimsonTextColor", productCatTextColor: "text-darkCrimsonTextColor",
// برای درصد دادن به عرض رنج // برای درصد دادن به عرض رنج
rangeWidth: "w-44", rangeWidth: "60%",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border", productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor", productHolderBorderColor: "border-grayBorderColor",

@ -80,19 +80,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"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 cursor-pointer hover:motion-safe:animate-spin">
<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"> <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2"> <div className="rounded-md mt-2 cursor-pointer hover:animate-pulse">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}

Loading…
Cancel
Save