add discount component

src/lib/components/Discount.svelte

@@ -0,0 +1,82 @@
+<script lang='ts'>
+
+import { onMount } from 'svelte';
+
+
+let targetDate = new Date("2024-07-03");
+
+let days = '-';
+let hours = '-';
+let minutes = '-';
+let seconds = '-';
+
+const updateTime = () => {
+  // Get the current time in the Berlin timezone
+  const berlinTimeZone = 'Europe/Berlin';
+  const berlinCurrentTime = new Date().toLocaleString('en-US', { timeZone: berlinTimeZone });
+  const currentTime = new Date(berlinCurrentTime);
+
+  // Calculate the time difference between the current time and the target date
+  const timeDiff = targetDate - currentTime;
+
+  // Calculate the remaining days, hours, minutes, and seconds
+  const totalSeconds = Math.floor(timeDiff / 1000);
+  seconds = totalSeconds % 60;
+  minutes = Math.floor((totalSeconds % 3600) / 60);
+  hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
+  days = Math.floor(totalSeconds / (3600 * 24));
+};
+
+
+onMount(async () => {
+
+const interval = setInterval(updateTime, 1000);
+
+return () => {
+clearInterval(interval);
+};
+
+
+});
+
+
+</script>
+
+
+
+<div class="lg:max-w-md w-full bg-primary p-4 rounded-none sm:rounded-lg shadow-md m-auto">
+    <div class="container bg-primary p-4 mt-4">
+      <h2 class="text-2xl font-bold text-white">75% OFF Your Annual Subscription!</h2>
+    </div>
+    <div class="container ">
+      <p class="text-white font-bold text-xl">
+        Use Promo Code: <span class="font-extrabold text-[#FFF374]">SUMMER75</span>
+      </p>
+      <div class="grid grid-flow-col gap-5 text-[#FFF374] font-bold text-center m-auto auto-cols-max justify-center mt-6">
+        <div class="flex flex-col text-xs">
+          <span class="countdown font-mono text-xl sm:text-2xl">
+            <span style="--value:{days};"></span>
+          </span>
+          days
+        </div> 
+        <div class="flex flex-col text-xs">
+          <span class="countdown font-mono text-xl sm:text-2xl">
+            <span style="--value:{hours};"></span>
+          </span>
+          hours
+        </div> 
+        <div class="flex flex-col text-xs">
+          <span class="countdown font-mono text-xl sm:text-2xl">
+            <span style="--value:{minutes};"></span>
+          </span>
+          min
+        </div> 
+        <div class="flex flex-col text-xs">
+          <span class="countdown font-mono text-xl sm:text-2xl">
+            <span style="--value:{seconds};"></span>
+          </span>
+          sec
+        </div>
+      </div>
+    </div>
+</div>

src/routes/+page.svelte

@@ -1,8 +1,6 @@
-<script lang='ts'>
+<script lang='ts'>  
-
-  
   import { userRegion, numberOfUnreadNotification} from '$lib/store';
-
+  import Discount from '$lib/components/Discount.svelte';
 
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
   let apiURL;
@@ -22,8 +20,6 @@
   const frontendStars = data?.getFrontendStars;
   const backendStars = data?.getBackendStars;
 
-
-
 </script>
   
   
@@ -124,15 +120,19 @@
                                     </div>
 
                                     </div>
-                  
+                                    
 
+                                    <Discount />
+
+                                  </div>
                                      
               
                                 </div>
                                 <!-- End Column -->
 
+                            
 
-                                <h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold sm:mt-10">
+                                <h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold mt-10">
                                   Explore High Quality Datasets
                                 </h1>
                                 <div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">