added cat section

src/components/Digikala/Categories.js

@@ -7,11 +7,12 @@ import pindo from "./pindo.png";
 import mamoriat from "./mamoriat.png";
 import plus from "./plus.png";
 import club from "./club.png";
+import more from "./more2.svg";
 
 const Categories = ({ items }) => {
   return (
     <section className="my-10 w-7/12 mx-auto">
-      <div className="flex flex-row items-center justify-between bg-red-200 ">
+      <div className="flex flex-row items-center justify-between">
         {items.slice(0, 7).map((item, index) => (
           <div
             className="flex flex-col items-center justify-center cursor-pointer"
@@ -21,8 +22,17 @@ const Categories = ({ items }) => {
             <span className="text-xs mt-3">{item.title}</span>
           </div>
         ))}
-        <div className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}>
-          iran
+        <div
+          // className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}
+          className="flex flex-col items-center justify-center "
+        >
+          <div
+            style={{ background: "#f0f0f1" }}
+            className="cursor-pointer rounded-full w-14 h-14 p-2 flex flex-col items-center justify-center"
+          >
+            <img src={more} className="w-8 rotate-90" />
+          </div>
+          <span className="text-xs mt-3">بیشتر</span>{" "}
         </div>
       </div>
     </section>

src/components/Digikala/Offer.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+import leftArrow from "./white-left-arrow.svg";
+import General from "./General.png";
+
+const Offer = () => {
+  return (
+    <section
+      className="my-10 w-7/12 mx-auto rounded-2xl p-5"
+      style={{ backgroundColor: "#ef3a4f" }}
+    >
+      <div className="bg-orange-300">
+        {/* right */}
+        <div className="flex flex-col items-center justify-center bg-yellow-300">
+          <span className="text-base text-center text-white font-bold">
+            پیشنهاد
+            <br />
+            شگفت
+            <br />
+            انگیز
+          </span>
+          <img src={General} className="w-28 my-2" />
+          <button className="text-sm text-white flex flex-row items-center">
+            مشاهده همه
+            <img src={leftArrow} className="w-3 mr-1" />
+          </button>
+        </div>
+        {/* left */}
+        <div className="flex-1 bg-blue-300"></div>
+      </div>
+    </section>
+  );
+};
+
+export default Offer;

src/components/Digikala/index.js

@@ -2,12 +2,14 @@ import React from "react";
 import ImageSlider from "./ImageSlider";
 import { SliderData } from "./SliderData";
 import Categories from "./Categories";
+import Offer from "./Offer";
 
 const Digikala = () => {
   return (
     <div>
       <ImageSlider slides={SliderData} />
       <Categories />
+      <Offer />
     </div>
   );
 };

src/components/Digikala/more2.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
+    <g id="more">
+      <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
+      <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
+      <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Digikala/white-left-arrow.svg

@@ -0,0 +1,6 @@
+<svg id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" xmlns="http://www.w3.org/2000/svg" width="33.524" height="33.524" viewBox="0 0 33.524 33.524">
+  <g id="arrow-left" transform="translate(0 0)">
+    <path id="Vector" d="M9.914,22.126.807,13.018a2.774,2.774,0,0,1,0-3.911L9.914,0" transform="translate(11.038 5.699)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H33.524V33.524H0Z" transform="translate(33.524 33.524) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/Digikala/white-right-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.14" height="37.14" viewBox="0 0 37.14 37.14">
+  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(401.14 289.14) rotate(180)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M10.983,24.512.894,14.423a3.073,3.073,0,0,1,0-4.333L10.983,0" transform="translate(12.229 6.314)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H37.14V37.14H0Z" transform="translate(37.14 37.14) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>