footer

src/components/BlogItem.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react'
 
 const BlogItem: FC = () => {
     return (
-        <div className='flex-1 h-[390px] rounded-4xl overflow-hidden relative'>
+        <div className='flex-1 w-full min-h-[390px] bg-red-500 rounded-4xl overflow-hidden relative'>
             <Image
                 src='https://picsum.photos/seed/picsum/200/300'
                 layout='fill'

src/components/InfoBox.tsx

@@ -15,7 +15,7 @@ const InfoBox: FC<Props> = (props: Props) => {
                 </div>
 
                 <div className='flex-1'>
-                    <h3 className='text-lg'>
+                    <h3 className='xl:text-lg font-bold'>
                         {props.title}
                     </h3>
                 </div>

src/components/SectionHeader.tsx

@@ -8,7 +8,7 @@ type Props = {
 const SectionHeader: FC<Props> = (props) => {
     return (
         <div className='flex justify-between items-center'>
-            <h2 className='text-2xl'>
+            <h2 className='xl:text-2xl font-bold'>
                 {props.title}
             </h2>
 

src/components/ServiceItem.tsx

@@ -7,15 +7,15 @@ type Props = {
 
 const ServiceItem: FC<Props> = (props) => {
     return (
-        <div className='flex-1 bg-white rounded-4xl p-7'>
+        <div className='flex-1 bg-white rounded-4xl xl:p-7 p-4'>
             <div className='flex justify-between'>
-                <div className='size-[65px] rounded-2xl bg-orange-400'></div>
+                <div className='xl:size-[65px] size-[50px] rounded-2xl bg-orange-400'></div>
                 <div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
                     دسته بندی
                 </div>
             </div>
 
-            <h3 className='mt-6 text-2xl'>
+            <h3 className='mt-6 xl:text-2xl font-bold'>
                 دی منو
             </h3>