landing page updates

5 files changed, 12 insertions, 10 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 07525fb7..4ad54cb7 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -46,7 +46,7 @@
   </div>
 </div>
 
-<div class="mb-20">
+<div class="mt-40">
   <h3 class="text-5xl font-medium mb-5 text-center">{$t("about.locations.header")}</h3>
   <p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
     {@html $t("about.locations.description")}
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 10c7e5c7..d548a481 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,11 +1,11 @@
 <script>
   import { t } from "$lib/translations";
-  let { image, stepID } = $props();
+  let { image, stepID, size = 128 } = $props();
 </script>
 
 <div class="space-y-5">
   <div class="h-32 flex items-center justify-center">
-    <iconify-icon noobserver icon={image} class="mx-auto" width="128"></iconify-icon>
+    <iconify-icon noobserver icon={image} class="mx-auto" width={String(size)}></iconify-icon>
   </div>
   <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p>
   <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index b5447b07..6e027e8d 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -8,7 +8,7 @@
 <div class="pt-20 md:mt-0">
   <div class="space-y-5">
     <h1
-      class="relative text-4xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto"
+      class="relative text-5xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto"
     >
       <iconify-icon
         noobserver
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index 3d60eeaf..d43e9956 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -5,13 +5,13 @@
   let { image, title, description = undefined, order = undefined, children = undefined }: { image: string; title: string; description?: string; order?: string; children?: Snippet } = $props();
 </script>
 
-<div class="flex flex-col-reverse lg:flex-row justify-center lg:space-x-20 items-center">
+<div class="flex flex-col-reverse lg:flex-row justify-center lg:gap-20 items-center">
   <Image
     {image}
-    style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mt-10 lg:mt-0 {order ===
+    style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mt-10 lg:mt-0 shrink-0 {order ===
     'reverse' && 'lg:order-last'}"
   />
-  <div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0">
+  <div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0 lg:pl-10">
     <h3 class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]">{title}</h3>
     <p class="text-secondary text-xl font-medium w-full md:w-[500px] mx-auto lg:mx-0">
       {#if description}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2f4c7dda..f8c0d199 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,7 +19,7 @@
 
   const howItWorksSteps = [
     { image: "coinos:hand", stepID: "step1" },
-    { image: "coinos:bolt", stepID: "step2" },
+    { image: "coinos:bolt", stepID: "step2", size: 100 },
     { image: "coinos:smile", stepID: "step3" },
   ];
 </script>
@@ -58,7 +58,7 @@
     <h3 class="text-5xl font-medium mb-10 text-center">{$t("howItWorks.header")}</h3>
     <div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center">
       {#each howItWorksSteps as step}
-        <HowItWorksCard image={step.image} stepID={step.stepID} />
+        <HowItWorksCard image={step.image} stepID={step.stepID} size={step.size} />
       {/each}
     </div>
     <div bind:this={faq}></div>
@@ -74,7 +74,9 @@
     <div bind:this={about}></div>
   </div>
 
-  <About />
+  <div class="mb-40 md:mb-80">
+    <About />
+  </div>
 </main>
 
 <Footer />