web/components/Footer/page.jsx

import React from "react";
import logo from "../../public/images/logo.png";
import Image from "next/image";

const Footer = () => {
  return (
    <>
      <div className="bg-gray-200 p-5 mb-10 lg:flex rtl lg:px-20">
        <div className=" p-3 xs:w-full lg:w-8/12 mx-2 flex rtl">
          <div className="xs:w-[70px] lg:w-[100px]">
            <Image src={logo} />
          </div>
          <div className="mr-3">
            <h3>
              فروشگاه لوازم آرایشی و بهداشتی{" "}
              <small className="text-base  mr1 bg-sky-300 px-1 rounded-full">
                وسمه{" "}
              </small>
            </h3>
          </div>
        </div>
        <div className=" xs:w-full lg:w-4/12 mx-2 flex xs:mt-5 lg:mt-0">
          <div className="w-8/12">
            <input
              type="text"
              className="form-control !rounded-full text-sm"
              placeholder="شماره تماس برای  تحفیف ها"
            />
          </div>
          <button className="btn btn-primary  py-1 relative  rounded-full z-10 left-[40px]  !font-normal w-4/12 text-sm">
            {" "}
            ثبت شماره
          </button>
        </div>
      </div>
      <div className=" xs:px-10 lg:px-20">
        <div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-10 rtl">
          <div className="grid xs:grid-cols-1 lg:grid-cols-3  gap-10 rtl">
            <div className="col-span-2">
              <div className="grid xs:grid-cols-1 lg:grid-cols-2"></div>
              <div className=" ">
                <div>
                  <p className="mb-0">محصولات</p>
                  <div className="h-[1px] w-full bg-gray-200 mt-2"></div>
                </div>

                <div className="grid xs:grid-cols-2 lg:grid-cols-2">
                  <div>
                    <ul>
                      <li className="text-base text-gray-600 mt-2">
                        بهداشت شخصی{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        بهداشت و زیبایی ناخن{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        مراقبت از کودکان{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        بهداشت خانگی{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        ضدعفونی کننده{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        لوازم آرایشی
                      </li>
                    </ul>
                  </div>
                  <div>
                    <ul>
                      <li className="text-base text-gray-600 mt-2">
                        لوازم آرایشی
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        آرایش و مراقبت مو{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        مراقبت از پوست{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        لوازم بهداشتی{" "}
                      </li>
                      <li className="text-base text-gray-600 mt-2">
                        عطر، ادوکلن و اسپری{" "}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div className=" ">
              <div>
                <p className="mb-0">درباره ما</p>
                <div className="h-[1px] w-full bg-gray-200 mt-2"></div>
              </div>
              <div>
                <ul>
                  <li className="text-base text-gray-600 mt-2">
                    سوالات متداول{" "}
                  </li>
                  <li className="text-base text-gray-600 mt-2">تماس باما </li>
                  <li className="text-base text-gray-600 mt-2">قوانین سایت</li>
                  <li className="text-base text-gray-600 mt-2">درباره ما </li>
                </ul>
              </div>
            </div>
          </div>

          <div>
            <div>
              <p className="mb-0">چرا وسمه</p>
              <div className="h-[1px] w-full bg-gray-200 mt-2"></div>
            </div>

            <p className="mb-0 text-base text-gray-600 mt-3">
              وسمه تعهد داره تجربه خرید لوازم آرایشی و بهداشتی رو متحول کنه. این
              تحول می‌تونه برای مشتری احساس قسمتی از خانواده وسمه‌ بودن رو داشته
              باشه. وسمه با برطرف کردن دغدغه‌های خرید لوازم آرایشی و بهداشتی به
              ساختن لایف استایل شخصی خانم‌های ایرانی کمک می‌کنه و زندگی راحت‌تری
              پیش روی مشتریانش قرار می‌ده. از سال 1400 ما تمام انرژیمون رو به
              کار گرفتیم تا با تمرکز برکیفیت کالا، سرعت ارسال و قیمت کالا ، نیاز
              افراد رو برطرف کنیم و تجربه جدیدی از لذت خرید به وجود بیاریم.
            </p>
            {/* 
              <div className="flex rtl justify-center mt-5">
                <div className="w-[70px] mx-1">
                  <Image src={w11} className="opacity-50" />
                </div>
                <div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
                <div className="w-[70px] mx-1">
                  <Image src={w22} className="opacity-50" />
                </div>
                <div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
                <div className="w-[70px] mx-1">
                  <Image src={w33} className="opacity-50" />
                </div>
                <div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
                <div className="w-[70px] mx-1">
                  <Image src={w44} className="opacity-50" />
                </div>
                <div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
                <div className="w-[70px] mx-1">
                  <Image src={w55} className="opacity-50" />
                </div>
              </div> */}

            <div className="flex ltr justify-center mt-5 ">
              <div className=" flex justify-end flex-wrap ">
                <div className="bg-white w-[100px]  h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
                <div className="bg-white w-[100px]  h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
                <div className="bg-white w-[300px]  h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="h-[1px] border-[1px] border-gray-200 my-10  xs:mx-5 lg:mx-20">
        <p className="mb-0 text-gray-400 text-sm text-center py-5 rtl">
          استفاده از مطالب فروشگاه شاواز فقط برای مقاصد غیرتجاری و باذکر منبع
          بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد.
        </p>
      </div>
    </>
  );
};

export default Footer;