import React from "react";
import digi1 from "../../../public/images/must delete/digi1.webp";
import digi2 from "../../../public/images/must delete/digi2.webp";
import digi3 from "../../../public/images/must delete/digi3.webp";
import digi4 from "../../../public/images/must delete/digi4.webp";
import digi5 from "../../../public/images/must delete/digi5.webp";
import digi6 from "../../../public/images/must delete/digi6.webp";
import digi7 from "../../../public/images/must delete/digi7.webp";
import digi8 from "../../../public/images/must delete/digi8.jpg";
import digi9 from "../../../public/images/must delete/digi9.jpg";
import digi10 from "../../../public/images/must delete/digi10.jpg";
import digi11 from "../../../public/images/must delete/digi11.jpg";
import digi12 from "../../../public/images/must delete/digi12.jpg";
import digi13 from "../../../public/images/must delete/digi13.jpg";
import Image from "next/image";
import Link from "next/link";

const componentName = (props) => {
  return (
    <div className="px-5  max-w-[1300px] mx-auto  ">
      <div className="m-5">
        <h1 className="font-bold text-2xl text-right">
          کامپوننت های آماده وسمه
        </h1>
        <p className="mb-0  text-right">جهت ساخته صفحه های داینامیک</p>
      </div>

      <div className="bg-gray-50 border border-gray-200 p-5 rounded-3xl">
        <div className="flex justify-between rtl">
          <p className="mb-0 text-right text-sm ">دسته بندی چهارتایی </p>{" "}
          <p className="mb-0 text-sm bg-red-500 rounded-full px-3 py-1 text-gray-200">
            کد کامپوننت 1
          </p>
        </div>
        <div className="mt-5">
          <div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-10">
            <div className="">
              <Image src={digi1} className="rounded-3xl" />
            </div>
            <div className="">
              <Image src={digi2} className="rounded-3xl" />
            </div>

            <div className="">
              <Image src={digi2} className="rounded-3xl" />
            </div>
            <div className="">
              <Image src={digi1} className="rounded-3xl" />
            </div>
          </div>
        </div>

        <div className="bg-gray-400 w-[100px] ml-auto m-10 rounded-3xl h-[2px]"></div>

        <div
          className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-3xl rtl"
          role="alert"
        >
          <strong className="font-bold"> نکته مهم : </strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز بزرگ</span>
          <strong>1920 * 1080</strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز گوشی</span>
          <strong>1000 * 600</strong>
        </div>
      </div>

      <div className="bg-gray-50 border border-gray-200 p-5 rounded-3xl mt-20">
        <div className="flex justify-between rtl">
          <p className="mb-0 text-right text-sm ">دسته بندی دوتایی </p>{" "}
          <p className="mb-0 text-sm bg-red-500 rounded-full px-3 py-1 text-gray-200">
            کد کامپوننت 2
          </p>
        </div>
        <div className="mt-5">
          <div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-10">
            <div className="">
              <Image src={digi1} className="rounded-3xl" />
            </div>
            <div className="">
              <Image src={digi2} className="rounded-3xl" />
            </div>
          </div>
        </div>
        <div className="bg-gray-400 w-[100px] ml-auto m-10 rounded-3xl h-[2px]"></div>

        <div
          className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-3xl rtl"
          role="alert"
        >
          <strong className="font-bold"> نکته مهم : </strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز بزرگ</span>
          <strong>1920 * 1080</strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز گوشی</span>
          <strong>1000 * 600</strong>
        </div>
      </div>

      <div className="bg-gray-50 border border-gray-200 p-5 rounded-3xl mt-20">
        <div className="flex justify-between rtl">
          <p className="mb-0 text-right text-sm ">دسته بندی دایره ای </p>{" "}
          <p className="mb-0 text-sm bg-red-500 rounded-full px-3 py-1 text-gray-200">
            کد کامپوننت 3
          </p>
        </div>
        <div className="mt-5">
          <div className="flex justify-center">
            <div className="grid xs:grid-cols-2 lg:grid-cols-6 gap-10 mx-auto xs:w-full lg:w-9/12">
              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden flex justify-center ">
                    <Image src={digi3} className="mx-auto" />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    ارتوپدی و کمک
                  </p>
                </div>
              </div>
              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden ">
                    <Image src={digi4} />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    ویلچر{" "}
                  </p>
                </div>
              </div>

              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden ">
                    <Image src={digi5} />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    کمک پوستی{" "}
                  </p>
                </div>
              </div>

              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden ">
                    <Image src={digi3} />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    ارتوپدی و کمک
                  </p>
                </div>
              </div>
              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden ">
                    <Image src={digi4} />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    ویلچر{" "}
                  </p>
                </div>
              </div>

              <div className="flex justify-center">
                <div>
                  <div className="w-[120px] h-[120px] rounded-full bg-gray-200  overflow-hidden ">
                    <Image src={digi5} />
                  </div>
                  <p className="mb-0 text-center text-black text-sm mt-3">
                    کمک پوستی{" "}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="bg-gray-400 w-[100px] ml-auto m-10 rounded-3xl h-[2px]"></div>

        <div
          className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-3xl rtl"
          role="alert"
        >
          <strong className="font-bold"> نکته مهم : </strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز بزرگ</span>
          <strong>1080 * 1080</strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز گوشی</span>
          <strong>800 * 800</strong>
        </div>
      </div>

      <div className="bg-gray-50 border border-gray-200 p-5 rounded-3xl">
        <div className="flex justify-between rtl">
          <p className="mb-0 text-right text-sm ">
            دسته بندی چهارتایی کنار هم{" "}
          </p>{" "}
          <p className="mb-0 text-sm bg-red-500 rounded-full px-3 py-1 text-gray-200">
            کد کامپوننت 4
          </p>
        </div>
        <div className="mt-5">
          <div className="grid xs:grid-cols-2 lg:grid-cols-4 gap-10">
            <div className="">
              <Image src={digi7} className="rounded-3xl mx-auto" />
            </div>
            <div className="">
              <Image src={digi6} className="rounded-3xl mx-auto" />
            </div>

            <div className="">
              <Image src={digi7} className="rounded-3xl mx-auto" />
            </div>
            <div className="">
              <Image src={digi6} className="rounded-3xl mx-auto" />
            </div>
          </div>
        </div>

        <div className="bg-gray-400 w-[100px] ml-auto m-10 rounded-3xl h-[2px]"></div>

        <div
          className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-3xl rtl"
          role="alert"
        >
          <strong className="font-bold"> نکته مهم : </strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز بزرگ</span>
          <strong>1920 * 1080</strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز گوشی</span>
          <strong>1000 * 600</strong>
        </div>
      </div>

      <div className="bg-gray-50 border border-gray-200 p-5 rounded-3xl">
        <div className="flex justify-between rtl">
          <p className="mb-0 text-right text-sm ">
            دسته بندی پرفروش‌ترین کالاها{" "}
          </p>{" "}
          <p className="mb-0 text-sm bg-red-500 rounded-full px-3 py-1 text-gray-200">
            کد کامپوننت 5
          </p>
        </div>
        <div className="mt-5">
          <div className="border border-gray-200 rounded-2xl bg-white p-3">
            <div className="grid xs:grid-cols-1 lg:grid-cols-4">
              <div className="xs:border-b-2 lg:border-b-0 lg:border-r-2 xs:py-5 lg:pt-0 border-gray-50 px-3">
                <div className="text-right">
                  <h3 className="font-bold">گوشی موبایل</h3>
                  <p className="mb-0 text-[12px] text-gray-500">
                    بر اساس سلیقه شما
                  </p>
                </div>

                <div className="grid grid-cols-2 mt-3">
                  <div className=" p-5 border-r border-b border-gray-50">
                    <Image src={digi9} />
                  </div>
                  <div className=" p-5 border-b border-l border-gray-50">
                    {" "}
                    <Image src={digi10} />
                  </div>
                  <div className=" p-5 border-t border-r border-gray-50">
                    {" "}
                    <Image src={digi8} />
                  </div>
                  <div className=" p-5 border-l border-t border-gray-50">
                    {" "}
                    <Image src={digi9} />
                  </div>
                </div>

                <div className="w-full text-center mt-3">
                  <Link href={"/"} className="text-[12px] text-sky-400 ">
                    مشاهده بیشتر
                  </Link>
                </div>
              </div>
              <div className="xs:border-y-2 lg:border-y-0 lg:border-x-2 xs:py-5 lg:pt-0 border-gray-50  px-3  ">
                <div className="text-right">
                  <h3 className="font-bold">هدفون، هدست و هندزفری</h3>
                  <p className="mb-0 text-[12px] text-gray-500">
                    بر اساس سلیقه شما
                  </p>
                </div>

                <div className="grid grid-cols-2 mt-3">
                  <div className=" p-5 border-r border-b border-gray-50">
                    <Image src={digi11} />
                  </div>
                  <div className=" p-5 border-b border-l border-gray-50">
                    {" "}
                    <Image src={digi12} />
                  </div>
                  <div className=" p-5 border-t border-r border-gray-50">
                    {" "}
                    <Image src={digi12} />
                  </div>
                  <div className=" p-5 border-l border-t border-gray-50">
                    {" "}
                    <Image src={digi13} />
                  </div>
                </div>

                <div className="w-full text-center mt-3">
                  <Link href={"/"} className="text-[12px] text-sky-400 ">
                    مشاهده بیشتر
                  </Link>
                </div>
              </div>
              <div className="xs:border-y-2 lg:border-y-0 lg:border-x-2 xs:py-5 lg:pt-0 border-gray-50  px-3  ">
                <div className="text-right">
                  <h3 className="font-bold">هدفون، هدست و هندزفری</h3>
                  <p className="mb-0 text-[12px] text-gray-500">
                    بر اساس سلیقه شما
                  </p>
                </div>

                <div className="grid grid-cols-2 mt-3">
                  <div className=" p-5 border-r border-b border-gray-50">
                    <Image src={digi11} />
                  </div>
                  <div className=" p-5 border-b border-l border-gray-50">
                    {" "}
                    <Image src={digi12} />
                  </div>
                  <div className=" p-5 border-t border-r border-gray-50">
                    {" "}
                    <Image src={digi12} />
                  </div>
                  <div className=" p-5 border-l border-t border-gray-50">
                    {" "}
                    <Image src={digi13} />
                  </div>
                </div>

                <div className="w-full text-center mt-3">
                  <Link href={"/"} className="text-[12px] text-sky-400 ">
                    مشاهده بیشتر
                  </Link>
                </div>
              </div>
              <div className="xs:border-t-2 lg:border-t-0 lg:border-l-2 xs:py-5 lg:pt-0 border-gray-50 px-3">
                <div className="text-right">
                  <h3 className="font-bold">گوشی موبایل</h3>
                  <p className="mb-0 text-[12px] text-gray-500">
                    بر اساس سلیقه شما
                  </p>
                </div>

                <div className="grid grid-cols-2 mt-3">
                  <div className=" p-5 border-r border-b border-gray-50">
                    <Image src={digi9} />
                  </div>
                  <div className=" p-5 border-b border-l border-gray-50">
                    {" "}
                    <Image src={digi10} />
                  </div>
                  <div className=" p-5 border-t border-r border-gray-50">
                    {" "}
                    <Image src={digi8} />
                  </div>
                  <div className=" p-5 border-l border-t border-gray-50">
                    {" "}
                    <Image src={digi9} />
                  </div>
                </div>

                <div className="w-full text-center mt-3">
                  <Link href={"/"} className="text-[12px] text-sky-400 ">
                    مشاهده بیشتر
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-gray-400 w-[100px] ml-auto m-10 rounded-3xl h-[2px]"></div>

        <div
          className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-3xl rtl"
          role="alert"
        >
          <strong className="font-bold"> نکته مهم : </strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز بزرگ</span>
          <strong>1920 * 1080</strong>
          <br />
          <span className="block sm:inline ml-2">اندازه عکس های سایز گوشی</span>
          <strong>1000 * 600</strong>
        </div>
      </div>
    </div>
  );
};

export default componentName;