From 9b8c90500d7ac3540e4546c6815b6d1ebf98a6b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ante=20Kocei=C4=87?= <ante@crocoder.dev>
Date: Thu, 24 Jul 2025 17:49:51 +0200
Subject: [PATCH 1/3] Adjusted animations for smaller screens

---
 apps/website/src/components/ServiceCard.astro | 16 +++++----
 apps/website/src/styles/main.css              | 33 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro
index 4a0cb4e7..64da2a95 100644
--- a/apps/website/src/components/ServiceCard.astro
+++ b/apps/website/src/components/ServiceCard.astro
@@ -42,11 +42,10 @@ const image = await src();
     max-lg:col-span-6
     md:gap-x-7
     w-full
-    absolute
-    h-[710px]
+    [w-425px]:h-[710px]
     overflow-hidden
     `,
-    styles,
+    styles
   )}
 >
   <section
@@ -67,21 +66,26 @@ const image = await src();
       lg:grid-rows-[min-content_auto]
       backdrop-blur-[15px]
       `,
-      classNames,
+      classNames
     )}
   >
     <div
       class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
       <span class="grid md:flex gap-7">
-        <img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
+        <img
+          src={iconPath}
+          alt=""
+          role="presentation"
+          class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12"
+        />
         <div class="gap-y-2 flex flex-col">
           <h4
             class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
           >
             {title}
           </h4>
-          <p class="text-lg">{subtitle}</p>
+          <p class="text-sm md:text-lg">{subtitle}</p>
         </div>
       </span>
       <div
diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
index d0d40dc6..b28b62ca 100644
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -121,7 +121,7 @@ body:has(nav #nav-menu-toggle:checked) {
   border-color: #607A1A;
 }
 
-@media (min-width: 320px) {
+@media (min-width: 768px) {
   .animation-container {
     /* 4 x card height - 3 x negative margin top */
     height: calc((4 * 710px) - (3 * 50));
@@ -151,3 +151,34 @@ body:has(nav #nav-menu-toggle:checked) {
     top: 460px;
   }
 }
+
+@media (min-width: 425px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 710px) - (3 * 50));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 710px;
+    margin-top: -50px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 100px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 170px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 240px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 310px;
+  }
+}

From 00e7d74379e73117be8a55c62568cae4b8ef70d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ante=20Kocei=C4=87?= <ante@crocoder.dev>
Date: Fri, 25 Jul 2025 08:29:05 +0200
Subject: [PATCH 2/3] Fixed order of styles

---
 apps/website/src/styles/main.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
index b28b62ca..b980d02b 100644
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -121,7 +121,7 @@ body:has(nav #nav-menu-toggle:checked) {
   border-color: #607A1A;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 425px) {
   .animation-container {
     /* 4 x card height - 3 x negative margin top */
     height: calc((4 * 710px) - (3 * 50));
@@ -140,19 +140,19 @@ body:has(nav #nav-menu-toggle:checked) {
   }
 
   .animation-card:nth-child(2) {
-    top: 220px;
+    top: 170px;
   }
 
   .animation-card:nth-child(3) {
-    top: 340px;
+    top: 240px;
   }
 
   .animation-card:nth-child(4) {
-    top: 460px;
+    top: 310px;
   }
 }
 
-@media (min-width: 425px) {
+@media (min-width: 768px) {
   .animation-container {
     /* 4 x card height - 3 x negative margin top */
     height: calc((4 * 710px) - (3 * 50));
@@ -171,14 +171,14 @@ body:has(nav #nav-menu-toggle:checked) {
   }
 
   .animation-card:nth-child(2) {
-    top: 170px;
+    top: 220px;
   }
 
   .animation-card:nth-child(3) {
-    top: 240px;
+    top: 340px;
   }
 
   .animation-card:nth-child(4) {
-    top: 310px;
+    top: 460px;
   }
 }

From 127fec951f87c32206fdcd90012b64d129057a6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ante=20Kocei=C4=87?= <ante@crocoder.dev>
Date: Wed, 6 Aug 2025 11:06:40 +0200
Subject: [PATCH 3/3] Removed extra </br>

---
 .../src/content/services/improving-engineering-tempo.md       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/services/improving-engineering-tempo.md b/apps/website/src/content/services/improving-engineering-tempo.md
index c934da9c..d1db9f78 100644
--- a/apps/website/src/content/services/improving-engineering-tempo.md
+++ b/apps/website/src/content/services/improving-engineering-tempo.md
@@ -11,7 +11,7 @@ bgColor: "bg-[#3C3843E5]/[0.9]"
 By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures.
 </br>
 </br>
-</br>
+
 <div class="flex justify-end items-center gap-4">
   <p class="text-right">Schedule a free DevEx audit</p>
   <a id="contact-us-our-services-cta"
@@ -19,4 +19,4 @@ By optimizing workflows and breaking down tasks, we boost engineering tempo and
      href="/contact">
     Contact Us
   </a>
-</div>
\ No newline at end of file
+</div>