map link

5 files changed, 40 insertions, 53 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 0087e350..e94f3d7a 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -90,6 +90,17 @@
     >
       {@html $t("about.locations.description")}
     </p>
-    <LocationsMap {locations} />
+    <!-- <LocationsMap {locations} /> -->
+    <a href="/map">
+    <div class="relative">
+      <img src="/map.png" class="mx-auto" />
+
+      <button
+        class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80 absolute left-1/2 top-1/2 text-2xl"
+      >
+        View map
+      </button>
+    </div>
+    </a>
   </div>
 {/if}
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b41b1a73..9996df10 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -214,33 +214,27 @@
   onDestroy(() => map && map.remove());
 </script>
 
-<div class="container mx-auto p-2 space-y-5">
-  <div class="flex w-full h-[60vh]" id="map" bind:this={mapWrapper}>
-    <div
-      id="map-container"
-      class="mx-auto h-full w-full z-0"
-      bind:this={mapContainer}
-    />
-    <div class="relative">
-      <div class="flex absolute flex top-2 right-2 gap-2">
-        <button
-          class="rounded-full border-2 border-black bg-white w-10 h-10"
-          on:click={toggle}
-        >
-          {#if timeout}
-            <Icon icon="pause" style="w-4 m-auto" />
-          {:else}
-            <Icon icon="play" style="w-4 m-auto" />
-          {/if}
-        </button>
-        <button
-          class="rounded-full border-2 border-black bg-white w-10 h-10"
-          on:click={full}
-        >
-          <Icon icon="full" style="w-4 m-auto" />
-        </button>
-      </div>
-    </div>
+
+<div class="w-screen h-screen flex" id="map" bind:this={mapWrapper}>
+  <div
+                                  id="map-container"
+                                  class="mx-auto h-full w-full z-0"
+                                  bind:this={mapContainer}
+                                  />
+                                  <div class="relative">
+                                    <div class="flex absolute flex top-2 right-2 gap-2">
+                                      <button
+                                         class="rounded-full border-2 border-black bg-white w-10 h-10"
+                                         on:click={toggle}
+                                         >
+                                         {#if timeout}
+                                           <Icon icon="pause" style="w-4 m-auto" />
+                                         {:else}
+                                           <Icon icon="play" style="w-4 m-auto" />
+                                         {/if}
+                                      </button>
+                                    </div>
+                                  </div>
   </div>
 
   <!-- <div class="hidden lg:grid grid-cols-3 justify-items-center"> -->
@@ -253,7 +247,7 @@
   <!-- 		> -->
   <!-- 	{/each} -->
   <!-- </div> -->
-</div>
+
 
 <style>
   #map:fullscreen,
diff --git a/src/locales/en.json b/src/locales/en.json
index bede56ad..f29c8d29 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -20,7 +20,7 @@
 		},
 		"locations": {
 			"header": "Locations",
-			"description": "Here are some businesses that are accepting bitcoin with Coinos. We hope that yours will be next!"
+			"description": "Over 500 businesses worldwide are accepting bitcoin with Coinos. We hope that yours will be next!"
 		}
 	},
 	"error": {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f1158391..150d29b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,7 @@
   import FaqCard from "$comp/FaqCard.svelte";
   import Image from "$comp/Image.svelte";
   import Footer from "$comp/Footer.svelte";
+  import About from "$comp/About.svelte";
 
   import { locale, t } from "$lib/translations";
   import { onDestroy, onMount, tick } from "svelte";
@@ -28,19 +29,9 @@
   let loaded;
 
   let observer;
-  let isIntersecting = false;
 
-  let About;
   onMount(async () => {
-    observer = new IntersectionObserver(async (entries) => {
-      About = (await import("$comp/About.svelte")).default;
-      isIntersecting = isIntersecting || entries[0].isIntersecting;
-    });
-
     loaded = true;
-
-    await tick();
-    observer.observe(document.getElementById("faq"));
   });
 
   onDestroy(() => (loaded = false));
@@ -103,9 +94,7 @@
       <div bind:this={about} />
     </div>
 
-    {#if isIntersecting}
-      <About />
-    {/if}
+    <About />
   </main>
 
   <Footer />
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index 53cd8bdc..c307826e 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -6,14 +6,7 @@
   let { locations } = data;
 </script>
 
-<div class="pt-4">
-  <div class="w-[243px] mx-auto mb-4">
-    <a href="/">
-      <Icon icon="logo" />
-    </a>
-  </div>
-
-  <div class="flex justify-center items-center">
-    <LocationsMap {locations} />
-  </div>
+<div class="h-screen w-screen">
+<LocationsMap {locations} />
 </div>
+