fix responsive all pages & change style page list blog and blog item & add date picker

components/blog/detail/Caption.js

@@ -12,7 +12,7 @@ function Caption({ data }) {
                 width={808}
             />
             <div
-                className="my-6 text-[#525252] text-[16px] font-normal leading-[32px]"
+                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
                 dangerouslySetInnerHTML={{ __html: data.caption }}
             />
             <Image
@@ -23,7 +23,7 @@ function Caption({ data }) {
                 width={808}
             />
             <div
-                className="my-6"
+                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
                 dangerouslySetInnerHTML={{ __html: data.caption }}
             />
         </>

components/blog/detail/SocialMedia.js

@@ -10,7 +10,7 @@ const socials = [
 
 function SocialMedia() {
     return (
-        <ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
+        <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
             {socials.map((item, idx) => (
                 <li
                     key={idx}

components/blog/detail/commentUser/AddComment.js

@@ -3,11 +3,11 @@ import React from 'react'
 
 function AddComment() {
     return (
-        <div className='flex items-center justify-start gap-[16px] my-[24px]'>
+        <div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
             <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
             <Button
                 variant='outlined'
-                className='!border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[9px]'
+                className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
             >
                 ثبت نظر
             </Button>

components/blog/detail/commentUser/index.js

@@ -6,7 +6,7 @@ import AddComment from './AddComment'
 
 function CommentUser({ data }) {
     return (
-        <div className='mt-[24px]'>
+        <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
             <AnimationTextHead name='zoom-in-up' text='نظرات'>
                 <Underline />
             </AnimationTextHead>

components/blog/detail/index.js

@@ -4,7 +4,7 @@ import CommentUser from "./commentUser";
 
 function Detail({ data }) {
     return (
-        <div className="w-[68%]">
+        <div className="w-full lg:w-[68%]">
             <Caption data={data} />
             <SocialMedia />
             <CommentUser data={data} />