120 style front page to align with figma design (#201)

* feat(frontend): ✨ responsive, camera follows node, no interaction enables on globe, select satellite on dropdown #120

* frontpage #120

* Change satellitedatatable name #120

* Prettier and lint #120

* Lint and prettier #120

frontend/.env.production

@@ -1,2 +1,2 @@
 # Database url
-HOST_URL=http://backend-app:1337
+HOST_URL=http://localhost:1337

frontend/package.json

@@ -20,6 +20,7 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
         "@strapi/blocks-react-renderer": "^1.0.0",
@@ -28,6 +29,7 @@
         "chartjs-adapter-luxon": "^1.3.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "cmdk": "0.2.0",
         "framer-motion": "^11.0.24",
         "globe.gl": "^2.32.2",
         "gsap": "^3.12.5",

frontend/src/app/page.tsx

@@ -3,9 +3,8 @@ import ColoredSection from "@/components/ui/coloredSection";
 
 import Image from "next/image";
 import Link from "next/link";
-
-import SatelliteFetcher from "@/components/map/SatelliteFetcher";
-import SatelliteDataTable from "@/components/satelliteData/SatelliteDataTable";
+import SatelliteDataTable from "@/components/satelliteData/SatelliteDataTableMultiple";
+import fetchSatelliteData from "@components/map/SatelliteFetcher";
 
 import fetchMostRecentImage from "@/lib/data/fetchMostRecentImage";
 
@@ -16,15 +15,10 @@ export default async function Home() {
         <>
             <div className="grid grid-cols-2">
                 <div className="grid grid-cols-2">
-                    <SatelliteDataTable satName="HYPSO-1" />
-                    <SatelliteDataTable satName="UME (ISS)" />
-                    <SatelliteDataTable satName="STARLINK-1007" />
-                    <SatelliteDataTable satName="VANGUARD 1" />
-                    <SatelliteDataTable satName="MULTIFUNCTION TEST SAT" />
-                    <SatelliteDataTable satName="huh" />
+                    <SatelliteDataTable
+                        fetchSatelliteData={fetchSatelliteData}
+                    />
                 </div>
-
-                <SatelliteFetcher useExampleData={true} />
             </div>
 
             <ColoredSection