feat(set up placeholders for layout): set up placeholders for layout

so it's easier to work on next features

src/components/FunctionalArea/FunctionalArea.component.tsx

+import { TopBar } from '@/components/FunctionalArea/TopBar';
+import { NavBar } from '@/components/FunctionalArea/NavBar';
+import { MapNavigation } from '@/components/FunctionalArea/MapNavigation';
+
+export const FunctionalArea = (): JSX.Element => (
+  <>
+    <div className="absolute top-0 left-0 z-10 w-full">
+      <TopBar />
+    </div>
+    <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
+      <MapNavigation />
+    </div>
+    <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
+      <NavBar />
+    </div>
+  </>
+);

src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx

+export const MapNavigation = (): JSX.Element => <div className="w-full h-10 bg-slate-200">.</div>;

src/components/FunctionalArea/MapNavigation/index.ts

+export { MapNavigation } from './MapNavigation.component';

src/components/FunctionalArea/NavBar/NavBar.component.tsx

+export const NavBar = (): JSX.Element => <div className="w-[88px] min-h-100 bg-slate-700 ">.</div>;

src/components/FunctionalArea/NavBar/index.ts

+export { NavBar } from './NavBar.component';

src/components/FunctionalArea/TopBar/TopBar.component.tsx

+export const TopBar = (): JSX.Element => <div className="w-100 bg-slate-600 h-16">.</div>;

src/components/FunctionalArea/TopBar/index.ts

+export { TopBar } from './TopBar.component';

src/components/FunctionalArea/index.ts

+export { FunctionalArea } from './FunctionalArea.component';

src/components/SPA/MinervaSPA.component.tsx

 import { Map } from '@/components/Map';
+import { FunctionalArea } from '@/components/FunctionalArea';
 
 export const MinervaSPA = (): JSX.Element => (
   <div className="relative">
+    <FunctionalArea />
     <Map />
   </div>
 );