Add real videos and background to globe

src/components/globe-map/data.ts

@@ -7,14 +7,21 @@ export const markers: MarkerType[] = [
   { id: "Sea surface temp", lat: 0.75, lng: -111.0 },
 ];
 
+export const BACKGROUND_VIDEOS = [
+  "videos/phase-3/bg/tp_global_100km.mp4",
+  "videos/phase-3/bg/cloud_cover_global_100km.mp4",
+  "videos/phase-3/bg/tas_100km.mp4",
+  "videos/phase-3/bg/sst_global_100km.mp4",
+];
+
 export const popupContent = [
   {
     id: "Amazonia",
     title: "Amazon. Brazil",
     subtitle: "Diurnal precipitation cycle",
     description:
       "The diurnal precipitation cycle over the Amazon rainforest highlights the complex interactions and feedbacks between atmosphere and land. The diurnal rainfall, maintained by moisture inflow from the Atlantic ocean into the Amazon basin, arises due to evapotranspiration and moisture recycling from the dense forest. This self-sustained cycle is in turn driven by sharp contrasts in temperature between day and night.",
-    video: "/videos/tp_amazonia_10km.webm",
+    video: "/videos/phase-3/tooltip/tp_amazonia_10km_square.webm",
     legend: {
       image: "/images/home-legend-1.svg",
       low: "0.0 m³/m²",
@@ -27,7 +34,7 @@ export const popupContent = [
     subtitle: "Tropical cyclone track",
     description:
       "Tropical cyclones in the North Atlantic Ocean typically form near the equator and propogate westward, often curving northward as they approach the Caribbean or the east coast of the US. These powerful storms are steered by trade winds and ocean currents, impacting coastal regions with strong winds, heavy rainfall, and storm surges.",
-    video: "/videos/wind_speed_global_10km.webm",
+    video: "/videos/phase-3/tooltip/cloud_cover_10km_square.mp4",
     legend: {
       image: "/images/home-legend-2.svg",
       low: "0%",
@@ -40,7 +47,7 @@ export const popupContent = [
     subtitle: "Diurnal temperature cycle",
     description:
       "The diurnal temperature cycle over the Pyrenees in the Iberian Peninsula describes the significant temperature fluctuations between day and night. During the day, sunlight heats the region, while at night, temperatures drop rapidly due to clear skies and high altitude, creating a marked difference in daily and nightly temperatures.",
-    video: "/videos/tas_10km.webm",
+    video: "videos/phase-3/tooltip/tas_10km_square.webm",
     legend: {
       image: "/images/home-legend-3.svg",
       low: "4º",
@@ -53,7 +60,7 @@ export const popupContent = [
     subtitle: "Ocean eddies and currents",
     description:
       "Ocean eddies and currents off the coast of Ecuador in the Pacific Ocean play a key role in shaping local marine ecosystems. The warm waters of the equatorial current interact with cooler, nutrient-rich upwellings (deep water), creating swirling currents, known as eddies, that support diverse marine life and influence weather patterns.",
-    video: "/videos/sst_10km.webm",
+    video: "videos/phase-3/tooltip/sst_10km_square.webm",
     legend: {
       image: "/images/home-legend-4.svg",
       low: "19º",

src/components/globe-map/globe-group.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from 'react';
 import { Globe } from './globe';
 import Marker from './marker';
 import { useFrame } from '@react-three/fiber';
 import type { markers as MarkerType } from './data';
 import { Group } from 'three';
+import { BACKGROUND_VIDEOS } from './data';
 
 const GlobeGroup = ({ hasMarkers, markers, selectedMarker, setEnabled, setSelectedMarker, rotate, videoMaterial, groupRef }:
   {
@@ -17,6 +19,11 @@ const GlobeGroup = ({ hasMarkers, markers, selectedMarker, setEnabled, setSelect
   }
 ) => {
 
+  const markerBackgroundVideoMaterial = useMemo(() => {
+    if (!hasMarkers || selectedMarker === null) return null;
+    return BACKGROUND_VIDEOS[selectedMarker || 0];
+  }, [selectedMarker, hasMarkers]);
+
   useFrame(() => {
     if (rotate && groupRef.current) {
       groupRef.current.rotation.y += 0.01;
@@ -25,7 +32,7 @@ const GlobeGroup = ({ hasMarkers, markers, selectedMarker, setEnabled, setSelect
 
   return (
     <group position={[0, 0, 0]} ref={groupRef}>
-      <Globe videoMaterial={videoMaterial} />
+      <Globe videoMaterial={markerBackgroundVideoMaterial || videoMaterial} />
       {
         hasMarkers && markers.map((marker, index) => (
           <Marker

src/components/globe-map/popup.tsx

@@ -4,6 +4,26 @@ import { cn } from "@/lib/utils";
 import ArrowRight from '@/svgs/arrow-right.svg';
 import Close from '@/svgs/close.svg';
 import { popupContent } from './data';
+const Corners = () => (
+  <>
+    <div className="absolute -top-1 -left-1">
+      <div className="w-8 h-0.5 bg-white"></div>
+      <div className="h-8 w-0.5 bg-white"></div>
+    </div>
+    <div className="absolute -top-1 -right-1">
+      <div className="w-8 h-0.5 bg-white"></div>
+      <div className="h-8 w-0.5 bg-white absolute right-0"></div>
+    </div>
+    <div className="absolute -bottom-1 -left-1">
+      <div className="w-8 h-0.5 bg-white absolute bottom-0"></div>
+      <div className="h-8 w-0.5 bg-white bottom-0"></div>
+    </div>
+    <div className="absolute -bottom-1 -right-1">
+      <div className="w-8 h-0.5 bg-white"></div>
+      <div className="h-8 w-0.5 bg-white absolute bottom-0 right-0"></div>
+    </div>
+  </>
+);
 
 const Popup = ({ closePopup, setSelectedMarker, index }: {
   closePopup: () => void
@@ -19,12 +39,20 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
       "relative -mt-[140px] -ml-[140px] xl:-ml-[140px]": !isMobile,
       "fixed top-0 xs:left-[calc(50%-250px)] sm:left-[calc(50%-325px)] z-50 px-4 w-full h-full items-center justify-center xs:max-w-[500px] sm:max-w-[650px]": isMobile
     })}>
-    <div className='relative w-full xl:w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
-      <div className="gap-6 flex">
+    <div className={cn('relative w-full xl:w-[662px] h-[350px] pl-8 pr-4 py-8  backdrop-blur-[15px] text-white gap-6 inline-flex',
+      {
+        'bg-white/20': index !== 0,
+        'bg-green-700/60': index === 0
+      }
+    )}>
+      <div className="flex flex-col-reverse xl:flex-row gap-6">
         <div className="justify-center items-center flex">
-          <video className="w-[280px] h-[280px] xl:rounded-[50px]" autoPlay loop muted>
-            <source src={video} type="video/mp4" />
-          </video>
+          <div className="relative w-full h-full">
+            <Corners />
+            <video autoPlay loop muted className="w-[280px] h-[280px]">
+              <source src={video} type="video/mp4" />
+            </video>
+          </div>
         </div>
         <div className="flex-col gap-4 flex">
           <div className="flex-col justify-start items-start gap-2 inline-flex">