|  |  | @ -14,10 +14,10 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |       {/* right */} |  |  |  |       {/* right */} | 
			
		
	
		
		
			
				
					
					|  |  |  |       <div className="flex flex-1 flex-col justify-between"> |  |  |  |       <div className="flex flex-1 flex-col justify-between"> | 
			
		
	
		
		
			
				
					
					|  |  |  |         {/* top */} |  |  |  |         {/* 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) => ( |  |  |  |           {processes.map((process, index) => ( | 
			
		
	
		
		
			
				
					
					|  |  |  |             <div |  |  |  |             <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} |  |  |  |               key={index} | 
			
		
	
		
		
			
				
					
					|  |  |  |             > |  |  |  |             > | 
			
		
	
		
		
			
				
					
					|  |  |  |               {process.color && ( |  |  |  |               {process.color && ( | 
			
		
	
	
		
		
			
				
					|  |  | @ -25,9 +25,6 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |                   parentClassName={`${process.color} w-3 h-3`} |  |  |  |                   parentClassName={`${process.color} w-3 h-3`} | 
			
		
	
		
		
			
				
					
					|  |  |  |                   childClassName={false} |  |  |  |                   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> |  |  |  |               <p className="text-xs mr-2">{process.name}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |               <span className="text-xs mr-1">{process.content}</span> |  |  |  |               <span className="text-xs mr-1">{process.content}</span> | 
			
		
	
	
		
		
			
				
					|  |  | @ -35,14 +32,16 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |           ))} |  |  |  |           ))} | 
			
		
	
		
		
			
				
					
					|  |  |  |         </div> |  |  |  |         </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |         {/* middle */} |  |  |  |         {/* middle */} | 
			
		
	
		
		
			
				
					
					|  |  |  |         <div className="flex flex-col justify-center flex-1 p-4 gap-y-4 bg-white"> |  |  |  |         <div className="flex flex-col flex-1 justify-center items-center p-4  bg-white"> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |           <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2> |  |  |  |           <div className="w-[96%] flex flex-col justify-center gap-y-4"> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |           <p className="text-sm text-justify leading-6 text-[#00253A]"> |  |  |  |             <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |             {hint} |  |  |  |             <p className="text-sm text-justify leading-6 text-[#00253A]"> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |           </p> |  |  |  |               {hint} | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             </p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |         </div> |  |  |  |         </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |         {/* bottom */} |  |  |  |         {/* 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) => ( |  |  |  |           {buttons.map((btn, index) => ( | 
			
		
	
		
		
			
				
					
					|  |  |  |             <Button |  |  |  |             <Button | 
			
		
	
		
		
			
				
					
					|  |  |  |               key={index} |  |  |  |               key={index} | 
			
		
	
	
		
		
			
				
					|  |  | @ -57,7 +56,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |         </div> |  |  |  |         </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |       </div> |  |  |  |       </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |       {/* left */} |  |  |  |       {/* 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) => ( |  |  |  |         {options.map((option, j) => ( | 
			
		
	
		
		
			
				
					
					|  |  |  |           <div |  |  |  |           <div | 
			
		
	
		
		
			
				
					
					|  |  |  |             key={j} |  |  |  |             key={j} | 
			
		
	
	
		
		
			
				
					|  |  | 
 |