chore: New hero section on landing page (#242)

* enhancement completion

* completion

* quick fix

* PR Fixes

* animation

* improve styling

* move svg in hero to its component

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/classroomio-com/src/app.css

@@ -1,3 +1,4 @@
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/classroomio-com/src/lib/Hero/Hero.svelte

@@ -1,9 +1,13 @@
 <script>
   import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { sineInOut } from 'svelte/easing';
   import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
+  import HeroBackground from '$lib/Hero/HeroBackground.svelte';
 
   let width = '710';
   let height = '710';
+  let animate = false;
 
   onMount(() => {
     const handleResize = () => {
@@ -19,7 +23,10 @@
       }
     };
 
-    handleResize(); // Call it initially
+    handleResize();
+    setTimeout(() => {
+      animate = true;
+    }, 70);
 
     window.addEventListener('resize', handleResize);
     return () => {
@@ -28,50 +35,146 @@
   });
 </script>
 
-<div class="relative mt-[30%] border-b-2 text-center md:mt-36">
+<div
-  <div class="mb-10 flex w-full items-center justify-center">
+  class="relative border-b-2 text-center bg-[#F5F8FE] h-[110vh] lg:h-[150vh] mt-[5%] overflow-hidden"
-    <a
+>
-      target="_blank"
+  <div class="overflow-hidden absolute h-full top-0 z-0">
-      rel="noopener noreferrer nofollow"
+    <HeroBackground />
-      href="https://github.com/rotimi-best/classroomio"
-      style="color: rgb(75, 85, 99);"
-      class="rounded-full border border-gray-300 px-4 py-1 text-sm font-medium hover:underline"
-      >Give us a <span class="text-blue-700">star</span> on github</a
-    >
   </div>
-  <h1
-    class="mx-auto flex flex-col items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl"
-  >
-    <span class="mb-2">Launch <span class="relative text-blue-700">Your</span> Online Bootcamp</span
-    >
-    <span class="relative text-blue-700"
-      >In Minutes
-      <svg
-        aria-hidden="true"
-        viewBox="0 0 418 42"
-        class="absolute right-[-20%] top-3/4 h-[0.58em] fill-indigo-300/70"
-        preserveAspectRatio="none"
-      >
-        <path
-          d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
-        />
-      </svg>
-    </span>
-  </h1>
 
-  <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-2/4 lg:p-0">
+  <div class="z-30 absolute top-[13%] lg:top-[4%]">
-    Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows you
+    <div class="mb-10 ml-[5%] lg:ml-0 flex w-full items-center justify-start lg:justify-center">
-    to launch and scale your online bootcamp with ease.
+      <a
-  </p>
+        target="_blank"
-  <div class="mt-10 flex flex-col items-center justify-center gap-4 md:flex-row">
+        rel="noopener noreferrer nofollow"
-    <a
+        href="/github"
-      class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
+        style="color: rgb(75, 85, 99);"
-      href="/signup"
+        class="rounded-full border-2 border-[#C2D2FF] px-4 py-1 text-sm font-medium bg-[#DCE5FF] text-[#4B5563]"
-      rel="noopener noreferrer nofollow"
+        >Give us a <span class="text-blue-700">star</span> on github</a
+      >
+    </div>
+
+    <div class="justify-between w-[90%] absolute top-[3%] left-[4%] hidden lg:flex">
+      {#if animate}
+        <div
+          class="relative transition-all hover:scale-110 rotate-12"
+          transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
+        >
+          <a
+            href="/#collaboration"
+            class="px-6 py-2 border-[1.5px] border-[#3ADFEC] rounded-[4px] bg-white text-[#3ADFEC] text-lg font-bold"
+            >Collaboration</a
+          >
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#3ADFEC" />
+          </svg>
+        </div>
+
+        <div
+          class="relative transition-all hover:scale-110 -rotate-12"
+          transition:fly={{ x: 100, delay: 50, easing: sineInOut }}
+        >
+          <a
+            href="/github"
+            target="_blank"
+            class="px-6 py-2 border-[1.5px] border-[#BF0696] rounded-[4px] bg-white text-[#BF0696] text-lg font-bold"
+            >Open Source</a
+          >
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#BF0696" />
+          </svg>
+        </div>
+      {/if}
+    </div>
+
+    <h1
+      class="mx-auto w-[89%] pr-20 lg:pr-0 lg:w-[60%] text-left lg:text-center font-bold md:leading-[1.5] text-slate-900 text-5xl lg:text-7xl"
     >
-      Get Started for Free 🚀
+      Launch Your Online Bootcamp <span class="text-blue-700">In Minutes </span>
-    </a>
+    </h1>
-    <!-- <a
+
+    <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
+      Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows
+      you to launch and scale your online bootcamp with ease.
+    </p>
+
+    <div class="justify-between w-[90%] absolute top-[25%] left-[4%] hidden lg:flex">
+      {#if animate}
+        <div
+          class="relative transition-all hover:scale-110 -rotate-12"
+          transition:fly={{ x: -100, delay: 100, easing: sineInOut }}
+        >
+          <a
+            href="/#customization"
+            class="px-6 py-2 border-[1.5px] border-[#0233BD] rounded-[4px] bg-white text-[#0233BD] text-lg font-bold"
+            >Customizable LMS</a
+          >
+
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#0233BD" />
+          </svg>
+        </div>
+        <div
+          class="relative transition-all hover:scale-110 rotate-12"
+          transition:fly={{ y: 100, delay: 150, easing: sineInOut }}
+        >
+          <a
+            href="/#ai"
+            class="px-6 py-2 border-[1.5px] border-[#9747FF] rounded-[4px] bg-white text-[#9747FF] text-lg font-bold"
+            >AI Support</a
+          >
+
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#9747FF" />
+          </svg>
+        </div>
+      {/if}
+    </div>
+
+    <div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
+      <a
+        class="md:text-base w-11/12 rounded-md border-gray-200 border-2 px-6 py-3 text-sm font-medium text-center transition-all delay-100 hover:bg-black hover:text-white hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-4 lg:font-semibold"
+        href="/demo"
+        rel="noopener noreferrer nofollow"
+      >
+        Book a demo
+      </a>
+      <a
+        class="md:text-base w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-4 lg:font-semibold"
+        href="/signup"
+        rel="noopener noreferrer nofollow"
+      >
+        Get Started for Free
+      </a>
+      <!-- <a
       class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
       href="/github"
       target="_blank"
@@ -79,42 +182,30 @@
     >
       View on Github
     </a> -->
-  </div>
-
-  <div class="relative my-5 md:my-10">
-    <!-- <video
-      class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
-      autoplay
-      loop
-      muted
-      defaultMuted
-      playsinline
-      preload="auto"
-    >
-      <source src="./dark-light-mode.mp4" type="video/mp4" />
-      <track kind="captions" />
-    </video> -->
-
-    <img
-      loading="eager"
-      {width}
-      {height}
-      src="./cio-hero-imac.webp"
-      alt="hero section with dark vs light mode"
-      class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
-    />
-  </div>
-
-  {#if PUBLIC_ENABLE_USERS_COMPANIES}
-    <div class="mb-[10%] px-[15%]">
-      <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
-      <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
-        <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
-      </div>
     </div>
-  {/if}
+
+    <div class="relative my-5 md:my-10">
+      <img
+        loading="eager"
+        {width}
+        {height}
+        src="./cio-hero.webp"
+        alt="hero section with dark vs light mode"
+        class="mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
+      />
+    </div>
+
+    {#if PUBLIC_ENABLE_USERS_COMPANIES}
+      <div class="mb-[10%] px-[15%]">
+        <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
+        <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
+          <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
+        </div>
+      </div>
+    {/if}
+  </div>
 </div>

apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte

@@ -11,11 +11,11 @@
     Our customers love us. Here's why you will too:
   </p>
   <a
-    class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
+    class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
     href="/signup"
     rel="noopener noreferrer nofollow"
   >
-    Get Started for Free 🚀
+    Get Started for Free
   </a>
 
   <div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">