From 2f3a4784a11c8a36dce3bbcf0c1a15a8b7039ce5 Mon Sep 17 00:00:00 2001
From: Adeyemi Adetunji <tvnji01@gmail.com>
Date: Fri, 19 Apr 2024 04:43:59 +0100
Subject: [PATCH] chore: update hero section of /blog (#267)

* feat: Update hero section of /blog

* - changed background & text  animation

* update hero of blog

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 apps/classroomio-com/src/lib/Hero/Hero.svelte |  2 +-
 .../src/routes/blog/+page.svelte              | 30 ++++++++-----------
 apps/classroomio-com/static/hero-bg.svg       |  6 ++--
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index 2ca85817..b06c73ef 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/apps/classroomio-com/src/lib/Hero/Hero.svelte
@@ -97,7 +97,7 @@
         <span>Launch Your Online</span> <br />
         <div class="flex-wrap flex items-center lg:gap-3">
           <span
-            class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[90px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block"
+            class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[90px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block overflow-hidden"
           >
             {#key titleIndex}
               <span
diff --git a/apps/classroomio-com/src/routes/blog/+page.svelte b/apps/classroomio-com/src/routes/blog/+page.svelte
index ef94ec75..44cd90b5 100644
--- a/apps/classroomio-com/src/routes/blog/+page.svelte
+++ b/apps/classroomio-com/src/routes/blog/+page.svelte
@@ -8,25 +8,15 @@
   <title>Blog | ClassroomIO</title>
 </svelte:head>
 
-<div class=" mt-[10%] md:mt-16">
-  <header class="pt-24 pb-16 w-full flex flex-col items-center text-center">
+<div class="mt-[10%] md:mt-16">
+  <header
+    class="root lg:min-h-[30rem] pt-24 pb-16 w-full flex flex-col items-center justify-center text-center border-b border-slate-100"
+  >
     <h1
-      class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center"
+      class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
     >
       <span>What's new on</span>
-      <span class="text-blue-700 relative"
-        >ClassroomIO?
-        <svg
-          aria-hidden="true"
-          viewBox="0 0 418 42"
-          class="absolute right-0 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>
+      <span class="text-blue-700 relative">ClassroomIO?</span>
     </h1>
     <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
       Get the latest news from ClassroomIO, including product updates, team announcements and more!
@@ -35,7 +25,7 @@
   <div class="w-full flex items-center justify-center">
     <ul class="flex flex-col items-start justify-start gap-2 w-[90%] md:w-[50%]">
       {#each data.posts as post}
-        <li class=" border-t border-slate-400 py-14 w-full">
+        <li class=" py-14 w-full">
           <div class="flex md:flex-row flex-col md:items-center gap-2">
             <!-- Date -->
             <p class="text-sm text-slate-500">{formatDate(post.date)}</p>
@@ -67,3 +57,9 @@
     </ul>
   </div>
 </div>
+
+<style>
+  .root {
+    background-image: url('/hero-bg.svg');
+  }
+</style>
diff --git a/apps/classroomio-com/static/hero-bg.svg b/apps/classroomio-com/static/hero-bg.svg
index 4f2c0042..4fa4c617 100644
--- a/apps/classroomio-com/static/hero-bg.svg
+++ b/apps/classroomio-com/static/hero-bg.svg
@@ -7,15 +7,15 @@
 >
   <style type="text/css">
   #dash { 
-    stroke-dasharray: 1000;
-    stroke-dashoffset: 1000;
+    stroke-dasharray: 300;
+    stroke-dashoffset: 100;
     animation: dash 5s linear alternate infinite;
   }
 
           
   @keyframes dash {
     from {
-      stroke-dashoffset: 900;
+      stroke-dashoffset: 500;
     }
     to {
       stroke-dashoffset: 0;