design 2 added

src/App.js

@@ -5,6 +5,7 @@ import ProductTags from "./components/productTags/ProductTags";
 import CounterDesign from "./components/counterDesign/CounterDesign";
 import { BookDesign } from "./components/bookDesign/BookDesign";
 import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
+import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
 
 function App() {
   return (
@@ -14,7 +15,8 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
+      <BlogDesign2 />
     </div>
   );
 }

src/assets/icons/white-comment-icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <g id="Group_189" data-name="Group 189" transform="translate(-6702 -2215)">
+    <g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(6018 2031.759)">
+      <g id="message" transform="translate(684 186)">
+        <path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
+      </g>
+    </g>
+    <circle id="Ellipse_94" data-name="Ellipse 94" cx="6.5" cy="6.5" r="6.5" transform="translate(6725 2215)" fill="#fff"/>
+    <text id="_17" data-name="17" transform="translate(6735 2223)" fill="#646464" font-size="6" font-family="SegoeUI, Segoe UI"><tspan x="-6.469" y="0">17</tspan></text>
+  </g>
+</svg>

src/components/Blogs/design1/BlogDesign1.js

@@ -10,10 +10,9 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
-        <h2 className="text-lg text-$productTitle">آیتم محصولات</h2>
+        <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
-        <button className="bg-indigo-500 text-white rounded shadow-lg p-2">
           طراحی بلاگ 1
-        </button>
+        </h2>
       </div>
       <div className="mb-6">
         <p className="leading-10">

src/components/Blogs/design2/BlogDesign2.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
+import blogAuthorImg from "../../../assets/images/blog-author.png";
+
+import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
+
+const BlogDesign2 = () => {
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      {/* title holder */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-productTitle bg-green-100 p-2 rounded text-base">
+          طراحی بلاگ 2
+        </h2>
+      </div>
+      <div className="mb-6">
+        <p className="leading-10">
+          آدرس:
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            blogs/design2
+          </span>
+        </p>
+      </div>
+      {/* blog UI Design2 */}
+      <div className="bg-red-400 relative w-full md:w-1/4">
+        <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
+          1400/09/19
+        </button>
+        <img src={blogFeaturedImage2} alt="" className="w-full" />
+        <h2 className="absolute right-2 bottom-16 text-white text-lg">
+          آیا مواد غذایی پر فیبر مفید هستند؟
+        </h2>
+        <div className="flex item-center justify-around absolute right-2 bottom-1 w-full">
+          {/* {blogAuthor && ( */}
+          <div className="flex items-center">
+            <img src={blogAuthorImg} alt="" />
+            <p className="text-xs text-white mr-2">حامد دژبانی نسب</p>
+          </div>
+          {/* // )} */}
+          {/* {blogComments && ( */}
+          <div className="flex items-center">
+            <p className="text-xs text-white ml-2">زمان مطالعه 30 دقیقه</p>
+            <img src={whiteCommentIcon} alt="" />
+          </div>
+          {/* // )} */}
+        </div>
+        {/* <div className="absolute right-2 bottom-20  h-16 w-11/12  shadow-2xl shdadow-black"></div> */}
+      </div>
+    </section>
+  );
+};
+
+export default BlogDesign2;

src/components/productDesign/ProductDesign.js

@@ -65,24 +65,23 @@ const ProductDesign = ({
       </div>
       {/* product UI Design */}
       <div className="flex flex-wrap sm:flex-nowrap justify-around">
-        <div className="product-items-holder">
+        <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
-          {/* item1 */}
+          <div className="w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3">
-          <div className="product-item">
             <div className="w-full relative">
               {discountPricePercent && (
-                <div className="discountPriceBtn">
+                <div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1">
-                  <p className="dicountPriceNum">
+                  <p className="text-discountPriceTitle font-bold text-xs">
                     23<span>%</span>
                   </p>
                 </div>
               )}
               {likeBtn && (
-                <div className="likeBtnBg">
+                <div className="bg-likeBtnBg absolute left-2 top-10 rounded-md p-1">
                   <img src={heart} alt="" className="w-full" />
                 </div>
               )}
               {discount && (
-                <div className="discountBtn">
+                <div className="absolute left-2 top-20 rounded-md">
                   <img src={discountImg} alt="" className="w-full" />
                 </div>
               )}
@@ -101,11 +100,13 @@ const ProductDesign = ({
               )}
             </div>
             <div className="mt-4">
-              <h2 className={`productTitle ${productTitleAlignment}`}>
+              <h2
+                className={`text-productTitle leading-4 text-base 2xl:text-lg ${productTitleAlignment}`}
+              >
                 نسخه چاپی علموم تجربه هفتم
               </h2>
               {productContent && (
-                <p className="productContent">
+                <p className="text-justify text-productContent mt-2 text-sm leading-6">
                   این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                   دیگری نیز دارد.
                 </p>
@@ -136,13 +137,13 @@ const ProductDesign = ({
                     </p>
                   )}
                 </div>
-                <p className="product-price-num inline">
+                <p className="text-sm text-productPrice font-semibold inline">
                   145.000<span>تومان</span>
                 </p>
               </div>
               {/* add to cart */}
               <button
-                className={`addToCart ${
+                className={`rounded-2xl px-2 py-3 border text-xs text-productPrice ${
                   priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                 }`}
               >
@@ -151,9 +152,15 @@ const ProductDesign = ({
             </div>
             {productTags && (
               <div className="mt-2 flex flex-wrap">
-                <button className="product-tag">ارسال رایگان</button>
+                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
-                <button className="product-tag">برچسب های دیگر</button>
+                  ارسال رایگان
-                <button className="product-tag">دسته بندی به صورت کادو</button>
+                </button>
+                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
+                  برچسب های دیگر
+                </button>
+                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
+                  دسته بندی به صورت کادو
+                </button>
               </div>
             )}
           </div>

src/components/productDesign/ProductDesign.scss

@@ -1,42 +0,0 @@
-.product-items-holder {
-  @apply w-full flex flex-wrap items-center justify-around my-10 px-4;
-}
-
-.product-item {
-  @apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3;
-}
-
-.discountPriceBtn {
-  @apply bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1;
-}
-
-.likeBtnBg {
-  @apply bg-likeBtnBg absolute left-2 top-10 rounded-md p-1;
-}
-
-.discountBtn {
-  @apply absolute left-2 top-20 rounded-md;
-}
-.dicountPriceNum {
-  @apply text-discountPriceTitle font-bold text-xs;
-}
-
-.productTitle {
-  @apply text-productTitle leading-4 text-base 2xl:text-lg;
-}
-
-.productContent {
-  @apply text-justify text-productContent mt-2 text-sm leading-6;
-}
-
-.addToCart {
-  @apply rounded-2xl px-2 py-3 border text-xs text-productPrice;
-}
-
-.product-price-num {
-  @apply text-sm text-productPrice font-semibold;
-}
-
-.product-tag {
-  @apply rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs;
-}