design 2 added

master
mahdi 3 years ago
parent 8babf18f5b
commit d7f98df937
  1. 4
      src/App.js
  2. 15
      src/assets/icons/white-comment-icon.svg
  3. BIN
      src/assets/images/blog-featured-image2.jpg
  4. 5
      src/components/Blogs/design1/BlogDesign1.js
  5. 54
      src/components/Blogs/design2/BlogDesign2.js
  6. 35
      src/components/productDesign/ProductDesign.js
  7. 42
      src/components/productDesign/ProductDesign.scss

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

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

@ -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"> <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <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 طراحی بلاگ 1
</button> </h2>
</div> </div>
<div className="mb-6"> <div className="mb-6">
<p className="leading-10"> <p className="leading-10">

@ -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;

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

@ -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;
}
Loading…
Cancel
Save