feat: redesign accordions of fcs and ipc

src/components/Cards/Card.tsx

@@ -1,27 +1,46 @@
 'use client';
 
-import { Card, CardBody, CardHeader, Image } from '@nextui-org/react';
+import { Card, CardBody } from '@nextui-org/react';
+import React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { CardProps } from '@/domain/props/CardProps';
 
 export default function CustomCard({ title, content }: CardProps) {
   return (
-    <Card className="w-fit h-auto min-w-[210px] justify-evenly m-2.5 dark:primary white:bg-white">
-      <CardHeader className="flex flex-col items-center p-[5px] overflow-visible">
-        <h2 className="text-large break-words text-pretty"> {title} </h2>
-      </CardHeader>
+    <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white">
       <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
-        <div className="flex flex-row gap-6 overflow-y-auto">
+        <div className="flex flex-row flex-wrap gap-6 overflow-y-auto">
           {content.map((item) => (
-            <div key={uuid()} className="flex flex-col gap-1 items-center">
+            <div key={uuid()} className="flex flex-row gap-4 items-start">
               {item.svgIcon ? (
-                <div className="svg-icon w-[90px]">{item.svgIcon}</div>
-              ) : (
-                <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} />
+                <div className="svg-icon w-[70px] h-[70px] object-contain">{item.svgIcon}</div>
+              ) : item.imageSrc ? (
+                <img alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} />
+              ) : null}
+              <div className="flex flex-col">
+                {title && <h2 className="text-lg text-center">{title}</h2>}
+                {item.text && <h2 className={`text-center ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
+                {item.value && (
+                  <p className="text-sm/[2rem] text-center">
+                    {typeof item.value === 'number' ? `${item.value.toFixed(2)} M` : item.value || 'N/A'}
+                  </p>
+                )}
+              </div>
+              {/* Additional Content (Time-based data) */}
+              {item.changeValues && (
+                <div className="flex flex-row space-x-3">
+                  {item.changeValues.map((delta) => (
+                    <div key={uuid()} className="flex flex-col items-center gap-2">
+                      <img src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" />
+                      <div className="text-center">
+                        <p className="text-sm font-medium whitespace-nowrap">{delta.text}</p>
+                        <p className="text-xs text-gray-600">{delta.timeText}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
               )}
-              <h1 className="text-base text-center mt-2">{item.text}</h1>
-              {item.timeText && <h1 className="text-xs text-[#888888] text-center break-words">{item.timeText}</h1>}
             </div>
           ))}
         </div>

src/components/Map/FcsMap/FcsAccordion.tsx

@@ -0,0 +1,43 @@
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { useMediaQuery } from '@/utils/resolution.ts';
+
+import AccordionContainer from '../../Accordions/AccordionContainer';
+import FcsFoodSecurityAccordion from './FcsFoodSecurityAccordion';
+import FcsMacroEconomicAccordion from './FcsMacroEconomicAccordion';
+
+export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
+  const isMobile = useMediaQuery('(max-width: 700px)');
+  const foodSecurityAccordion = FcsFoodSecurityAccordion({ countryData });
+  const macroEconomicAccordion = FcsMacroEconomicAccordion({ countryData, countryIso3Data });
+
+  return (
+    <>
+      {!isMobile ? (
+        <div className="absolute w-[370px] left-[108px] top-4 z-9999">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={foodSecurityAccordion}
+          />
+        </div>
+      ) : (
+        <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
+          />
+        </div>
+      )}
+      {!isMobile && (
+        <div className="absolute w-[370px] right-[1rem] inset-y-20 z-9999">
+          <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
+        </div>
+      )}
+    </>
+  );
+}

src/components/Map/FcsChoropleth.tsx → src/components/Map/FcsMap/FcsChoropleth.tsx

@@ -11,7 +11,7 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
 import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
 import { MapOperations } from '@/operations/map/MapOperations';
 
-import CountryLoadingLayer from './CountryLoading';
+import CountryLoadingLayer from '../CountryLoading';
 import FscCountryChoropleth from './FcsCountryChoropleth';
 
 export default function FcsChoropleth({