| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg"; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => { | 
					 | 
					 | 
					 | 
					const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  return ( | 
					 | 
					 | 
					 | 
					  return ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> | 
					 | 
					 | 
					 | 
					    <section className="w-3/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-productTitle bg-lime-200 p-2 rounded text-base"> | 
					 | 
					 | 
					 | 
					        <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base"> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -23,33 +23,42 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        </p> | 
					 | 
					 | 
					 | 
					        </p> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      </div> | 
					 | 
					 | 
					 | 
					      </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      {/* blog UI Design3 */} | 
					 | 
					 | 
					 | 
					      {/* blog UI Design3 */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <div className="w-full md:w-1/4 relative"> | 
					 | 
					 | 
					 | 
					      <div | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <img src={blogFeaturedImage2} alt="" /> | 
					 | 
					 | 
					 | 
					        className="flex flex-col justify-end relative p-3" | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <div className="w-11/12	m-auto p-2 rounded-lg shadow-md bg-white absolute -bottom-16 right-4 "> | 
					 | 
					 | 
					 | 
					        style={{ | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          <h2 className="text-base md:text-xl text-justify text-productTitle"> | 
					 | 
					 | 
					 | 
					          backgroundImage: `url(${blogFeaturedImage2})`, | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          backgroundSize: "100% 100%", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          backgroundRepeat: "no-repeat", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          // minHeight: "300px",
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          height: "calc(100vh/3)", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          maxHeight: "300px", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        }} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        {/* <img src={blogFeaturedImage2} alt="" /> */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          <h2 className="text-base text-justify text-productTitle "> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            آیا مواد غذای پر فیبر و مفید هستند؟ | 
					 | 
					 | 
					 | 
					            آیا مواد غذای پر فیبر و مفید هستند؟ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          </h2> | 
					 | 
					 | 
					 | 
					          </h2> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          {blogSubTitle && ( | 
					 | 
					 | 
					 | 
					          {blogSubTitle && ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            <h2 className="text-base md:text-xl text-justify text-productTitle mt-2"> | 
					 | 
					 | 
					 | 
					            <h2 className="text-base text-justify text-productTitle mt-2"> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              نظر شما چیه | 
					 | 
					 | 
					 | 
					              نظر شما چیه | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            </h2> | 
					 | 
					 | 
					 | 
					            </h2> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          )} | 
					 | 
					 | 
					 | 
					          )} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					          <div className="flex item-center justify-between w-full mt-4"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          <div className=" flex item-center justify-between mt-5"> | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            {blogAuthor && ( | 
					 | 
					 | 
					 | 
					            {blogAuthor && ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              <div className=" flex items-center"> | 
					 | 
					 | 
					 | 
					              <div className=" flex items-center"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <img src={blogAuthorImg} alt="" /> | 
					 | 
					 | 
					 | 
					                <img src={blogAuthorImg} alt="" className="w-7 h-7" /> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <p className="text-xs text-lightGrayTextColor mr-2"> | 
					 | 
					 | 
					 | 
					                <p className="text-xs 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 ml-2"> | 
					 | 
					 | 
					 | 
					                <p className="text-xs text-lightGrayTextColor font-light ml-2"> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  زمان مطالعه 30 دقیقه | 
					 | 
					 | 
					 | 
					                  زمان مطالعه 30 دقیقه | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                </p> | 
					 | 
					 | 
					 | 
					                </p> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <img src={commentIcon} alt="" /> | 
					 | 
					 | 
					 | 
					                <img src={commentIcon} alt="" className="w-7 h-7" /> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              </div> | 
					 | 
					 | 
					 | 
					              </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            )} | 
					 | 
					 | 
					 | 
					            )} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          </div> | 
					 | 
					 | 
					 | 
					          </div> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
  |