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

components/blogs/latestArticles/Article.js

@@ -6,15 +6,16 @@ function Article({ data }) {
         <li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
             <Link href={`/blog/${data.id}`}>
                 <Image
-                    src={data.src}
+                    className='w-full'
                     alt="article-img"
+                    src={data.src}
                     height={217}
                     width={392}
                 />
             </Link>
-            <div className='p-[16px]'>
+            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
                 <Link href={`/blog/${data.id}`}>
-                    <p className='text-[#3B3B3B] mb-[16px] text-[16px] font-bold'>{data.title}</p>
+                    <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
                 </Link>
                 <div className='flex items-center justify-start gap-[35px]'>
                     <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>

components/blogs/latestArticles/index.js

@@ -5,8 +5,8 @@ import Pagination from '@/app/component/Pagination';
 function LatestArticles() {
     return (
         <div>
-            <p className="text-[#3B3B3B] text-[20px] font-bold my-[24px]">جدیدترین مقاله ها</p>
-            <ul className="grid grid-cols-3 gap-6">
+            <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
                 {articles.map(item => (
                     <Article
                         data={item}