shuffle around ui

frontend/app/src/components/GlobeView.tsx

@@ -6,12 +6,16 @@ import type { GlobeMethods } from 'react-globe.gl';
 
 export function GlobeView() {
   const globeRef = useRef<GlobeMethods>(null!);
-  const { setGlobeRef, height } = useGlobe();
+  const { setGlobeRef, height} = useGlobe();
 
   useEffect(() => {
     if (globeRef.current) {
       setGlobeRef(globeRef.current);
     }
+      globeRef.current.pointOfView({lat: 31, lng: -76, altitude: 1.6})
+      globeRef.current.controls().enableZoom = false;
+      globeRef.current.controls().autoRotate = true;
+      globeRef.current.controls().autoRotateSpeed = 0.5;
   }, [setGlobeRef]);
 
   return (

frontend/app/src/hooks/useGlobe.tsx

@@ -25,6 +25,7 @@ export function useGlobe() {
   };
 
 
+
  const globeZoom = (spot: Spot, altitude: number, ms: number) => {
     if (globeRef && spot) {
       globeRef.pointOfView(

frontend/app/src/routes/__root.tsx

@@ -8,7 +8,7 @@ export const Route = createRootRoute({
   component: () => {
     return (
       <QueryClientProvider client={queryClient}>
-        <div className="min-h-screen text-neon">
+        <div className="min-h-screen text-neon font-thin shadow-neon">
           <main className="container mx-auto px-4 py-8">
             <Outlet />
           </main>

frontend/app/src/routes/index.tsx

@@ -1,6 +1,31 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { SpotSelector } from "@/components/SpotSelector";
+import { useGlobe } from "@/hooks/useGlobe";
+import { GlobeView } from "@/components/GlobeView";
+import { SpotList } from "@/components/SpotList";
+import { SearchBar } from "@/components/SearchBar";
 
 export const Route = createFileRoute('/')({
   component: SpotSelector
-});
+});
+
+export function SpotSelector() {
+  const { setHeight } = useGlobe();
+
+
+
+  return (
+    <>
+      <div className="flex flex-col items-center gap-2">
+          <h1 className="text-4xl font-normal text-center pt-2 uppercase" onClick={() => setHeight(2000)}>
+            BODHI CAST
+          </h1>
+          <h3 className="text-center uppercase">
+            Riding the Data Wave to Your Next Break
+          </h3>
+        <GlobeView />
+        <SearchBar />
+        <SpotList />
+      </div>
+    </>
+  );
+}