fix: remove snap from desktop and add to mobile

Author: gloriababic

apps/website/src/components/vibe-code-mvp/HowItWorks.astro

@@ -28,13 +28,13 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
 ---
 
 <Section
-  className="!py-18 md:!py-31 overflow-unset !px-0 "
+  className="!py-18 md:!py-31 overflow-unset !px-0"
   contentClassName={classnames(
     grid_classes,
     "!gap-y-7 items-start pl-4.5 md:pl-7 lg:px-7",
   )}
 >
-  <div class="col-span-6 md:col-span-12 lg:col-span-6 lg:sticky">
+  <div class="col-span-6 md:col-span-12 lg:col-span-6 lg:sticky lg:top-24">
     <div class="flex flex-col gap-4">
       <Pill
         className="text-sm sm:text-base md:text-lg px-2 py-1 min-[390px]:px-3 min-[390px]:py-1.5 sm:px-4 sm:py-2 max-h-[36px]"
@@ -115,18 +115,13 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
       lg:col-start-7
       lg:flex-col
       lg:gap-8
-      lg:pr-0
-      lg:overflow-y-auto
-      lg:snap-mandatory
-      lg:scroll-smooth
-      lg:snap-y
-      lg:h-[400px]"
+      lg:pr-0"
   >
     {
       steps.map((s, idx) => (
         <div
           class={classnames(
-            "snap-center p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)] lg:snap-start",
+            "snap-center p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)]",
             s.data.bgColor,
           )}
         >

apps/website/src/components/vibe-code-mvp/WhyWorkWithUs.astro

@@ -1,12 +1,11 @@
 ---
-import { Picture } from "astro:assets";
+import { Image, Picture } from "astro:assets";
+import { getCollection } from "astro:content";
 import team from "../../assets/team.jpg";
 import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../../components/_grid";
 import "../../styles/main.css";
-import { getCollection } from "astro:content";
-import { Image } from "astro:assets";
 
 const reasons = (await getCollection("vibe_code_mvp_why_work_with_us")) as {
   data: {
@@ -17,7 +16,7 @@ const reasons = (await getCollection("vibe_code_mvp_why_work_with_us")) as {
 }[];
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/*.svg"
+  "/src/assets/*.svg",
 );
 ---
 
@@ -85,11 +84,11 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
     `}
     >
       <div
-        class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden"
+        class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden snap-mandatory snap-x"
       >
         {
           reasons.map((r) => (
-            <div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto">
+            <div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto snap-center">
               <Image
                 src={images[r.data.image]()}
                 alt={r.data.imageAlt}

apps/website/src/components/vibe-code-mvp/WorkWithUsDesktop.astro

@@ -1,12 +1,12 @@
 ---
+import { Picture } from "astro:assets";
 import { getCollection } from "astro:content";
-import Section from "../Section.astro";
 import classnames from "classnames";
 import Pill from "../Pill.astro";
+import Section from "../Section.astro";
+import { grid_classes } from "../_grid";
 import CircleCheck from "../icons/CircleCheck.astro";
 import CircleX from "../icons/CircleX.astro";
-import { grid_classes } from "../_grid";
-import { Picture } from "astro:assets";
 
 const phases = (await getCollection("vibe_code_mvp_phases")) as {
   data: {
@@ -22,7 +22,7 @@ const phases = (await getCollection("vibe_code_mvp_phases")) as {
 }[];
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/*.png"
+  "/src/assets/*.png",
 );
 
 const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
@@ -33,7 +33,7 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
   contentClassName={classnames(grid_classes, "!gap-y-7 items-start")}
   idx="work-with-us"
 >
-  <div class="col-span-6 sticky">
+  <div class="col-span-6 sticky top-31">
     <div class="relative h-[700px]">
       {
         phases.map((p, idx) => (
@@ -56,7 +56,7 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
               p.data.imageBgColor,
               {
                 "opacity-100": !idx,
-              }
+              },
             )}
           >
             <Picture
@@ -74,12 +74,12 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
       }
     </div>
   </div>
-  <div class="col-span-6 col-start-7 flex flex-col gap-8 snap-mandatory snap-y overflow-y-auto h-[700px] no-scrollbar">
+  <div class="col-span-6 col-start-7 flex flex-col gap-8">
     {
       phases.map((p, idx) => (
         <div
           data-index={idx}
-          class="phase snap-start flex flex-col justify-center px-[80px] min-h-[700px]"
+          class="phase flex flex-col justify-center px-[80px] min-h-[700px]"
         >
           <Pill className="text-sm sm:text-base px-4 py-2 mb-4">
             {p.data.pill}