SendIt Landing (Code and Resource Optimisation)

src/components/landing/LandingDiscover.vue

@@ -1,29 +1,21 @@
 <template>
   <div id="how-does-it-work">
-    <div
-      class="flex flex-col md:flex-row md:flex-nowrap md:justify-center md:items-center mt-[10%]"
-    >
+    <div class="flex flex-col md:flex-row md:flex-nowrap md:justify-center md:items-center mt-[10%]">
       <div
-        class="w-full md:w-1/2 flex flex-col gap-1 md:gap-4 lg:gap-6 md:pl-[150px] md:mt-[-5rem] items-center md:items-start"
-      >
-        <h3 class="discover-section-title md:pb-2">Discover How</h3>
-        <h3 class="discover-bold-section-title">
-          SendIt
+        class="w-full md:w-1/2 flex flex-col gap-1 md:gap-2 lg:gap-4 md:pl-[150px] md:mt-[-5rem] items-center md:items-start">
+        <div>
+          <h3 class="discover-section-title md:pb-2">How<span class="discover-bold-section-title"> It Works</span>
+          </h3>
           <span>
-            Works
-            <img
-              src="@/assets/images/landing/how-does-it-work-vector-underline.svg"
-              class="md:w-[80px] lg:w-[120px] 2xl:w-[200px] lg:mt-2 xl:w-[175px] xl:mt-5 max-md:w-[47px] absolute md:left-[225px] lg:left-[275px] xl:left-[375px] 2xl:left-[475px] hide-below-768"
-            />
+            <img src="@/assets/images/landing/how-does-it-work-vector-underline.svg"
+              class="md:w-[80px] lg:w-[120px] 2xl:w-[200px] xl:w-[175px] max-md:w-[47px] absolute md:left-[225px] lg:left-[275px] xl:left-[375px] 2xl:left-[475px] hide-below-768" />
+
           </span>
-        </h3>
+        </div>
+
         <br />
-        <p
-          class="discover-section-description max-w-[500px] px-2 md:px-0 max-md:text-center"
-        >
-          Discover the straightforward process of sending cryptocurrency via
-          email with SendIt.
-        </p>
+        <p class="discover-section-description max-w-[500px] px-2 md:px-0 max-md:text-center text-[#8d8d8d]">Discover
+          the easiest way to send crypto via email with SendIt.</p>
         <br />
         <a
           class="text-[0.75rem] xl:text-[1rem] 2xl:text-[1.5rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] md:w-[150px] md:rounded-[25px] px-2 py-1 md:px-4 md:py-3 2xl:px-5 2xl:w-[225px] xl:w-[175px] 2xl:py-4 cursor-pointer bg-white transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-below-768"
@@ -33,15 +25,12 @@
         </a>
       </div>
       <div class="mt-8 md:mt-0">
-        <img src="@/assets/gifs/Discover.gif" class="w-[100%] h-auto" />
+        <img src="@/assets/gifs/Discover.gif" class="w-[100%] h-auto lg:h-screen" />
       </div>
     </div>
   </div>
-  <img
-    class="absolute z-[-1] top-[165%] -left-[30px] md:left-[0] h-[300px] md:h-[200px] max-md:hidden go-to-linear-animation"
-    src="@/assets/images/landing/cloud-how.png"
-    loading="lazy"
-  />
+  <img class="absolute z-[-1] top-[165%] -left-[30px] md:-left-[150px] h-[300px] max-md:hidden go-to-linear-animation"
+    src="@/assets/images/landing/cloud-how2.webp" loading="lazy" />
   <div class="flex justify-center">
     <a
       class="text-[0.75rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] px-5 py-5 cursor-pointer bg-white transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-above-768"

src/components/landing/LandingEarnXP.vue

@@ -4,7 +4,7 @@
       <h3 class="max-md:hidden flex">
         <div class="relative">
           <span class="earn-section-title"><span class="font-bold-onest">Earn XP&nbsp;</span></span>
-          <img src="@/assets/images/landing/faq-underlined.png" class="absolute top-full pt-3" />
+          <img src="@/assets/images/landing/faq-underlined.webp" class="absolute top-full pt-3" />
         </div>
         <span class="earn-section-title">for Using SendIt</span>
       </h3>
@@ -25,9 +25,9 @@
           our socials for updates on rewards that will melt faces! 🤑🤑🤑
         </p>
       </div>
