update

src/App.js

@@ -33,6 +33,7 @@ import ProductStatusCard from "./components/ProductStatusCard";
 import AdvertisementDesign1 from "./components/Advertisement/design1";
 import AdvertisementDesign2 from "./components/Advertisement/design2";
 import AdvertisementDesign3 from "./components/Advertisement/design3";
+import CourseChapter from "./components/CourseChapter";
 
 function App() {
   return (
@@ -56,7 +57,7 @@ function App() {
         {/* <ContactInfoSection /> */}
         {/* <FooterDesign1 /> */}
         {/* <Testttt /> */}
-        {/* <Design2D /> */}
+        <Design2D />
         {/* <Features /> */}
         {/* <Feedback /> */}
         {/* <Alert /> */}
@@ -68,6 +69,7 @@ function App() {
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
+        <CourseChapter />
       </div>
     </Provider>
   );

src/components/CourseChapter/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const CourseChapter = () => {
+  return (
+    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
+      <div
+        className="rounded py-2 px-4"
+        style={{ backgroundColor: "#196EC033" }}
+      >
+        {/* top */}
+        <div className="flex flex-row items-center justify-between">
+          <div>
+            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
+          </div>
+          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
+            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
+            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
+          </div>
+        </div>
+        {/* divider */}
+        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
+        {/* course title */}
+        <div className="bg-blue-800 rounded">
+          <h2>فصل اول: مباحث جوشش مواد مذاب در مرکز</h2>
+          <p>2:30:13</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CourseChapter;
+
+CourseChapter.defaultProps = {
+  chapters: [
+    {
+      title: "",
+      duration: "",
+      lessons: [{ title: "", duration: "", play: "" }],
+    },
+  ],
+};