401 lines
16 KiB
JavaScript
401 lines
16 KiB
JavaScript
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;
|