update App.js and src/components/CardTrelloDesign/index.js

src/App.js

@@ -140,14 +140,14 @@ function App() {
         {/* <CardHolder /> */}
         {/* <UploadFile /> */}
         {/* <BarChartApex /> */}
-        <OutlineInput />
+        {/* <OutlineInput /> */}
         {/* <ButtonNewDesign /> */}
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        <PopupCard />
+        {/* <PopupCard /> */}
         {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         {/* <SelectYear /> */}

src/components/CardTrelloDesign/index.js

@@ -1,11 +1,12 @@
 import React from "react";
+import ButtonNewDesign from "../ButtonNewDesign";
 import CircleInCircle from "../CircleInCircle";
 
 const CardTrelloDesign = () => {
   return (
-    <div className="w-96 mx-auto bg-white mt-10 rounded shadow p-2">
+    <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
-      <div className="flex flex-row">
+      <div className="flex flex-row justify-between items-center">
         {/* right */}
         <CircleInCircle
           parentWidth={"w-6"}
@@ -16,8 +17,47 @@ const CardTrelloDesign = () => {
           childBg={"bg-[#FF0000]"}
         />
         {/* left */}
-        <div></div>
+        <div className="flex flex-row gap-x-1 items-center">
+          <ButtonNewDesign
+            bgColor={"bg-[#FF0A3C]"}
+            bgHoverColor={"bg-transparent"}
+            border={"border-none"}
+            padding={"p-2"}
+            fontSize={"text-xs"}
+            borderRadius={"rounded-md"}
+            icon={false}
+            text={"رابط کاربری"}
+          />
+          <ButtonNewDesign
+            bgColor={"bg-[#0AABFF]"}
+            bgHoverColor={"bg-transparent"}
+            border={"border-none"}
+            padding={"p-2"}
+            fontSize={"text-xs"}
+            borderRadius={"rounded-md"}
+            icon={false}
+            text={"فرانت اند"}
+          />
+          <ButtonNewDesign
+            bgColor={"bg-[#C7FF0A]"}
+            bgHoverColor={"bg-transparent"}
+            border={"border-none"}
+            padding={"p-2"}
+            fontSize={"text-xs"}
+            borderRadius={"rounded-md"}
+            icon={false}
+            text={"بک اند"}
+          />
+        </div>
       </div>
+      {/* middle */}
+      <p
+        style={{ color: "#00253A" }}
+        className="text-sm leading-6 text-justify mt-3"
+      >
+        طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
+        پروژه دانوین
+      </p>
     </div>
   );
 };