From c8b5dfed5b739aa6c256fa5e3a1f4c731b200d5d Mon Sep 17 00:00:00 2001
From: gloria <gloria@crocoder.dev>
Date: Fri, 1 Aug 2025 17:19:02 +0200
Subject: [PATCH 1/2] fix: adjust card folding and font size for different
 screens

---
 apps/website/src/components/ServiceCard.astro | 20 ++--
 .../create-an-evolving-architecture.md        | 13 ++-
 .../services/improving-engineering-tempo.md   |  9 +-
 apps/website/src/styles/main.css              | 93 +++++++++++++++++++
 4 files changed, 116 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro
index 4a0cb4e7..f803c535 100644
--- a/apps/website/src/components/ServiceCard.astro
+++ b/apps/website/src/components/ServiceCard.astro
@@ -54,7 +54,8 @@ const image = await src();
       `text-white
       h-full
       lg:h-[620px]
-      p-7
+      p-5
+      md:p-7
       lg:p-12
       grid
       grid-cols-6
@@ -71,17 +72,22 @@ const image = await src();
     )}
   >
     <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"
+      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-4 md: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" />
+      <span class="grid md:flex gap-4 md:gap-7">
+        <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"
+            class="font-medium text-lg leading-[22px] md:text-[28px] md:leading-[30px] text-left"
           >
             {title}
           </h4>
-          <p class="text-lg">{subtitle}</p>
+          <p class="text-base md:text-lg">{subtitle}</p>
         </div>
       </span>
       <div
@@ -97,7 +103,7 @@ const image = await src();
         />
       </div>
       <div
-        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
+        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:text-sm [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
         set:html={content.html}
       />
     </div>
diff --git a/apps/website/src/content/services/create-an-evolving-architecture.md b/apps/website/src/content/services/create-an-evolving-architecture.md
index 1633f2da..aa1b64d8 100644
--- a/apps/website/src/content/services/create-an-evolving-architecture.md
+++ b/apps/website/src/content/services/create-an-evolving-architecture.md
@@ -10,10 +10,9 @@ bgColor: "bg-[#424C6DE5]/[0.9]"
 
 From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands.
 </br>
-</br>
-</br>
-<a
-    class='underline underline-offset-2'
-    href="/blog/using-lago-to-create-a-flexible-billing-system">
-Case Study: Submix Billing System
-</a>
+
+<div class="pt-6">
+    <a class='underline underline-offset-2 text-base md:text-[20px]' href="/blog/using-lago-to-create-a-flexible-billing-system">
+        Case Study: Submix Billing System
+    </a>
+</div>
diff --git a/apps/website/src/content/services/improving-engineering-tempo.md b/apps/website/src/content/services/improving-engineering-tempo.md
index c934da9c..b76980de 100644
--- a/apps/website/src/content/services/improving-engineering-tempo.md
+++ b/apps/website/src/content/services/improving-engineering-tempo.md
@@ -10,13 +10,12 @@ 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">
+
+<div class="flex justify-end items-center gap-4 pt-6">
   <p class="text-right">Schedule a free DevEx audit</p>
   <a id="contact-us-our-services-cta"
-     class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
+     class="flex font-medium w-fit h-[61px] items-center px-4 leading-tight py-2 rounded-md text-sm md:text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90 max-md:h-[45px]"
      href="/contact">
     Contact Us
   </a>
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
index d0d40dc6..ea94918d 100644
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -151,3 +151,96 @@ body:has(nav #nav-menu-toggle:checked) {
     top: 460px;
   }
 }
+
+@media (width <= 48rem) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: -21px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 150px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 220px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 440px;
+  }
+}
+
+@media (width <= 435px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 100px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 140px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}
+
+@media (width <= 375px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 100px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}

From fac774a4b6cb2268f325913b3aa868500302033a Mon Sep 17 00:00:00 2001
From: gloria <gloria@crocoder.dev>
Date: Tue, 12 Aug 2025 14:25:02 +0200
Subject: [PATCH 2/2] fix: change tablet services layout

---
 apps/website/src/styles/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
index ea94918d..f6861161 100644
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -152,7 +152,7 @@ body:has(nav #nav-menu-toggle:checked) {
   }
 }
 
-@media (width <= 48rem) {
+@media (width < 768px) {
   .animation-container {
     /* 4 x card height - 3 x negative margin top */
     height: calc((4 * 680px) - (3 * 20));