blog resposive

src/app/blogs/components/BigBlogItem.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image'
 import { ArrowLeft, Calendar2, Profile } from 'iconsax-react'
 const BigBlogItem: FC = () => {
     return (
-        <div className='w-full rounded-4xl bg-white p-7 flex gap-6'>
-            <Image src='https://picsum.photos/seed/picsum/200/300' alt='blog' width={300} height={300} className='size-[150px] object-cover rounded-4xl' />
+        <div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
+            <Image src='https://picsum.photos/seed/picsum/200/300' alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
             <div className='flex-1'>
                 <h4 className='font-bold text-sm leading-6'>
                     سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟

src/app/blogs/components/HeroSection.tsx

@@ -11,21 +11,21 @@ const HeroSection: FC = () => {
                     alt='banner'
                     width={1920}
                     height={1080}
-                    className='w-full  object-cover xl:mt-14 mt-8 min-h-[210px]'
+                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[210px] min-h-[350px]'
                 />
 
                 <div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
-                    <h4 className='font-bold'>
+                    <h4 className='font-bold xl:text-base text-sm'>
                         سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                     </h4>
 
-                    <p className='text-sm mt-4 leading-7'>
+                    <p className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
                         لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
                     </p>
                 </div>
             </div>
 
-            <div className='flex gap-8 mt-10'>
+            <div className='flex xl:flex-row flex-col gap-8 mt-10'>
                 <BlogItem />
                 <BlogItem />
                 <BlogItem />

src/app/blogs/page.tsx

@@ -6,15 +6,15 @@ import MostVisited from './components/MostVisited'
 import ContactUs from './components/ContactUs'
 const Blogs: FC = () => {
     return (
-        <div className='max-w-maxWidth mx-auto'>
+        <div className=''>
             <HeroSection />
 
             <h1 className='text-2xl font-bold mt-10'>
                 مجله داناک
             </h1>
 
-            <div className='mt-10 flex gap-8'>
-                <div className='w-[261px]'>
+            <div className='mt-10 flex xl:flex-row flex-col gap-8'>
+                <div className='xl:w-[261px] w-full'>
                     <Category />
                 </div>
 
@@ -24,7 +24,7 @@ const Blogs: FC = () => {
                     <BigBlogItem />
                 </div>
 
-                <div className='w-[261px]'>
+                <div className='xl:w-[261px] w-full'>
                     <MostVisited />
                     <div className='mt-6'>
                         <ContactUs />