Implement Interactive Globe on Homepage

src/style/modules/_globe.scss

@@ -0,0 +1,187 @@
+// Globe
+.globe {
+    position: relative;
+    z-index: 2;
+    width: 1315px;
+    height: clamp(700px, 100vw, 1315px);
+    overflow: hidden;
+    cursor: grab;
+    user-select: none;
+
+    @include bp (sm) {
+        // height: 130vw;
+    }
+    @include bp (md) {
+        // height: 112vw;
+    }
+    @include bp (xl) {
+        // height: 100vw;
+    }
+
+    // DEBUG //
+    // background: rgba(red, 0.2);
+    // &:after {
+    //     content: "";
+    //     display: block;
+    //     position: absolute;
+    //     top: 50%;
+    //     left: 0;
+    //     background: blue;
+    //     width: 100%;
+    //     height: 2px;
+    //     margin-top: -1px;
+    // }
+    // END DEBUG //
+
+    /*
+    ** Cropped globe
+    */
+    &--cropped {
+        overflow: hidden;
+        height: clamp(300px, 30vw, 500px);
+    }
+
+    /*
+    ** Markers
+    */
+    &__markers {
+        z-index: 210;
+
+        // When dragging
+        &.is-grabbing {
+            cursor: grabbing;
+        }
+
+        // Marker
+        .marker {
+            position: absolute;
+            z-index: 2;
+            cursor: pointer;
+            display: block;
+            top: -4px;
+            left: -4px;
+            padding: 4px;
+            opacity: 1;
+            will-change: transform;
+
+            // Dot
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 8px;
+                height: 8px;
+                background: $color-secondary;
+                border-radius: 100%;
+            }
+
+            span {
+                transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
+            }
+
+            // Hover glow effect
+            &.hover {
+                &:before {
+                    animation: globeMarkerPulse 1s;
+                }
+            }
+
+            // Label
+            &__label {
+                position: absolute;
+                bottom: -16px;
+                left: 16px;
+                color: transparent;
+            }
+            // Location city
+            &__city {
+                font-family: $font-serif;
+                font-size: rem(18px);
+                line-height: 1;
+
+                @include bp (sm) {
+                    font-size: rem(24px);
+                }
+            }
+            // Location country
+            &__country {
+                display: block;
+                opacity: 0.8;
+                font-family: $font-sans;
+                font-size: rem(8px);
+                line-height: 1;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+
+                @include bp (sm) {
+                    font-size: rem(10px);
+                }
+            }
+
+            // Active
+            &.is-active {
+                &, span {
+                    opacity: 1;
+                }
+                .marker {
+                    &__city {
+                        color: $color-secondary;
+                    }
+                    &__country {
+                        color: $color-text;
+                    }
+                }
+            }
+
+            // Is light
+            &.is-light {
+                &.is-active {
+                    .marker {
+                        &__city {
+                            color: #fff;
+                        }
+                        &__country {
+                            color: #d2b7e4;
+                        }
+                    }
+                }
+            }
+
+            // Left positioned
+            &.is-left {
+                .marker {
+                    &__label {
+                        left: auto;
+                        right: 32px;
+                    }
+                    &__country {
+                        text-align: right;
+                    }
+                }
+            }
+
+            // Marker is close to another one
+            // Show the marker infos only on hover
+            &.is-close {
+                // Dot
+                &:before {
+                    width: 7px;
+                    height: 7px;
+                }
+                // Label
+                .marker__label {
+                    opacity: 0;
+                }
+
+                // Show labels on hover
+                &:hover {
+                    .marker__label {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+}