NetinaShop
/
web
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

component page

master
mpn 2025-03-08 11:18:25 +03:30
parent 3e1c5d13c1
commit 55de79aff4
24 changed files with 609 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/AppsComponent/BrandData/page.jsx
View File

@ -11,6 +11,7 @@ import logo from "../../../public/images/logo.png";
import AppContext from "@ctx/AppContext";
import CardNormal from "@comp/Cards/CardNormal/page";
import Link from "next/link";
import ArticleContent from "@comp/ArticleContent";
const BrandData = ({ params, data, product }) => {
const CTX = useContext(AppContext);
@ -64,12 +65,11 @@ const BrandData = ({ params, data, product }) => {
)}
</div>
<div>
<div
id="blog-content"
dangerouslySetInnerHTML={{ __html: data.description }}
/>
</div>
{data.description ? (
<ArticleContent htmlContent={data.description} />
) : (
<p>Loading...</p>
)}
</div>
</div>
</div>

16
components/AppsComponent/CategoriesData/page.jsx
View File

@ -1,5 +1,6 @@
"use client";
import ArticleContent from "@comp/ArticleContent";
import FilterCategory from "@comp/Category/FilterCategory/page";
import ListProdocts from "@comp/Category/ListProdocts/page";
import FilterCategoryMobile from "@comp/Category/Mobile/FilterCategoryMobile/page";
@ -12,10 +13,12 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useContext, useEffect, useMemo, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
export default function CategoriesData({ params, products }) {
export default function CategoriesData({ params, products, categoryData }) {
const CTX = useContext(AppContext);
const searchParams = useSearchParams();
console.log("categoryData", categoryData);
useEffect(() => {
if (
Number(searchParams.get("page")) === 0 ||
@ -249,12 +252,11 @@ export default function CategoriesData({ params, products }) {
/>
)}
{/* <div>
<div
id="blog-content"
dangerouslySetInnerHTML={{ __html: data.description }}
/>
</div> */}
{categoryData?.description ? (
<ArticleContent htmlContent={categoryData?.description} />
) : (
<p></p>
)}
<Footer />
</>

16
components/AppsComponent/ProductData/page.jsx
View File

@ -15,6 +15,7 @@ import { useRouter } from "next/navigation";
import InfiniteScroll from "react-infinite-scroll-component";
import BottomSheetComment from "plugins/bottomSheet/BottomSheetComment";
import AppContext from "@ctx/AppContext";
import ArticleContent from "@comp/ArticleContent";
const ProductData = ({ params, data }) => {
const CTX = useContext(AppContext);
@ -396,12 +397,15 @@ const ProductData = ({ params, data }) => {
<h3 className="mb-2 text-sm text-gray-400 mt-7">نقد و برسی </h3>
{!!data?.product?.expertCheck ? (
<div className="p-5 border rounded-lg">
<div
dangerouslySetInnerHTML={{
__html: data?.product?.expertCheck,
}}
/>
<div className="border rounded-lg">
{data?.product?.expertCheck ? (
<ArticleContent
htmlContent={data?.product?.expertCheck}
type={"pdp"}
/>
) : (
<p>Loading...</p>
)}
</div>
) : (
<div className="p-5 border rounded-lg">

15
components/ArticleContent/index.jsx 100644
View File

@ -0,0 +1,15 @@
export default function ArticleContent({ htmlContent, type }) {
return (
<div
className={` ${
type == "pdp"
? "w-full px-5"
: "xs:w-full lg:w-9/12 py-8 px-10 min-h-screen"
} mx-auto `}
>
<div className="prose lg:prose-xl max-w-none rtl">
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
</div>
</div>
);
}

13
components/Blog/BlogData/page.jsx
View File

@ -14,6 +14,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
import BottomSheetComment from "plugins/bottomSheet/BottomSheetComment";
import { toast } from "react-toastify";
import Chapar from "plugins/Chapar";
import ArticleContent from "@comp/ArticleContent";
const BlogData = ({ params, data }) => {
const CTX = useContext(AppContext);
@ -115,16 +116,18 @@ const BlogData = ({ params, data }) => {
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${data?.mainImage}`}
width={500}
height={500}
className="mb-3 xs:w-full lg:w-6/12 rounded-3xl"
className="mb-3 xs:w-full h-[400px] rounded-3xl object-cover"
/>
<h1 className=" font-bold text-right xs:text-[20px] lg:text-[40px]">
{data.title}
</h1>
<div></div>
<div
id="blog-content"
dangerouslySetInnerHTML={{ __html: data.content }}
/>
{data?.content ? (
<ArticleContent htmlContent={data?.content} type={"pdp"} />
) : (
<p>Loading...</p>
)}
</div>
</div>

79
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@headlessui/react": "^1.7.17",
"@next/third-parties": "^14.2.5",
"@tailwindcss/typography": "^0.5.16",
"axios": "^1.6.5",
"framer-motion": "^10.16.16",
"jalali-moment": "^3.3.11",
@ -898,6 +899,32 @@
"tslib": "^2.4.0"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
"integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@types/json5": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -1757,7 +1784,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true,
"bin": {
"cssesc": "bin/cssesc"
},
@ -3660,11 +3686,20 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"node_modules/log-symbols": {
"version": "4.1.0",
@ -4667,30 +4702,6 @@
}
}
},
"node_modules/react-spring-bottom-sheet/node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
},
"peerDependencies": {
"react": "17.0.2"
}
},
"node_modules/react-spring-bottom-sheet/node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"node_modules/react-toastify": {
"version": "9.1.3",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
@ -5599,20 +5610,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/typescript": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"dev": true,
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"@headlessui/react": "^1.7.17",
"@next/third-parties": "^14.2.5",
"@tailwindcss/typography": "^0.5.16",
"axios": "^1.6.5",
"framer-motion": "^10.16.16",
"jalali-moment": "^3.3.11",

BIN
public/images/must delete/digi1.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/images/must delete/digi10.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/images/must delete/digi11.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/must delete/digi12.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
public/images/must delete/digi13.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
public/images/must delete/digi2.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/images/must delete/digi3.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/images/must delete/digi4.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/images/must delete/digi5.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/images/must delete/digi6.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/images/must delete/digi7.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/must delete/digi8.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/must delete/digi9.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

22
src/app/categories/[...id]/page.jsx
View File

@ -90,12 +90,32 @@ const fetchProducts = async (categoryId, searchParams = {}) => {
}
};
const fetchCategory = async (categoryId) => {
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/product/category/${categoryId}`,
{ cache: "no-cache" }
);
if (!res.ok) return [];
const category = await res.json();
return category;
} catch (error) {
console.error("Error fetching category:", error);
return [];
}
};
const page = async ({ params, searchParams }) => {
const products = await fetchProducts(params?.["id"]?.[0], searchParams);
const categoryData = await fetchCategory(params?.["id"]?.[0]);
return (
<div>
<CategoriesData params={params} products={products} />
<CategoriesData
params={params}
products={products}
categoryData={categoryData}
/>
</div>
);
};

400
src/app/component-test/page.jsx 100644
View File

@ -0,0 +1,400 @@
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;

9
src/app/layout.jsx
View File

@ -53,6 +53,15 @@ export const metadata = {
// other: { enamad: "735422" },
};
export function generateViewport({ params, searchParams }) {
return {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: true,
};
}
const structuredData = {
"@context": "https://schema.org",
"@type": "Organization",

93
tailwind.config.js
View File

@ -53,6 +53,94 @@ module.exports = {
100: "#EEEEEE",
},
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme("colors.gray.700"),
h1: {
color: theme("colors.gray.900"),
fontWeight: "700",
fontSize: "1rem",
marginBottom: "1rem",
},
h2: {
color: theme("colors.gray.800"),
fontWeight: "600",
fontSize: "1rem",
marginBottom: "1rem",
},
h3: {
color: theme("colors.gray.700"),
fontWeight: "600",
fontSize: "1.75rem",
marginBottom: "0.75rem",
},
h4: {
color: theme("colors.gray.600"),
fontWeight: "500",
fontSize: "1.5rem",
marginBottom: "0.5rem",
},
h5: {
color: theme("colors.gray.600"),
fontWeight: "500",
fontSize: "1.25rem",
marginBottom: "0.5rem",
},
h6: {
color: theme("colors.gray.600"),
fontWeight: "500",
fontSize: "1rem",
marginBottom: "0.5rem",
},
p: {
marginBottom: "1rem",
lineHeight: "1.75rem",
fontSize: "1rem",
},
a: {
color: theme("colors.blue.600"),
textDecoration: "underline",
"&:hover": {
color: theme("colors.blue.800"),
},
},
ul: {
listStyleType: "disc",
paddingLeft: "1.25rem",
marginBottom: "1rem",
},
ol: {
listStyleType: "decimal",
paddingLeft: "1.25rem",
marginBottom: "1rem",
},
blockquote: {
borderLeftColor: theme("colors.gray.300"),
borderLeftWidth: "4px",
fontStyle: "italic",
paddingLeft: "1rem",
color: theme("colors.gray.600"),
marginBottom: "1rem",
},
code: {
backgroundColor: theme("colors.gray.100"),
padding: "0.25rem 0.5rem",
borderRadius: "0.25rem",
fontSize: "0.875rem",
},
pre: {
backgroundColor: theme("colors.gray.800"),
color: theme("colors.gray.100"),
padding: "1rem",
borderRadius: "0.5rem",
overflowX: "auto",
},
// Add additional elements if needed...
},
},
}),
},
screens: {
@ -84,7 +172,10 @@ module.exports = {
},
},
},
plugins: [],
plugins: [
require("@tailwindcss/typography"),
// ...other plugins
],
corePlugins: {
backdropOpacity: false,
backgroundOpacity: false,