update

earthpulse · Oct 3, 2024 · 98df9d8 · 98df9d8
1 parent 90abd3e
commit 98df9d8
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 40 deletions.
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -29,51 +29,62 @@
   <!-- <HeroBackground /> -->
   <Hero />
   <div
-    class="w-full max-w-6xl"
-    style="background: url('backgrounds/Group-1170.png') center center/cover"
+    class="bg-gradient-to-br from-white to-[#D6F1EB] w-full flex flex-col items center pt-12"
   >
-    <div class="flex flex-col-reverse lg:flex-row">
-      <div class="w-full lg:flex-grow">
-        <HomeTutorials {tutorials} />
-        <RecentDatasets tags={data.tags} />
-        <PopularDatasets tags={data.tags} />
-        <DatasetsLeaderboard />
-      </div>
-      <div class="w-full lg:w-[300px] p-3">
-        <div
-          class="h-full flex lg:flex-col md:flex-row sm:flex-row flex-col gap-10"
-        >
-          <Events />
-          <div class="mb-10">
-            <h2
-              class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)] uppercase"
-            >
-              Recent posts and news
-            </h2>
-            {#if data.posts.length > 0}
-              {#each data.posts as post}
-                <a class="tex-xs flex flex-col gap-2" href="/blog/{post.slug}">
-                  <p class="text-gray-400">
-                    {format(parseISO(post.date), "MMMM d, yyyy")}
-                  </p>
-                  <p class="font-bold">{post.title}</p>
-                  <p class="text-gray-400">{post.description}</p>
-                  <hr class="my-2 border-t border-[rgb(74,191,167)]" />
-                </a>
-              {/each}
-            {/if}
+    <div
+      class="w-full max-w-6xl mx-auto"
+      style="background: url('backgrounds/Group-1170.png') center center/cover"
+    >
+      <div class="flex flex-col-reverse lg:flex-row">
+        <div class="w-full lg:flex-grow">
+          <HomeTutorials {tutorials} />
+          <RecentDatasets tags={data.tags} />
+          <PopularDatasets tags={data.tags} />
+          <DatasetsLeaderboard />
+        </div>
+        <div class="w-full lg:w-[300px] p-3">
+          <div
+            class="h-full flex lg:flex-col md:flex-row sm:flex-row flex-col gap-10"
+          >
+            <Events />
+            <div class="mb-10">
+              <h2
+                class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)] uppercase"
+              >
+                Recent posts and news
+              </h2>
+              {#if data.posts.length > 0}
+                {#each data.posts as post}
+                  <a
+                    class="tex-xs flex flex-col gap-2"
+                    href="/blog/{post.slug}"
+                  >
+                    <p class="text-gray-400">
+                      {format(parseISO(post.date), "MMMM d, yyyy")}
+                    </p>
+                    <p class="font-bold">{post.title}</p>
+                    <p class="text-gray-400">{post.description}</p>
+                    <hr class="my-2 border-t border-[rgb(74,191,167)]" />
+                  </a>
+                {/each}
+              {/if}
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="w-full"
-    style="background: url('backgrounds/Group-1170.png') center center/cover"
+    class="bg-gradient-to-br from-white to-[#D6F1EB] w-full flex flex-col items center"
   >
-    <RecentModels tags={data.tags} />
-    <PopularModels tags={data.tags} />
-    <ModelsLeaderboard />
+    <div
+      class="w-full mt-16 max-w-6xl mx-auto"
+      style="background: url('backgrounds/Group-1170.png') center center/cover"
+    >
+      <RecentModels tags={data.tags} />
+      <PopularModels tags={data.tags} />
+      <ModelsLeaderboard />
+    </div>
   </div>
   <Posts posts={data.posts} />
   <Consortium />

diff --git a/ui/src/routes/DatasetsLeaderboard.svelte b/ui/src/routes/DatasetsLeaderboard.svelte
@@ -9,6 +9,6 @@
 	});
 </script>
 
-<div class="sm:my-[100px] w-full">
+<div class="sm:my-[50px] w-full">
 	<Leaderboard leaderboard={data} textOnLeft={true} />
 </div>
diff --git a/ui/src/routes/Footer.svelte b/ui/src/routes/Footer.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <footer
-    class="footer p-10 bg-blue-500 flex flex-col md:flex-row justify-between"
+    class="footer p-10 bg-blue-500 flex flex-col md:flex-row justify-between mt-16 sm:mt-0"
 >
     <ul class="text-[#335e6f]">
         <li>

diff --git a/ui/src/routes/Hero.svelte b/ui/src/routes/Hero.svelte
@@ -1,5 +1,5 @@
 <div
-  class="w-full flex flex-col items-center mb-12 relative min-h-[800px] sm:min-h-0"
+  class="w-full flex flex-col items-center relative min-h-[800px] sm:min-h-0"
   style="background: url('backgrounds/Group-1190.png') center center/cover; height: calc(100vh - 60px);"
 >
   <div