[BDW-1703] updated homepage gif

* fix indentation on example file on homepage (#12)

Signed-off-by: Chris <52924685+chrishumanitec@users.noreply.github.com>
Signed-off-by: Santiago Beroch <sberoch@gmail.com>

* moved down graphic over gif in homepage

Signed-off-by: Santiago Beroch <sberoch@gmail.com>

* updated homepage gif

Signed-off-by: Santiago Beroch <sberoch@gmail.com>

---------

Signed-off-by: Chris <52924685+chrishumanitec@users.noreply.github.com>
Signed-off-by: Santiago Beroch <sberoch@gmail.com>
Co-authored-by: Chris <52924685+chrishumanitec@users.noreply.github.com>

assets/style.css

@@ -922,16 +922,16 @@ code,
   inset: 0px;
 }
 
-.-bottom-\[20\%\] {
-  bottom: -20%;
+.-bottom-\[30\%\] {
+  bottom: -30%;
 }
 
-.-top-5 {
-  top: -1.25rem;
+.-bottom-\[30px\] {
+  bottom: -30px;
 }
 
-.bottom-0 {
-  bottom: 0px;
+.-top-5 {
+  top: -1.25rem;
 }
 
 .left-0 {
@@ -962,14 +962,26 @@ code,
   top: 0px;
 }
 
-.top-\[1px\] {
-  top: 1px;
-}
-
 .top-auto {
   top: auto;
 }
 
+.left-\[10\%\] {
+  left: 10%;
+}
+
+.left-\[11\%\] {
+  left: 11%;
+}
+
+.left-\[12\%\] {
+  left: 12%;
+}
+
+.-top-4 {
+  top: -1rem;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -1225,6 +1237,10 @@ code,
   width: 100%;
 }
 
+.w-\[32rem\] {
+  width: 32rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1896,6 +1912,14 @@ code,
 }
 
 @media (min-width: 1024px) {
+  .lg\:-bottom-\[120px\] {
+    bottom: -120px;
+  }
+
+  .lg\:-bottom-\[70px\] {
+    bottom: -70px;
+  }
+
   .lg\:mr-6 {
     margin-right: 1.5rem;
   }

layouts/partials/home/hero.html

@@ -17,30 +17,30 @@ <h1 class="lg:pr-4">{{ .title }}</h1>
         <img 
           src="{{ site.BaseURL }}images/home/6377545739ff1e69303c2d48_hero-circles-front-layer-full.svg" 
           alt="hero-1"
-          class="absolute z-[5] top-auto bottom-0 left-0 right-0"
+          class="absolute z-[5] top-auto -bottom-[30px] lg:-bottom-[70px] left-0 right-0"
         >
         <img 
           src="{{ site.BaseURL }}images/home/6377545748814a1516710678_hero-circles-right-layer-full.svg" 
           alt="hero-2"
-          class="absolute z-[4] max-h-full block top-[1px] bottom-0 left-auto right-[1px]"
+          class="absolute z-[4] max-h-full block top-auto -bottom-[30px] lg:-bottom-[70px] left-auto right-[1px]"
         >
         <img 
           src="{{ site.BaseURL }}images/home/6377545715fcfe2d83090dcb_hero-circles-bg.svg" 
           alt="hero-3"
-          class="relative"
+          class="relative -bottom-[30px] lg:-bottom-[70px]"
         >
         <img 
           src="{{ site.BaseURL }}images/home/63774f7f086ed575eed1aec6_hero-icons.svg" 
           alt="hero-4"
-          class="absolute z-[6] top-auto -bottom-[20%] left-[1%] right-0"
+          class="absolute z-[6] top-auto -bottom-[30%] lg:-bottom-[120px] left-[1%] right-0"
         >
         <img 
-          src="{{ site.BaseURL }}images/home/66743936356549b315dad305_score-demo.gif" 
+          src="{{ site.BaseURL }}images/home/score-demo.gif" 
           alt="hero-5"
-          class="absolute rounded-2xl w-[30rem] lg:max-w-none block -top-5 left-[12.5%] max-w-[76%]"
+          class="absolute rounded-2xl w-[32rem] lg:max-w-none block -top-4 left-[12.5%] max-w-[76%]"
         >
       </div>
     </div>
   </div>
 </section>
-{{ end }}
+{{ end }}