web/components/Footer/page.jsx

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

const Footer = () => {
  return (
    <>
      <div className="bg-gray-100 p-5 pb-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 !border-[1px] 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="bg-gray-200">
        <div className=" xs:px-10 lg:px-20 py-5 ">
          <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>
                        <Link
                          href={`/categories/bdf6b13c-4be5-4a93-bcdb-612440bdbd6e`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            کرم مرطوب کننده دست و پا{" "}
                          </li>
                        </Link>

                        <Link
                          href={`/categories/20dce1e7-1dfe-4b2a-9764-6f3ddf46fdb2`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            مرطوب کننده و آبرسان صورت{" "}
                          </li>
                        </Link>
                        <Link
                          href={`/categories/16bcdc90-6842-4201-9d5c-54cd8f565148`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            شوینده سطوح
                          </li>
                        </Link>
                        <Link
                          href={`/categories/b7549222-87f7-4b0b-8938-210539b3a395`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            بهداشت دهان و دندان
                          </li>
                        </Link>
                        <Link
                          href={`/categories/f3e79ed0-d608-470d-8656-7a98ff933c1e`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            نرم کننده مو
                          </li>
                        </Link>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <Link
                          href={`/categories/b909db09-2188-4a4d-8578-e1f7102947bc`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            کیت رنگ مو{" "}
                          </li>
                        </Link>
                        <Link
                          href={`/categories/effe5d98-d4b7-47e1-9bfb-4d3c77ab3347`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            بهداشت خانه و آشپرخانه{" "}
                          </li>
                        </Link>
                        <Link
                          href={`/categories/debf7aad-4f08-4d03-ba70-6663ae1aa90d`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            سرم مو{" "}
                          </li>
                        </Link>
                        <Link
                          href={`/categories/8bf20569-c3e3-457f-b9ad-140ef449741b`}
                        >
                          <li className="text-sm text-gray-600 mt-2">
                            ژل بهداشتی بانوان{" "}
                          </li>
                        </Link>
                      </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>
                    <Link href={`/faq`}>
                      <li className="text-sm text-gray-600 mt-2">
                        سوالات متداول{" "}
                      </li>
                    </Link>
                    <Link href={`/contact-us`}>
                      <li className="text-sm text-gray-600 mt-2">تماس باما </li>
                    </Link>
                    <Link href={`/terms-and-conditions`}>
                      <li className="text-sm text-gray-600 mt-2">
                        قوانین سایت
                      </li>
                    </Link>
                    <Link href={`/about-us`}>
                      <li className="text-sm text-gray-600 mt-2">درباره ما </li>
                    </Link>
                  </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-sm 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>

        <p className="mb-0 text-gray-400 text-sm text-center py-5 rtl bg-gray-100">
          استفاده از مطالب فروشگاه شاواز فقط برای مقاصد غیرتجاری و باذکر منبع
          بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد. ورژن
          {process.env.NEXT_PUBLIC_PACKAGE_VERSION}
        </p>
      </div>
    </>
  );
};

export default Footer;