feat: interactive globe

app/components/device-detail/entry-logs.tsx

@@ -48,7 +48,7 @@ export default function EntryLogs({
               <Activity className="w-5 h-5" />
             </div>
             <div className="flex-grow">
-              <p className="text-sm font-medium mb-2">{entryLogs[0].content}</p>
+              <p className="text-sm font-medium mb-2">{entryLogs[entryLogs.length -1].content}</p>
               <div className="flex items-center text-xs text-muted-foreground">
                 <Clock className="w-3 h-3 mr-1" />
                 {new Date(entryLogs[0].createdAt).toLocaleString()}

app/components/landing/footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="w-full bg-white px-4 text-gray-300 dark:bg-black dark:text-gray-100 sm:p-6 lg:text-lg">
+    <footer id="footer" className="w-full bg-white px-4 text-gray-300 dark:bg-black dark:text-gray-100 sm:p-6 lg:text-lg">
       <hr className="my-6 border-gray-300 dark:border-gray-100 sm:mx-auto lg:my-8" />
       <div className="mx-auto w-full max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
         <span className="text-sm text-gray-500 dark:text-gray-400 sm:text-center">

app/components/landing/globe.client.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Globe from "react-globe.gl";
+
+interface Device {
+  id: string;
+  name: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface GlobeComponentProps {
+  latestDevices: Device[];
+}
+
+export const GlobeComponent = ({ latestDevices }: GlobeComponentProps) => {
+  const globeEl = useRef<any>(null);
+
+  const colorInterpolator = (t: number) =>
+    `rgba(${50 + Math.floor(t * 50)}, ${100 + Math.floor(t * 100)}, 255, ${Math.sqrt(1 - t)})`;
+
+  // Transform latestDevices into the format required by Globe's ringsData
+  const sensorData = latestDevices.map((device) => ({
+    lat: device.latitude,
+    lng: device.longitude,
+    maxR: 10,
+    propagationSpeed: 5,
+    repeatPeriod: 1000,
+  }));
+
+  useEffect(() => {
+    if (globeEl.current) {
+      globeEl.current.controls().autoRotate = true;
+      globeEl.current.controls().autoRotateSpeed = 1.0;
+      globeEl.current.controls().enableZoom = false;
+    }
+  }, []);
+
+  return (
+    <Globe
+      ref={globeEl}
+      globeImageUrl="//unpkg.com/three-globe/example/img/earth-day.jpg"
+      bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
+      backgroundColor="rgba(0, 0, 0, 0)"
+      width={500}
+      height={500}
+      ringsData={sensorData}
+      ringColor={() => colorInterpolator}
+      ringMaxRadius="maxR"
+      ringPropagationSpeed="propagationSpeed"
+      ringRepeatPeriod="repeatPeriod"
+    />
+  );
+};

app/components/landing/header.tsx → app/components/landing/header/header.tsx

@@ -1,7 +1,7 @@
 import { Link } from "@remix-run/react";
 import { useState } from "react";
+import { ModeToggle } from "../../mode-toggle";
 import LanguageSelector from "./language-selector";
-import { ModeToggle } from "../mode-toggle";
 
 const links = [
   {
@@ -34,8 +34,8 @@ export default function Header() {
   const [openMenu, setOpenMenu] = useState(false);
 
   return (
-    <nav className="relative z-50 mx-auto flex max-w-7xl justify-between px-2 py-2 dark:border-gray-300 dark:bg-black sm:px-6 md:py-8 lg:px-8">
-      <div className="container z-50 mx-auto flex flex-wrap items-center justify-between font-serif">
+    <nav id="header" className="relative z-50 h-16 py-6 mx-auto flex max-w-7xl justify-between dark:border-gray-300 dark:bg-black">
+      <div className="container z-50 mx-auto flex flex-wrap items-center justify-between font-serif px-4">
         {/* Osem Logo*/}
         <div className="flex max-w-screen-xl flex-wrap items-center justify-between">
           {/* Osem Logo*/}

app/components/landing/header/language-selector.tsx

@@ -0,0 +1,32 @@
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useState } from "react";
+import i18next from "i18next";
+import type { loader } from "~/root";
+import { Button } from "~/components/ui/button";
+
+export default function LanguageSelector() {
+  const data = useLoaderData<typeof loader>();
+  const fetcher = useFetcher();
+  const [locale, setLocale] = useState(data.locale || "en");
+
+  const toggleLanguage = () => {
+    const newLocale = locale === "en" ? "de" : "en"; // Toggle between "en" and "de"
+    setLocale(newLocale);
+    i18next.changeLanguage(newLocale); // Change the language in the app
+    fetcher.submit(
+      { language: newLocale },
+      { method: "post", action: "/action/set-language" }, // Persist the new language
+    );
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleLanguage}
+      className="hover:bg-transparent dark:hover:text-white hover:text-black"
+    >
+      {locale === "de" ? <p>DE</p> : <p>EN</p>}
+    </Button>
+  );
+}

app/components/landing/connect.tsx → app/components/landing/sections/connect.tsx

@@ -3,8 +3,8 @@ import { BookA, Wrench } from "lucide-react";
 export default function Connect() {
   return (
     <section
-      id="connect-section"
-      className="flex justify-between mx-32 gap-20 border-t border-gray-200 py-20"
+      id="connect"
+      className="h-full flex justify-center items-center gap-20 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">
         <div id="title" className="text-2xl font-semibold">

app/components/landing/features-carousel.tsx → app/components/landing/sections/features-carousel.tsx

@@ -43,7 +43,7 @@ function getZIndex({
 
 export default function FeaturesCarousel({ data }: FeaturesProps) {
   const [[activeIndex, direction], setActiveIndex] = useState<[number, number]>(
-    [0, 0]
+    [0, 0],
   );
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
   const [isMobileScreen, setIsMobileScreen] = useState(false);

app/components/landing/features.tsx → app/components/landing/sections/features.tsx

@@ -11,8 +11,8 @@ import {
 export default function Features() {
   return (
     <section
-      id="features-section"
-      className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
+      id="features"
+      className="flex justify-between gap-10"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">
         <div id="title" className="text-2xl font-semibold">

app/components/landing/integrations.tsx → app/components/landing/sections/integrations.tsx

@@ -3,8 +3,8 @@ import { ArrowUpDown, RadioTower, Unplug } from "lucide-react";
 export default function Integrations() {
   return (
     <section
-      id="integrations-section"
-      className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
+      id="integrations"
+      className="flex justify-between gap-10"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">
         <div id="title" className="text-2xl font-semibold">

app/components/landing/partners.tsx → app/components/landing/sections/partners.tsx

@@ -8,16 +8,16 @@ type PartnersProps = {
 export default function Partners({ data }: PartnersProps) {
   return (
     <div
-      id="partners-section"
-      className="flex h-full min-h-full items-center justify-center text-xl text-gray-300 dark:text-gray-100"
+      id="partners"
+      className="flex h-full items-center justify-center text-xl text-gray-300 dark:text-gray-100"
     >
       <div className="flex h-full w-5/6 flex-col justify-evenly">
         <div className="flex items-center justify-center pb-10">
           <p className="dark:text-blue-200 font-serif text-6xl font-black text-blue-100 subpixel-antialiased">
             Partners
           </p>
         </div>
-        <div className="flex flex-wrap items-center justify-center">
+        <div className="flex items-center justify-center">
           {data.map((partner, index) => {
             return (
               <motion.div