web/components/LandingPage/HeroSection/page.jsx

import React from "react";
import yek from "../../../public/images/1.png";
import doo from "../../../public/images/2.png";
import see from "../../../public/images/3.png";
import chr from "../../../public/images/4.png";
import png from "../../../public/images/5.png";
import shs from "../../../public/images/6.png";
import hft from "../../../public/images/7.png";
import Image from "next/image";

const HeroSection = () => {
  return (
    <div className=" xs:mt-[150px] md:mt-[60px] xl:mt-[180px] relative">
      <div className="text-center">
        <h1 className=" xs:text-3xl lg:text-5xl  xl:text-6xl text-white font-bold">
          وسمه ، بن ماضـــــــــــــــــی زیبایی
        </h1>
        <h2 className="text-white mt-2 xs:text-sm lg:text-lg xl:text-xl font-light">
          پلتفرم زیبایی ایرانی راهی برای زیبایی بهتر
        </h2>
      </div>
      <div className="flex xs:flex-wrap justify-center  xs:mt-[50px] lg:mt-[100px] xl:mt-[180px] ">
        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image src={yek} />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2">عطر و ادکلن</p>
          </div>
        </div>

        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image src={doo} />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2">وسایل بهداشتی</p>
          </div>
        </div>

        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2 group tr03">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px]  ">
                  <Image src={see} />{" "}
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2"> آرایشی چشم</p>
          </div>
        </div>

        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image src={chr} />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2">آرایش صورت</p>
          </div>
        </div>

        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image src={png} />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2">بهداشت زنانه</p>
          </div>
        </div>

        <div className="xs:m-2 lg:m-0">
          <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
            {" "}
            <div className="flex justify-center">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image src={shs} />{" "}
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-white text-sm mt-2">بهداشت مردانه</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeroSection;