Feat/vibe code page improvements (#654)

* feat: add go logo

* feat: add snap scroll

* fix: add cut go logo and remove italic

* fix: remove snap from desktop and add to mobile

* fix: change padding

Author: gloriababic

apps/website/src/assets/go_logo.png

@@ -17,7 +17,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
 <base-contact-form data-id={formId} class={classnames(classNames)}>
   <form
     class={classnames(
-      "group/contact-us flex flex-col gap-2 bg-white rounded-xl px-7 relative",
+      "group/contact-us flex flex-col gap-2 bg-white rounded-xl px-4 sm:px-7 relative",
       formClassNames,
     )}
     id={formId}

apps/website/src/components/BaseContactForm.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-34 md:!pt-68"
+  className="bg-contrast !pt-34 md:!pt-68 !px-4.5"
   idx="get-in-touch"
 >
   <div

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

@@ -27,7 +27,7 @@ import RightArrow from "../icons/RightArrow.astro";
   </div>
   <div class="mx-auto xl:px-0">
     <div
-      class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-24 md:!py-[144px] md:mx-auto relative z-[2] min-[1281px]:px-0`}
+      class={`${grid_classes} md:max-w-[var(--max-width)] px-4.5 md:px-7 py-24 md:!py-[144px] md:mx-auto relative z-[2] min-[1281px]:px-0`}
     >
       <div
         class="row-start-1

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

@@ -5,6 +5,7 @@ import classnames from "classnames";
 import nextLogo from "../../assets/nextjs_logo.png";
 import nodeLogo from "../../assets/node_logo.png";
 import reactLogo from "../../assets/react_logo.png";
+import goLogo from "../../assets/go_logo.png";
 import Pill from "../Pill.astro";
 import Section from "../Section.astro";
 import { grid_classes } from "../_grid";
@@ -22,15 +23,15 @@ const steps = (await getCollection("vibe_code_mvp_how_it_works")) as {
 }[];
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/*.svg"
+  "/src/assets/*.svg",
 );
 ---
 
 <Section
   className="!py-18 md:!py-31 overflow-unset !px-0"
   contentClassName={classnames(
     grid_classes,
-    "!gap-y-7 items-start pl-4 md:pl-7 lg:px-7 xl:px-0"
+    "!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 lg:top-24">
@@ -65,7 +66,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
     </div>
     <div class="mt-12">
       <p class="text-[22px] leading-8">We're experts in:</p>
-      <div class="flex gap-x-7 gap-y-4 flex-wrap items-center">
+      <div class="flex gap-x-6 flex-wrap items-center">
         <Image
           src={nodeLogo}
           alt="Node JS logo"
@@ -87,6 +88,14 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
           height={41}
           loading={"lazy"}
         />
+        <Image
+          src={goLogo}
+          alt="Golang logo"
+          width={100}
+          height={41}
+          loading={"lazy"}
+        />
+        <span class="text-gray-600 text-[18px]">and more…</span>
       </div>
     </div>
   </div>
@@ -95,23 +104,25 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
       flex
       gap-4
       pr-4
-      overflow-x-auto
+      max-lg:overflow-x-auto
       no-scrollbar
+      max-lg:snap-x
+      max-lg:snap-mandatory
+      scroll-smooth
       md:col-span-12
       md:pr-7
       lg:col-span-6
       lg:col-start-7
       lg:flex-col
       lg:gap-8
-      lg:pr-0
-      lg:overflow-x-auto"
+      lg:pr-0"
   >
     {
       steps.map((s, idx) => (
         <div
           class={classnames(
-            "p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)]",
-            s.data.bgColor
+            "snap-center p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)]",
+            s.data.bgColor,
           )}
         >
           <Image

apps/website/src/components/vibe-code-mvp/HowItWorks.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",
 );
 ---
 
@@ -42,7 +41,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
     </div>
     <div class="mx-auto xl:px-0">
       <div
-        class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
+        class={`${grid_classes} md:max-w-[var(--max-width)] px-4.5 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
       >
         <div
           class="row-start-1
@@ -78,18 +77,18 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
     <div
       class={`${grid_classes} 
     md:max-w-[var(--max-width)] 
-    pl-4 md:pl-7 pr-0 lg:pr-7 py-0 
+    pl-4.5 md:pl-7 pr-0 lg:pr-7 py-0 
     md:mx-auto 
     relative 
     min-[1281px]:px-0 
     `}
     >
       <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/WhyWorkWithUs.astro

@@ -30,7 +30,7 @@ const listItemClasses =
 ---
 
 <Section
-  className="pt-18 pb-0 md:!py-24 !px-4 md:!px-7"
+  className="pt-18 pb-0 md:!py-24 md:!px-7 !px-4.5"
   contentClassName={classnames(grid_classes, "!gap-y-7")}
 >
   {

apps/website/src/components/vibe-code-mvp/WorkWithUs.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";
@@ -56,7 +56,7 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
               p.data.imageBgColor,
               {
                 "opacity-100": !idx,
-              }
+              },
             )}
           >
             <Picture