From be2cab7c9ee9930990d6f5aed9252acf48e8e0c3 Mon Sep 17 00:00:00 2001
From: Ra <rkazoobies@gmail.com>
Date: Wed, 20 Aug 2025 12:24:56 -0700
Subject: [PATCH] update

---
 components/figma/EnhancedFigmaQuestion.tsx | 62 +++++++++++++---------
 components/figma/FigmaAlert.tsx            |  8 +--
 components/figma/FigmaMultipleChoice.tsx   |  8 +--
 components/figma/FigmaProgress.tsx         | 16 +++---
 components/figma/Sidebar.tsx               | 47 +++++++++-------
 5 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/components/figma/EnhancedFigmaQuestion.tsx b/components/figma/EnhancedFigmaQuestion.tsx
index 07b1c03..1a9e176 100644
--- a/components/figma/EnhancedFigmaQuestion.tsx
+++ b/components/figma/EnhancedFigmaQuestion.tsx
@@ -82,12 +82,12 @@ export const EnhancedFigmaQuestion: React.FC<FigmaQuestionProps> = ({
             if (i < currentStep - 1) {
                 // Completed steps - elongated orange
                 dots.push(
-                    <div key={i} className="w-6 h-1 bg-Brand-Orange rounded-3xl" />
+                    <div key={i} className="w-6 h-1 bg-[--Brand-Orange] rounded-3xl" />
                 );
             } else if (i === currentStep - 1) {
                 // Current step - elongated orange
                 dots.push(
-                    <div key={i} className="w-6 h-1 bg-Brand-Orange rounded-3xl" />
+                    <div key={i} className="w-6 h-1 bg-[--Brand-Orange] rounded-3xl" />
                 );
             } else {
                 // Future steps - small gray circles
@@ -160,7 +160,7 @@ export const EnhancedFigmaQuestion: React.FC<FigmaQuestionProps> = ({
                             data-show-icon-right="false"
                             data-show-text="true"
                             data-size="Big"
-                            className={`h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden ${backDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[--Neutrals-NeutralSlate200]'}`}
+                            className={`h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate50] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden ${backDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[--Neutrals-NeutralSlate200]'}`}
                             onClick={!backDisabled ? onBack : undefined}
                         >
                             <div className="px-1 flex justify-center items-center">
@@ -230,28 +230,38 @@ export const FigmaQuestionCard: React.FC<FigmaQuestionCardProps> = ({
     className = ""
 }) => {
     return (
-        <div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-end items-end gap-4">
-            <div className="self-stretch inline-flex justify-start items-start gap-3">
-                <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">Q</div>
-                <div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
-                    <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-xl font-semibold font-['Inter'] leading-loose">
-                        {question}
-                    </div>
-                    {description && (
-                        <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">
-                            {description}
-                        </div>
-                    )}
-                </div>
-            </div>
-            <div className="self-stretch h-0 rotate-90 shadow-[0px_1.5px_1.5px_0px_rgba(255,255,255,1.00)] outline outline-1 outline-offset-[-0.50px] border-[--Neutrals-NeutralSlate200]" />
-            <div className="self-stretch inline-flex justify-start items-center gap-3">
-                <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
-                <div className="flex-1">
-                    {children}
-                </div>
-            </div>
+        // <div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-grow flex-col gap-4">
+        //     <div className="self-stretch inline-flex justify-start items-center gap-3">
+        //         <div className="flex-1">
+        //             {children}
+        //         </div>
+        //     </div>
+        // </div>
+        <div className="self-stretch justify-center flex items-center gap-3">
+            {children}
         </div>
+        // <div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-end items-end gap-4">
+        //     {/* <div className="self-stretch inline-flex justify-start items-start gap-3">
+        //         <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">Q</div>
+        //         <div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
+        //             <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-xl font-semibold font-['Inter'] leading-loose">
+        //                 {question}
+        //             </div>
+        //             {description && (
+        //                 <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">
+        //                     {description}
+        //                 </div>
+        //             )}
+        //         </div>
+        //     </div> */}
+        //     <div className="self-stretch h-0 rotate-90 shadow-[0px_1.5px_1.5px_0px_rgba(255,255,255,1.00)] outline outline-1 outline-offset-[-0.50px] border-[--Neutrals-NeutralSlate200]" />
+        //     <div className="self-stretch inline-flex justify-start items-center gap-3">
+        //         <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
+        //         <div className="flex-1">
+        //             {children}
+        //         </div>
+        //     </div>
+        // </div>
     );
 };
 
@@ -273,8 +283,8 @@ export const EnhancedFigmaInput: React.FC<EnhancedFigmaInputProps> = ({
     rows = 4,
     className = ""
 }) => {
-    const baseClasses = "self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5 overflow-hidden";
-    const inputClasses = "flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal bg-transparent border-none outline-none resize-none";
+    const baseClasses = "self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate50] rounded-xl inline-flex justify-start items-start gap-2.5 overflow-hidden";
+    const inputClasses = "flex self-stretch w-100 text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal bg-transparent border-none outline-none resize-none";
 
     if (multiline) {
         return (
diff --git a/components/figma/FigmaAlert.tsx b/components/figma/FigmaAlert.tsx
index a96e523..0337d4a 100644
--- a/components/figma/FigmaAlert.tsx
+++ b/components/figma/FigmaAlert.tsx
@@ -18,7 +18,7 @@ export const FigmaAlert: React.FC<FigmaAlertProps> = ({
 }) => {
     const getBorderColor = () => {
         switch (variant) {
-            case 'success': return 'bg-Other-Green';
+            case 'success': return 'bg-[--Other-Green]';
             case 'error': return 'bg-red-500';
             case 'warning': return 'bg-yellow-500';
             default: return 'bg-blue-500';
@@ -26,10 +26,10 @@ export const FigmaAlert: React.FC<FigmaAlertProps> = ({
     };
 
     return (
-        <div className={`p-4 relative bg-Other-White rounded-lg shadow-[0px_2px_2px_-1px_rgba(10,13,18,0.04)] shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.03)] shadow-[0px_12px_16px_-4px_rgba(10,13,18,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-center items-center gap-2.5 overflow-hidden ${className}`}>
-            <div className="w-96 max-w-96 justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
+        <div className={`p-4 relative bg-white rounded-lg shadow-[0px_2px_2px_-1px_rgba(10,13,18,0.04)] shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.03)] shadow-[0px_12px_16px_-4px_rgba(10,13,18,0.08)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-center items-center gap-2.5 overflow-hidden ${className}`}>
+            <div className="w-96 max-w-96 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
                 {title}
-                {children && <div className="mt-1 text-xs text-Neutrals-NeutralSlate600">{children}</div>}
+                {children && <div className="mt-1 text-xs text-[--Neutrals-NeutralSlate600]">{children}</div>}
             </div>
 
             {onClose && (
diff --git a/components/figma/FigmaMultipleChoice.tsx b/components/figma/FigmaMultipleChoice.tsx
index 4ec5c8a..41af6be 100644
--- a/components/figma/FigmaMultipleChoice.tsx
+++ b/components/figma/FigmaMultipleChoice.tsx
@@ -21,14 +21,14 @@ export const FigmaMultipleChoice: React.FC<FigmaMultipleChoiceProps> = ({
                     <div
                         key={index}
                         className={`flex-1 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${isSelected
-                                ? 'bg-Neutrals-NeutralSlate800'
-                                : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
+                            ? 'bg-[--Neutrals-NeutralSlate800]'
+                            : 'bg-[--Neutrals-NeutralSlate100] hover:bg-[--Neutrals-NeutralSlate200]'
                             }`}
                         onClick={() => onSelect?.(option)}
                     >
                         <div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${isSelected
-                                ? 'text-Neutrals-NeutralSlate0'
-                                : 'text-Neutrals-NeutralSlate950'
+                            ? 'text-[--Neutrals-NeutralSlate0]'
+                            : 'text-[--Neutrals-NeutralSlate950]'
                             }`}>
                             {option}
                         </div>
diff --git a/components/figma/FigmaProgress.tsx b/components/figma/FigmaProgress.tsx
index 2bcd9ca..80ceb25 100644
--- a/components/figma/FigmaProgress.tsx
+++ b/components/figma/FigmaProgress.tsx
@@ -15,20 +15,20 @@ interface FigmaProgressProps {
 
 const ProgressStep: React.FC<ProgressStepProps> = ({ number, title, isActive = false, isCompleted = false }) => {
     const stepClasses = isActive
-        ? "p-2 bg-Main-BG-Gray-50 rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
-        : "p-2 bg-Other-White rounded-[10px]";
+        ? "p-2 bg-[--Neutrals-NeutralSlate50] rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
+        : "p-2 bg-white rounded-[10px]";
 
     const numberClasses = isActive || isCompleted
-        ? "h-5 p-0.5 bg-Brand-Orange rounded-[999px]"
-        : "h-5 p-0.5 bg-bg-white-0 rounded-[999px] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200";
+        ? "h-5 p-0.5 bg-[--Brand-Orange] rounded-[999px]"
+        : "h-5 p-0.5 bg-[--Neutrals-NeutralSlate0] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200]";
 
     const numberTextClasses = isActive || isCompleted
-        ? "w-4 text-center justify-start text-Neutrals-NeutralSlate0 text-xs font-medium font-['Inter'] leading-none"
-        : "w-4 text-center justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none";
+        ? "w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none"
+        : "w-4 text-center justify-start text-[--Neutrals-NeutralSlate600] text-xs font-medium font-['Inter'] leading-none";
 
     const titleClasses = isActive
-        ? "flex-1 justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight"
-        : "flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-normal font-['Inter'] leading-tight";
+        ? "flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight"
+        : "flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-normal font-['Inter'] leading-tight";
 
     return (
         <div className={`self-stretch inline-flex justify-start items-center gap-2.5 overflow-hidden ${stepClasses}`}>
diff --git a/components/figma/Sidebar.tsx b/components/figma/Sidebar.tsx
index f8169fe..b007ef6 100644
--- a/components/figma/Sidebar.tsx
+++ b/components/figma/Sidebar.tsx
@@ -96,14 +96,14 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
     };
 
     return (
-        <div className="w-64 h-[810px] max-w-64 min-w-64 px-3 pt-4 pb-3 bg-Neutrals-NeutralSlate0 border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
+        <div className="w-64 max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-between items-center overflow-hidden">
             {/* Header Section */}
             <div className="self-stretch flex flex-col justify-start items-start gap-5">
                 {/* Company Selector */}
-                <div className="w-60 pl-2 pr-4 py-2 bg-Neutrals-NeutralSlate0 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
+                <div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-between items-center overflow-hidden">
                     <div className="flex-1 flex justify-start items-center gap-2">
                         <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
-                            <div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
+                            <div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
                                 <div className="left-0 top-0 absolute">
                                     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <rect width="32" height="32" fill="url(#paint0_linear_731_19280)" />
@@ -147,7 +147,7 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
                             </div>
                         </div>
                         <div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
-                            <div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">{companyName}</div>
+                            <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">{companyName}</div>
                         </div>
                     </div>
                     <div>
@@ -165,8 +165,8 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
                                 key={index}
                                 onClick={() => handleNavClick(item.path)}
                                 className={`w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer ${item.active
-                                        ? 'bg-Neutrals-NeutralSlate100'
-                                        : 'hover:bg-Neutrals-NeutralSlate50'
+                                    ? 'bg-[--Neutrals-NeutralSlate100]'
+                                    : 'hover:bg-[--Neutrals-NeutralSlate50]'
                                     }`}
                             >
                                 <div className="relative">
@@ -175,8 +175,8 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
                                     })}
                                 </div>
                                 <div className={`justify-start text-sm font-medium font-['Inter'] leading-tight ${item.active
-                                        ? 'text-Neutrals-NeutralSlate950'
-                                        : 'text-Neutrals-NeutralSlate500'
+                                    ? 'text-[--Neutrals-NeutralSlate950]'
+                                    : 'text-[--Neutrals-NeutralSlate500]'
                                     }`}>
                                     {item.label}
                                 </div>
@@ -191,30 +191,39 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
                 {/* Settings */}
                 <div
                     onClick={() => handleNavClick("/settings")}
-                    className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-Neutrals-NeutralSlate50"
+                    className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-[--Neutrals-NeutralSlate50]"
                 >
                     <div className="relative">
                         {settingsIcon}
                     </div>
-                    <div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
+                    <div className="flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
                 </div>
 
                 {/* Build Report Card */}
-                <div className="self-stretch bg-Neutrals-NeutralSlate0 rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
+                <div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start overflow-hidden">
                     <div className="self-stretch h-24 relative">
-                        <div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
-                        <div className="w-60 p-3 left-[18.12px] top-[42.51px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
-                        <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
+                        <div className="self-stretch flex flex-col justify-start items-start gap-2">
+                            <div className="self-stretch h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                        </div>
+                        <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
+                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                            <div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                        </div>
+                        <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
+                            <div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                            <div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
+                        </div>
                     </div>
                     <div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
-                        <div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
-                        <div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
+                        <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
+                        <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
                     </div>
                     <div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
                         <div className="self-stretch inline-flex justify-start items-start gap-2">
                             <div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
                                 <div className="px-1 flex justify-center items-center">
-                                    <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Invite</div>
+                                    <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
                                 </div>
                                 <div>
                                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -222,14 +231,14 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
                                     </svg>
                                 </div>
                             </div>
-                            <div className="flex-1 px-3 py-1.5 bg-Brand-Orange rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
+                            <div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
                                 <div>
                                     <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M8.97203 12.2426L8.02922 13.1854C6.72748 14.4872 4.61693 14.4872 3.31518 13.1854C2.01343 11.8837 2.01343 9.77312 3.31518 8.47138L4.25799 7.52857M12.7433 8.47138L13.6861 7.52857C14.9878 6.22682 14.9878 4.11627 13.6861 2.81452C12.3843 1.51277 10.2738 1.51277 8.97203 2.81452L8.02922 3.75733M6.16729 10.3333L10.834 5.66662" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                     </svg>
                                 </div>
                                 <div className="px-1 flex justify-center items-center">
-                                    <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Copy</div>
+                                    <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Copy</div>
                                 </div>
                             </div>
                         </div>