fix: spacings and images size

Author: stefanskoricdev

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

@@ -10,7 +10,7 @@ import Section from "../Section.astro";
 
 <Section
   contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] max-sm:gap-0`}
-  className="bg-contrast !pt-68"
+  className="bg-contrast !pt-34 md:!pt-68"
 >
   <div
     class="flex flex-col gap-2 md:gap-4 col-span-6 md:col-span-12 md:px-8 lg:col-span-5 lg:col-start-2 max-md:px-4 lg:px-0"

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

@@ -21,8 +21,10 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
 );
 ---
 
-<Section className="!p-0 !overflow-auto" contentClassName="md:max-w-screen">
-  <div class="relative pt-49 pb-24 min-[1920px]:pb-48 min-[1920px]:pt-98">
+<Section className="!p-0" contentClassName="md:max-w-screen">
+  <div
+    class="relative pt-49 pb-18 md:pb-24 min-[1920px]:pb-48 min-[1920px]:pt-98"
+  >
     <Picture
       src={team}
       alt="Developers collaborating"
@@ -72,7 +74,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
       </div>
     </div>
   </div>
-  <div class="bg-contrast max-lg:overflow-x-scroll no-scrollbar">
+  <div class="bg-contrast max-lg:overflow-x-scroll max-lg:pr-4 no-scrollbar">
     <div
       class={`${grid_classes} 
     md:max-w-[var(--max-width)] 

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

@@ -30,25 +30,25 @@ const listItemClasses =
 ---
 
 <Section
-  className="!py-18 md:!py-24 !px-4 md:!px-7"
+  className="pt-18 pb-0 md:!py-24 !px-4 md:!px-7"
   contentClassName={classnames(grid_classes, "!gap-y-7")}
 >
   {
     phases.map((p, idx) => (
       <div class="flex flex-col gap-y-8 lg:flex-row col-span-6 md:col-span-12">
         <div
           class={classnames(
-            "w-full lg:w-1/2 rounded-[48px] lg:rounded-[48px] h-[500px] md:h-[700px] flex items-center justify-center overflow-hidden",
+            "w-full lg:w-1/2 rounded-[48px] lg:rounded-[48px] h-[calc(100vw-48px)] md:h-[700px] flex items-center justify-center overflow-hidden",
             p.data.imageBgColor
           )}
         >
           <Picture
             src={images[p.data.image]()}
             alt={p.data.imageAlt}
-            class={classnames("w-full md:w-[470px]", {
+            class={classnames("w-full md:max-w-[800px] lg:w-[470px]", {
               "md:w-full": idx === phases.length - 1,
             })}
-            widths={[320, 480, 578, 640, 720, 800, 940, 1200]}
+            widths={[320, 480, 578, 640, 720, 800, 940, 1200, 1412, 1920]}
             sizes={"(max-width: 1024px) calc(100vw - 28px), 640px"}
             loading={"lazy"}
           />