feat: change service cards mobile design

Author: gloriababic

apps/website/src/components/ServiceCard.astro

@@ -19,6 +19,7 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
 <div
   class={classnames(
     `
+    stacked-card
     animation-card
     rounded-2xl
     max-lg:col-span-6
@@ -40,7 +41,7 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
       lg:p-12
       grid
       grid-cols-6
-      grid-rows-[min-content_min-content_auto]
+      pb-0
       gap-x-3
       gap-y-7
       lg:gap-x-7
@@ -53,23 +54,23 @@ const { idx, title, content, styles, imgPath, imgAlt, iconPath, classNames } =
     )}
   >
     <div
-      class="col-span-6 grid 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-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
-      <span class="flex gap-7">
-        <img src={iconPath} class="lg:mt-[2px] h-12 w-12" />
+      <span class="grid md:flex gap-7 items-center">
+        <img src={iconPath} class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
         <h4
           class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
         >
           {title}
         </h4>
       </span>
       <div
-        class="flex flex-col justify-center col-span-6 row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
+        class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
       >
         <img src={imgPath} alt={imgAlt} />
       </div>
       <div
-        class="flex flex-col lg:flex-col col-span-6 row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-4 lg:[&_p]:text-[22px] lg:[&_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]:leading-[26px] md:[&_p]:text-[22px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
         set:html={content.html}
       />
     </div>

apps/website/src/components/Services.astro

@@ -30,20 +30,17 @@ for (const service of servicesCollection) {
   contentClassName={classNames(grid_classes, "!gap-y-0 lg:pt-12")}
 >
   <div
-    class="grid gap-4 col-span-6 md:col-span-10 md:col-start-2 text-center font-bold justify-items-center"
+    class="grid gap-4 col-span-6 md:col-span-10 md:col-start-2 md:text-center font-bold md:justify-items-center"
   >
     <Pill>What we can do for you</Pill>
     <h1
-      class="text-[44px] leading-[48px] md:text-[74px] md:leading-[81px] font-medium tracking-tight mb-12 md:mb-18 lg:mb-24 text-[#3C3843]"
+      class="text-[44px] leading-[48px] md:text-[74px] md:leading-[81px] font-medium tracking-tight mb-12 md:mb-[72px] lg:mb-24 text-[#3C3843]"
     >
       Discover our <span class="text-crocoder-green"> Services </span>
     </h1>
   </div>
   <div id="services-wrapper" class="col-span-6 md:col-span-12">
-    <div
-      id="animation-wrapper"
-      class="animation-container max-lg:grid max-md:grid-cols-6 max-lg:grid-cols-12 max-lg:gap-7 lg:h-screen lg:overflow-y-scroll lg:relative"
-    >
+    <div id="animation-wrapper" class="animation-container relative">
       {
         services.map((value, idx) => (
           <ServiceCard
@@ -61,27 +58,3 @@ for (const service of servicesCollection) {
     <div id="end" class="absolute bottom-0"></div>
   </div>
 </Section>
-
-<!-- <script is:inline>
-  const container = document.querySelector(".animation-container");
-  const cards = document.querySelectorAll(".animation-card");
-
-  // Get the initial positions of the cards
-  const initialTopPositions = Array.from(cards).map((card) => card.offsetTop);
-
-  container.addEventListener("scroll", () => {
-    const scrollTop = container.scrollTop;
-
-    // Adjust the position of each card based on the scroll position
-    cards.forEach((card, index) => {
-      const offset = initialTopPositions[index] - scrollTop;
-      const maxOffset = 100 * index; // Allow each card to cover the previous one as it scrolls
-
-      if (offset < maxOffset) {
-        card.style.transform = `translateY(${Math.min(offset, maxOffset)}px)`;
-      } else {
-        card.style.transform = `translateY(0px)`;
-      }
-    });
-  });
-</script> -->

apps/website/src/content/services/lead-migrations-without-imacting-customers.md

@@ -1,5 +1,5 @@
 ---
-title: "Lead migrations without impacting customers"
+title: "Lead Migrations Without Impacting Customers"
 imgPath: "/pic-boy-schedule.png"
 imgAlt: "Illustration of a video meeting with Crocoder team member"
 idx: 1

apps/website/src/styles/main.css

@@ -53,56 +53,79 @@ body:has(nav #nav-menu-toggle:checked) {
   margin-top: 2.4rem;
 }
 
-.animation-container {
-  overflow-y: scroll;
-  background-color: #f0f0f0;
-  position: relative;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+@media (min-width: 1024px) {
+  .animation-container {
+    overflow-y: scroll;
+    height: 100vh;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 
-.animation-container::-webkit-scrollbar {
-  display: none;
-}
+  .animation-container::-webkit-scrollbar {
+    display: none;
+  }
 
-.animation-card {
-  width: 100%;
-  height: 100px;
-  position: relative;
-  z-index: 1;
-  transition: transform 0.3s ease;
-}
+  .animation-card {
+    width: 100%;
+    height: 100px;
+    position: relative;
+    z-index: 1;
+    transition: transform 0.3s ease;
+  }
 
-.animation-card:nth-child(1) {
-  position: sticky;
-  top: 0;
-}
+  .animation-card:nth-child(1) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 
-.animation-card:nth-child(1) {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
+  .animation-card:nth-child(2) {
+    position: sticky;
+    top: 120px;
+    z-index: 2;
+  }
 
-.animation-card:nth-child(2) {
-  position: sticky;
-  top: 120px;
-  z-index: 2;
-}
+  .animation-card:nth-child(3) {
+    position: sticky;
+    top: 240px;
+    z-index: 3;
+  }
 
-.animation-card:nth-child(3) {
-  position: sticky;
-  top: 240px;
-  z-index: 3;
-}
+  .animation-card:nth-child(4) {
+    position: sticky;
+    top: 360px;
+    z-index: 4;
+    height: 933px;
+  }
 
-.animation-card:nth-child(4) {
-  position: sticky;
-  top: 360px;
-  z-index: 4;
-  height: 933px;
+  .animation-card:nth-child(4) > section {
+    height: 933px;
+  }
 }
 
-.animation-card:nth-child(4) > section {
-  height: 933px;
+@media not all and (min-width: 1024px) {
+  .animation-container {
+    height: 2540px;
+  }
+
+  .stacked-card {
+    position: absolute;
+    height: 710px;
+  }
+
+  .stacked-card:nth-child(1) {
+    top: 0;
+  }
+
+  .stacked-card:nth-child(2) {
+    top: calc(710px - 100px);
+  }
+
+  .stacked-card:nth-child(3) {
+    top: calc(1420px - 200px);
+  }
+
+  .stacked-card:nth-child(4) {
+    top: calc(2130px - 300px);
+  }
 }