diff --git a/src/App.js b/src/App.js index 11af4e5..8ef4510 100644 --- a/src/App.js +++ b/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() { {/* */} {/* */} {/* */} - + {/* */} + ); } diff --git a/src/assets/icons/white-comment-icon.svg b/src/assets/icons/white-comment-icon.svg new file mode 100644 index 0000000..1f92bb9 --- /dev/null +++ b/src/assets/icons/white-comment-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + 17 + + diff --git a/src/assets/images/blog-featured-image2.jpg b/src/assets/images/blog-featured-image2.jpg new file mode 100644 index 0000000..f55e145 Binary files /dev/null and b/src/assets/images/blog-featured-image2.jpg differ diff --git a/src/components/Blogs/design1/BlogDesign1.js b/src/components/Blogs/design1/BlogDesign1.js index 4afefcf..487be0c 100644 --- a/src/components/Blogs/design1/BlogDesign1.js +++ b/src/components/Blogs/design1/BlogDesign1.js @@ -10,10 +10,9 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
{/* title holder */}
-

آیتم محصولات

- +

diff --git a/src/components/Blogs/design2/BlogDesign2.js b/src/components/Blogs/design2/BlogDesign2.js new file mode 100644 index 0000000..90d32c0 --- /dev/null +++ b/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 ( +

+ {/* title holder */} +
+

+ طراحی بلاگ 2 +

+
+
+

+ آدرس: + + blogs/design2 + +

+
+ {/* blog UI Design2 */} +
+ + +

+ آیا مواد غذایی پر فیبر مفید هستند؟ +

+
+ {/* {blogAuthor && ( */} +
+ +

حامد دژبانی نسب

+
+ {/* // )} */} + {/* {blogComments && ( */} +
+

زمان مطالعه 30 دقیقه

+ +
+ {/* // )} */} +
+ {/*
*/} +
+
+ ); +}; + +export default BlogDesign2; diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js index 2d463e2..62fe38c 100644 --- a/src/components/productDesign/ProductDesign.js +++ b/src/components/productDesign/ProductDesign.js @@ -65,24 +65,23 @@ const ProductDesign = ({
{/* product UI Design */}
-
- {/* item1 */} -
+
+
{discountPricePercent && ( -
-

+

+

23%

)} {likeBtn && ( -
+
)} {discount && ( -
+
)} @@ -101,11 +100,13 @@ const ProductDesign = ({ )}
-

+

نسخه چاپی علموم تجربه هفتم

{productContent && ( -

+

این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.

@@ -136,13 +137,13 @@ const ProductDesign = ({

)}
-

+

145.000تومان

{/* add to cart */}
{productTags && (
- - - + + +
)}
diff --git a/src/components/productDesign/ProductDesign.scss b/src/components/productDesign/ProductDesign.scss index e48a58a..e69de29 100644 --- a/src/components/productDesign/ProductDesign.scss +++ b/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; -}