delete images and add typography

components/ArticleContent/index.jsx

@@ -7,7 +7,7 @@ export default function ArticleContent({ htmlContent, type }) {
           : "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 className="prose  max-w-none rtl">
         <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
       </div>
     </div>

components/Blog/BlogData/page.jsx

@@ -118,7 +118,7 @@ const BlogData = ({ params, data }) => {
                 height={500}
                 className="mb-3 xs:w-full h-[400px] rounded-3xl object-cover"
               />
-              <h1 className=" font-bold text-right xs:text-[20px] lg:text-[40px]">
+              <h1 className=" font-bold text-right xs:text-[20px] lg:text-[30px]">
                 {data.title}
               </h1>
               <div></div>

components/LandingPage/CategoriesHero/page.jsx

@@ -1,11 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import yek from "../../../public/images/1.png";
-import doo from "../../../public/images/2.png";
-import see from "../../../public/images/3.png";
-import chr from "../../../public/images/4.png";
-import png from "../../../public/images/5.png";
-import shs from "../../../public/images/6.png";
+
 import back1 from "../../../public/images/back1.jpg";
 import back2 from "../../../public/images/back2.jpg";
 import back3 from "../../../public/images/back3.jpg";
@@ -17,16 +12,16 @@ import PersianNumber from "plugins/PersianNumber";
 const CategoriesHero = () => {
   const categories = [
     {
-      name: "مراقبت پوست",
-      url: "/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت%20پوست",
+      name: "آرایش و مراقبت مو",
+      url: "categories/3df995d4-6a36-4de2-9557-a5c3304529fe/آرایش-و-مراقبت-مو",
       products: 300,
       brands: 20,
       image: back1,
     },
     {
-      name: "آرایش لب",
-      url: "/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش%20لب",
-      products: 30,
+      name: "حالت دهنده و ژل مو",
+      url: "categories/9e1289e7-6c8e-4634-b57b-448268c7492e/حالت-دهنده-و-ژل-مو",
+      products: 20,
       brands: 5,
       image: back2,
     },
@@ -38,17 +33,17 @@ const CategoriesHero = () => {
       image: back3,
     },
     {
-      name: "کرم پودر",
-      url: "/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم%20پودر",
-      products: 250,
+      name: "بهداشت دهان و دندان",
+      url: "categories/b7549222-87f7-4b0b-8938-210539b3a395/بهداشت-دهان-و-دندان",
+      products: 50,
       brands: 10,
       image: back5,
     },
     {
-      name: "آرایش ناخن",
-      url: "/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش%20ناخن",
-      products: 10,
-      brands: 2,
+      name: "لوازم اصلاح",
+      url: "/categories/70cffd9e-f475-4245-87bb-5f175d286901/لوازم-اصلاح",
+      products: 30,
+      brands: 10,
       image: back4,
     },
   ];
@@ -79,14 +74,20 @@ const CategoriesHero = () => {
 
               {/* Text overlay */}
               <div className="absolute bottom-0 p-4 right-0 z-10">
-                <p className="text-white text-right font-bold text-lg">
+                <p className="text-white text-right font-bold xs:text-sm lg:text-lg">
                   {category.name}
                 </p>
-                <p className="text-gray-300 text-right text-sm rtl">
+                <p className="text-gray-300 text-right xs:text-[11px] lg:text-sm rtl">
                   +
-                  <PersianNumber number={category.products} style={"mx-1"} />
+                  <PersianNumber
+                    number={category.products}
+                    style={"mx-1 xs:text-[11px] lg:text-sm"}
+                  />
                   محصول |
-                  <PersianNumber number={category.brands} style={"mx-1"} />
+                  <PersianNumber
+                    number={category.brands}
+                    style={"mx-1 xs:text-[11px] lg:text-sm"}
+                  />
                   برند
                 </p>
               </div>

components/Navbar/page.jsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import { useContext, useEffect, useState } from "react";
-import cover from "../../public/images/navbar/n1.jpg";
+
 import divider from "../../public/images/divider.png";
 import logoWhite from "../../public/images/logo-white.png";
 import logoBlack from "../../public/images/logo.png";

src/app/component-test/page.jsx

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

style/globals.css

@@ -86,14 +86,6 @@ body {
   pointer-events: none;
 }
 
-.bg-header {
-  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
-    url(../public/images/bg-header.jpg);
-  height: 100vh;
-  background-position: center;
-  background-size: cover;
-}
-
 .bg-contact-us {
   background: hsla(201, 100%, 43%, 1);
 

tailwind.config.js

@@ -61,37 +61,37 @@ module.exports = {
             h1: {
               color: theme("colors.gray.900"),
               fontWeight: "700",
-              fontSize: "1rem",
+              fontSize: "1.7rem",
               marginBottom: "1rem",
             },
             h2: {
               color: theme("colors.gray.800"),
               fontWeight: "600",
-              fontSize: "1rem",
+              fontSize: "1.4rem",
               marginBottom: "1rem",
             },
             h3: {
               color: theme("colors.gray.700"),
               fontWeight: "600",
-              fontSize: "1.75rem",
+              fontSize: "1.2rem",
               marginBottom: "0.75rem",
             },
             h4: {
               color: theme("colors.gray.600"),
               fontWeight: "500",
-              fontSize: "1.5rem",
+              fontSize: ".9rem",
               marginBottom: "0.5rem",
             },
             h5: {
               color: theme("colors.gray.600"),
               fontWeight: "500",
-              fontSize: "1.25rem",
+              fontSize: ".9rem",
               marginBottom: "0.5rem",
             },
             h6: {
               color: theme("colors.gray.600"),
               fontWeight: "500",
-              fontSize: "1rem",
+              fontSize: ".9rem",
               marginBottom: "0.5rem",
             },
             p: {