mehraein-front/app/home/components/BannerSection.tsx

import Button from "@/app/components/Button";
import banner from "@/assets/images/banner.png";
import { ArrowCircleLeft } from "iconsax-reactjs";
import Image from "next/image";
import { FC } from "react";

const BannerSection: FC = () => {
  return (
    <div className="w-full">
      <div className="relative">
        <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-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 flex-wrap gap-3 sm:gap-6 items-center">
            <Button>
              <div className="flex gap-2.5">
                <div>محصولات</div>
                <ArrowCircleLeft size={24} color="white" />
              </div>
            </Button>
            <Button variant="outline" className="min-w-16">
              <div className="flex gap-2.5">
                <div>درباره ی ما</div>
              </div>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BannerSection;