responsive home page and layout

app/home/components/BannerSection.tsx

@@ -8,20 +8,26 @@ const BannerSection: FC = () => {
   return (
     <div className="w-full">
       <div className="relative">
-        <Image src={banner} alt="banner" width={2000} height={574} className="w-full max-h-[574px] object-cover" />
-        <div className="absolute h-full right-[120px] top-0 bottom-0 m-auto flex flex-col justify-center">
-          <div className="text-base">چاپ و بسته بندی به روش هوشمندانه</div>
-          <div className="text-2xl font-black mt-4">مجــتمع تخصصــــــی</div>
-          <div className="text-2xl font-black mt-4">
+        <Image
+          src={banner}
+          alt="banner"
+          width={2000}
+          height={574}
+          className="w-full h-[420px] sm:h-[480px] lg:h-auto lg:max-h-[574px] object-cover"
+        />
+        <div className="absolute inset-y-0 right-4 sm:right-8 lg:right-[120px] flex flex-col justify-center max-w-[min(100%,420px)] lg:max-w-none">
+          <div className="text-sm sm:text-base">چاپ و بسته بندی به روش هوشمندانه</div>
+          <div className="text-xl sm:text-2xl font-black mt-3 sm:mt-4">مجــتمع تخصصــــــی</div>
+          <div className="text-xl sm:text-2xl font-black mt-3 sm:mt-4">
             چــــــاپ و بستــــه بندی <span className="text-primary">دستی</span> و <span className="text-primary">هوشمند</span>{" "}
           </div>
-          <div className="mt-4 text-base flex flex-col gap-3">
+          <div className="mt-3 sm:mt-4 text-sm sm:text-base flex flex-col gap-2 sm:gap-3">
             <div>قیمت‌های عالی</div>
             <div>خدمات مشتریان بی‌نظیر</div>
             <div>سیستم سفارش‌گیری ساده</div>
           </div>
 
-          <div className="mt-4 flex gap-6 items-center">
+          <div className="mt-4 flex flex-wrap gap-3 sm:gap-6 items-center">
             <Button>
               <div className="flex gap-2.5">
                 <div>محصولات</div>