-      <img src="@/assets/images/landing/earn-xp-horse-300w.png" srcset="
-          @/assets/images/landing/earn-xp-horse-300w.png 300w,
-          @/assets/images/landing/earn-xp-horse-836w.png 836w
+      <img src="@/assets/images/landing/earn-xp-horse-300w.webp" srcset="
+          @/assets/images/landing/earn-xp-horse-300w.webp 300w,
+          @/assets/images/landing/earn-xp-horse-836w.webp 836w
         " sizes="(max-width: 767px) 300px, 836px" loading="lazy" alt="Earn XP for using SendIt"
         class="md:-mr-[20px]" />
     </div>

src/components/landing/LandingFAQ.vue

@@ -37,7 +37,7 @@ const faqs = [
 
         <div class="relative">
           <span class="faq-section-title relative"><span class="font-bold-onest">Frequently&nbsp;</span></span>
-          <img src="@/assets/images/landing/faq-underlined.png" class="max-md:w-[96px]" />
+          <img src="@/assets/images/landing/faq-underlined.webp" class="max-md:w-[96px]" />
         </div>
         <span class="faq-section-title">Asked Questions</span>
       </h3>

src/components/landing/LandingFooter.vue

@@ -7,9 +7,9 @@
         class="landing-container flex flex-col items-center md:items-start md:flex-row max-md:flex-col max-md:gap-5 max-md:items-center md:justify-between max-md:text-center landing-section-description w-full">
         <div class="mb-[1px] md:mb-0 max-md:w-full flex flex-col max-md:items-center">
           <a href="/" class="flex">
-            <img alt="SendIt" src="@/assets/images/landing/sendit-logomark-30w.png" srcset="
-                @/assets/images/landing/sendit-logomark-30w.png 30w,
-                @/assets/images/landing/sendit-logomark-49w.png 49w
+            <img alt="SendIt" src="@/assets/images/landing/sendit-logomark-30w.webp" srcset="
+                @/assets/images/landing/sendit-logomark-30w.webp 30w,
+                @/assets/images/landing/sendit-logomark-49w.webp 49w
               " sizes="(max-width: 767px) 30px, 49px" />
           </a>
           <a href="https://arcana.network" target="_blank" class="text-white text-[0.9rem]">Made with love by Arcana
@@ -20,8 +20,9 @@
               src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=411941&theme=dark"
               alt="SendIT - Send&#0032;crypto&#0032;using&#0032;email&#0032;or&#0032;social&#0032;handles | Product Hunt" /></a>
         </div>
-        <nav class="flex flex-col md:flex-row justify-evenly flex-grow max-md:w-full max-md:justify-around items-center md:items-start">
-          <ul class="flex flex-col gap-4 mb-[1rem] md:gap-1 text-white">
+        <nav
+          class="flex flex-row md:flex-row justify-evenly flex-grow max-md:w-full max-md:justify-around items-center md:items-start">
+          <ul class="flex flex-col gap-2 mb-[1rem] md:gap-1 text-white">
             <li><a href="#why-sendit">Why Sendit?</a></li>
             <li><a href="#how-does-it-work">How does it work?</a></li>
             <li class="max-md:hidden">
@@ -30,7 +31,7 @@
             <li class="md:hidden"><a href="#earn-xp">Earn XP</a></li>
             <li class="max-md:hidden"><a href="#getonweb3">GetOnWeb3</a></li>
           </ul>
-          <ul class="flex flex-col gap-4 md:gap-1 text-white">
+          <ul class="flex flex-col gap-2 mb-[1rem] md:gap-1 text-white">
             <li class="md:hidden"><a href="#getonweb3">GetOnWeb3</a></li>
             <li>
               <a href="https://github.com/arcana-network/license/blob/main/TERMS.md" target="_blank">Terms of Use</a>

src/components/landing/LandingGetOnWeb3.vue

@@ -7,10 +7,10 @@
         the better.
       </p>
     </div>
-    <img src="@/assets/images/landing/get-on-web3-1440w.png" srcset="
-        @/assets/images/landing/get-on-web3-375w.png   375w,
-        @/assets/images/landing/get-on-web3-1440w.png 1440w
-      " sizes="(max-width: 767px) 375px, 1440px" loading="lazy"
-      class="object-cover object-center absolute inset-0 z-[-1] w-full h-full" />
+    <img src="@/assets/images/landing/get-on-web3-1440w.webp" srcset="
+      @/assets/images/landing/get-on-web3-375w.webp   575w,
+      @/assets/images/landing/get-on-web3-1440w.webp 1440w
+      " sizes="(max-width: 767px) 575px, 1440px" loading="lazy"
+      class="object-cover object-center absolute inset-0 z-[-1] w-full h-full filter brightness-75" />
   </div>
 </template>

src/components/landing/LandingHeader.vue

@@ -21,13 +21,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <header class="mt-8 z-[1000] transition-all duration-[500ms] ease-in-out bg-transparent">
-    <div class="landing-container relative">
+  <header
+    class="mt-8 z-[1000] transition-all duration-[500ms] ease-in-out bg-transparent top-0">
+    <div class=" landing-container relative">
       <div class="flex">
         <a href="/" class="flex gap-2 z-1000">
-          <img alt="SendIt" src="@/assets/images/landing/sendit-logomark-30w.png" srcset="
-              @/assets/images/landing/sendit-logomark-30w.png 30w,
-              @/assets/images/landing/sendit-logomark-49w.png 49w
+          <img alt="SendIt" src="@/assets/images/landing/sendit-logomark-30w.webp" srcset="
+              @/assets/images/landing/sendit-logomark-30w.webp 30w,
+              @/assets/images/landing/sendit-logomark-49w.webp 49w
             " sizes="(max-width: 767px) 30px, 49px" />
           <img src="@/assets/images/landing/SendIt-text.svg" alt="SendIt" />
         </a>

src/components/landing/LandingHero.vue

@@ -45,7 +45,7 @@ async function handlePasswordlessLogin() {
 <template>
   <div class="relative -mt-[100px] md:-mt-[100px]">
     <div
-      class="landing-container absolute z-[10] -top-[60px] 2xl:-top-[150px] h-full max-h-screen w-full flex flex-col justify-center items-center left-1/2 transform -translate-x-1/2">
+      class="landing-container absolute z-[10] md:-top-[120px] 2xl:-top-[160px] h-full max-h-screen w-full flex flex-col justify-center items-center left-1/2 transform -translate-x-1/2">
 
       <h1 class="syne landing-section-title md:mt-10 max-md:max-w-[200px] 2xl:text-[4.75rem] text-center">
         Send Crypto <span class="font-one font-bold-onest">Over Email</span>
@@ -55,14 +55,14 @@ async function handlePasswordlessLogin() {
         have a wallet. Don’t believe us? Try it for yourself for free!
       </p>
       <form
-        class="relative flex gap-2 md:gap-4 md:border md:border-solid md:border-[#8d8d8d] md:bg-transparent md:p-1 md:rounded-[25px] max-md:mt-5 md:mt-10"
+        class="relative flex gap-2 md:gap-4 md:border border border-solid border-[#8d8d8d] md:border-solid md:border-[#8d8d8d] md:bg-transparent rounded-[25px] md:p-1 md:rounded-[25px] max-md:mt-5 md:mt-10 hover:border-[#fff]"
         @submit.prevent="handlePasswordlessLogin">
         <input placeholder="someone@example.com"
-          class="md:bg-transparent max-md:rounded-[5px] h-[40px] px-3 w-[200px] md:w-[300px] text-[12px] md:text-[14px] text-black placeholder:text-[#8d8d8d] outline-none"
+          class="bg-transparent md:bg-transparent max-md:rounded-[5px] h-[40px] px-3 w-[200px] md:w-[300px] text-xs md:text-base text-white placeholder:text-[#fff]/80 outline-none"
           v-model.trim="email" />
         <div class="relative flex items-center justify-center w-[80px] md:w-[120px] h-[40px]">
           <button
-            class="font-[500] text-[12px] uppercase w-[80px] md:w-[120px] flex items-center justify-center h-[40px] bg-white rounded-[25px] md:rounded-[25px] text-[#3b3b3b]"
+            class="font-[500] text-xs uppercase w-[80px] md:w-[120px] flex items-center justify-center h-[40px] bg-white rounded-[25px] md:rounded-[25px] text-[#3b3b3b]"
             :disabled="loaderStore.show">
             Sign Up!
           </button>
@@ -75,18 +75,18 @@ async function handlePasswordlessLogin() {
       </form>
     </div>
     <div class="relative -z-[1] ">
-      <img src="@/assets/images/landing/hero-bg-top.png" class="absolute top-0 right-0 z-[6] w-full" />
-      <img src="@/assets/images/landing/planet1.png"
+      <img src="@/assets/images/landing/hero-bg-top.webp" class="absolute top-0 right-0 z-[6] w-full" />
+      <img src="@/assets/images/landing/planet1.webp"
         class="absolute z-[6] -left-20 md:-left-10 lg:-left-10 top-10 h-[200px] sm:h-[200px] md:h-[200px] lg:h-[270px] xl:h-[350px] bg-blend-darken go-to-linear-animation" />
-      <img src="@/assets/images/landing/planet-cloud-right.png"
+      <img src="@/assets/images/landing/planet-cloud-right.webp"
         class="absolute z-[5] right-[430px] -top-10 md:-top-5 md:h-[10px] lg:h-[150px] xl:h-[200px] bg-blend-darken go-to-linear-animation2" />
-      <img src="@/assets/images/landing/planet2.png"
+      <img src="@/assets/images/landing/planet2.webp"
         class="absolute z-[3] right-0 bottom-[300px] md:bottom-[225px] h-[150px] md:h-[200px] lg:h-[225px] xl:h-[275px] opacity-70 bg-blend-darken go-to-linear-animation" />
       <div class="h-[456px] absolute top-0 left-0 right-0 z-[4] bg-gradient-to-b from-black via-black to-transparent">
       </div>
-      <img src="@/assets/images/landing/here-sendit-375.png"
+      <img src="@/assets/images/landing/here-sendit-375.webp"
         class="md:hidden relative top-0 left-0 right-0 h-[812px] md:h-[1059px] object-cover object-center w-full z-[2]" />
-      <img src="@/assets/images/landing/hero-sendit-1440.png"
+      <img src="@/assets/images/landing/hero-sendit-1440.webp"
         class="max-md:hidden relative top-0 left-0 right-0 h-[915px] md:h-[1025px] 2xl:h-[1200px] object-cover object-center w-full z-[2]" />
       <!-- <img src="@/assets/images/landing/bg-bottom.png" class="absolute -bottom-[10px] z-[5]" /> -->
     </div>

src/components/landing/LandingNumbers.vue

@@ -1,10 +1,11 @@
 <template>
   <div
-    class="landing-container flex flex-col md:flex-row justify-center gap-[50px] items-center md:items-start md:gap-20 pt-[60px] pb-[10px] mx-auto">
+    class="landing-container flex flex-col md:flex-row justify-center gap-[20px] items-center md:items-start md:gap-20 pt-[60px] pb-[10px] mx-auto">
     <div
       class="flex bg-[#212121] bg-opacity-60 gap-[1.5rem] md:gap-[4rem] px-[3rem] py-[1rem] md:px-[3.5rem] md:py-[1rem] lg:py-[2rem] lg:px-[3.5rem] max-w-[600px] justify-center w-max rounded-[12px] md:rounded-[30px] -mt-[10px] md:-mt-[25px] border-opacity-50 backdrop-blur-[50px] border-5 border-[#181819]">
       <div class=" flex flex-row items-center gap-10 -ml-5 md:-ml-10">
-        <img src="@/assets/images/landing/users.svg" alt="Users signed up" class="h-100 md:h-[100px] 2xl:h-[150px]" />
+        <img src="@/assets/images/landing/users.svg" alt="Users signed up"
+          class="h-[60px] md:h-[100px] 2xl:h-[150px]" />
         <div class="flex flex-col items-start gap-1">
           <span
             class="font-bold-onest text-[20px] md:text-[30px] lg:text-[40px] 2xl:text-[60px] leading-[1.5]">500K+</span>
@@ -16,7 +17,7 @@
       class="flex bg-[#212121] bg-opacity-60 gap-[1.5rem] md:gap-[4rem] px-[3rem] py-[1rem] md:px-[3.5rem] md:py-[1rem] lg:py-[2rem] lg:px-[3.5rem] max-w-[600px] justify-center w-max rounded-[12px] md:rounded-[30px] -mt-[10px] md:-mt-[25px] border-opacity-50 backdrop-blur-[50px] border-5 border-[#181819]">
       <div class="flex flex-row items-center gap-10 -ml-5 md:-ml-10">
         <img src="@/assets/images/landing/transactions.svg" alt="Transactions Sent"
-          class="h-100 md:h-[100px] 2xl:h-[150px]" />
+          class="h-[60px] md:h-[100px] 2xl:h-[150px]" />
         <div class="flex flex-col items-start gap-1">
           <span
             class="font-bold-onest text-[20px] md:text-[30px] lg:text-[40px] 2xl:text-[60px] leading-[1.5]">3M+</span>

src/components/landing/LandingSenditTagline.vue

@@ -10,7 +10,7 @@
             <span
               class="max-md:text-[1rem] leading-[3rem] text-[2rem] md:text-[1.75rem] lg:text-[2.25rem] xl:text-[4rem] ">&nbsp;Email
               + Crypto =&nbsp;</span>
-            <img src="@/assets/images/landing/SendIt-text.svg" class="h-4 md:h-5 lg:h-7 xl:h-9" alt="SendIt" />
+            <img src="@/assets/images/landing/SendIt-text.svg" class="h-3 md:h-5 lg:h-7 xl:h-9" alt="SendIt" />
             <span>&nbsp;&nbsp;</span>
             <img src="@/assets/images/landing/apostrophe-close-outline.svg" class="h-2 md:h-4 -mt-2 md:-mt-6" />
             <img src="@/assets/images/landing/apostrophe-close-outline.svg" class="h-2 md:h-4 -mt-2 md:-mt-6" />
@@ -19,6 +19,6 @@
       </div>
     </div>
     <img class="absolute z-[-1] -top-[60%] -right-[130px] h-[175vh] max-md:hidden go-to-linear-animation"
-      src="@/assets/images/landing/cloud-elephant.png" loading="lazy" />
+      src="@/assets/images/landing/cloud-elephant.webp" loading="lazy" />
   </div>
 </template>

src/components/landing/LandingWhySendit.vue

@@ -2,13 +2,11 @@
   <div class="relative">
     <div class="landing-container mt-[4rem] md:mt-[8rem]" id="why-sendit">
       <h3
-        class="flex md:flex-row justify-center earn-section-title text-center mb-[2rem] md:mb-[3rem] gap-2 md:gap-3 pb-10"
-      >
+        class="flex md:flex-row justify-center earn-section-title text-center mb-[2rem] md:mb-[3rem] gap-2 md:gap-3 pb-10">
         Why Use
         <span class="flex flex-row font-bold-onest gap-2 md:gap-5">
           SendIt
-          <img src="@/assets/images/landing/question-mark.png"
-        /></span>
+          <img src="@/assets/images/landing/question-mark.webp"></span>
       </h3>
       <div
         class="flex flex-col md:grid gap-3 md:gap-6"
@@ -57,42 +55,29 @@
             class="flex flex-col align-middle gap-[0.3rem] md:gap-[1rem] py-10 px-7"
           >
             <h4 class="font-[500] text-[20px] md:text-[24px]">
-              Zero learning curves
-            </h4>
+              Zero Learning Curve</h4>
             <p class="text-[#c4c4c4] text-[12px] md:text-[20px]">
-              With SendIt, a self-custodial wallet is created which can be
-              accessed with Web2 authentication. Users can learn crypto-specific
-              ideas at their own pace.
+              SendIt offers a self-custodial wallet with easy Web2 access, empowering users to explore crypto at their
+              own speed.
             </p>
           </div>
         </div>
-        <div
-          class="border border-solid border-[#363636] bg-[#141414]/60 rounded-[25px] md:rounded-[30px] flex flex-col"
-          style="grid-area: why-sendit-4"
-        >
-          <img
-            src="@/assets/gifs/success.gif"
-            loading="lazy"
-            style="height: 230px"
-            class="hidden md:block"
-          />
+        <div class="border border-solid border-[#363636] bg-[#141414]/60 rounded-[25px] md:rounded-[30px] flex flex-col"
+          style="grid-area: why-sendit-4;">
+          <img src="@/assets/gifs/success.gif" loading="lazy" style="height: 230px;" class="hidden md:block" />
           <div class="flex flex-col gap-[0.3rem] md:gap-[1rem] py-5 px-7">
             <h4 class="font-[500] text-[20px] md:text-[24px]">
-              Even Metamask is difficult.
+              Metamask is difficult.
             </h4>
             <p class="text-[#c4c4c4] text-[12px] md:text-[20px]">
-              Metamask is good for technically inclined users, mainstream
-              adoption requires the use of Web2 concepts that are already
-              familiar to users. SendIt does that.
+              SendIt streamlines mainstream adoption with familiar Web2 concepts, contrasting with the technical focus
+              of Metamask.
             </p>
           </div>
         </div>
       </div>
     </div>
-    <img
-      class="absolute z-[-1] top-[65%] -left-[10%] md:-left-[5%] md:h-[350px] max-md:hidden go-to-linear-animation"
-      src="@/assets/images/landing/planet1.png"
-      loading="lazy"
-    />
+    <img class="absolute z-[-1] top-[65%] -left-[10%] md:-left-[5%] md:h-[350px] max-md:hidden go-to-linear-animation"
+      src="@/assets/images/landing/planet1.webp" loading="lazy" />
   </div>
 </template>