ویریش یک سری از موارد |9

src/components/Card/index.js

@@ -14,10 +14,10 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
       {/* right */}
       <div className="flex flex-1 flex-col justify-between">
         {/* top */}
-        <div className="flex flex-row p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse">
+        <div className="flex items-center p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse">
           {processes.map((process, index) => (
             <div
-              className="flex flex-row flex-1 items-center justify-center flex-grow"
+              className="flex flex-1 items-center justify-center flex-grow"
               key={index}
             >
               {process.color && (
@@ -25,9 +25,6 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
                   parentClassName={`${process.color} w-3 h-3`}
                   childClassName={false}
                 />
-                // <div
-                //   className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
-                // ></div>
               )}
               <p className="text-xs mr-2">{process.name}</p>
               <span className="text-xs mr-1">{process.content}</span>
@@ -35,14 +32,16 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
           ))}
         </div>
         {/* middle */}
-        <div className="flex flex-col justify-center flex-1 p-4 gap-y-4 bg-white">
-          <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
-          <p className="text-sm text-justify leading-6 text-[#00253A]">
-            {hint}
-          </p>
+        <div className="flex flex-col flex-1 justify-center items-center p-4  bg-white">
+          <div className="w-[96%] flex flex-col justify-center gap-y-4">
+            <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
+            <p className="text-sm text-justify leading-6 text-[#00253A]">
+              {hint}
+            </p>
+          </div>
         </div>
         {/* bottom */}
-        <div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded ">
+        <div className="flex flex-row item-center justify-around p-3 bg-[#F8F8F8] rounded ">
           {buttons.map((btn, index) => (
             <Button
               key={index}
@@ -57,7 +56,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
         </div>
       </div>
       {/* left */}
-      <div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4">
+      <div className="flex flex-col justify-center gap-y-4 p-2 bg-white border-r border-blue-400">
         {options.map((option, j) => (
           <div
             key={j}