Feat ideal for section redesign (#619)

* feat: Redesign of 'Ideal for teams who' section

* fix: Smaller styling issues

Author: stefanskoricdev

apps/website/src/assets/croco_in_cloud.png

@@ -4,7 +4,7 @@ import classnames from "classnames";
 
 type Props = HTMLAttributes<"svg"> & { classNames?: string };
 
-const { width, height, classNames } = Astro.props;
+const { width, height, classNames, stroke } = Astro.props;
 ---
 
 <svg
@@ -17,7 +17,7 @@ const { width, height, classNames } = Astro.props;
 >
   <path
     d="M6.96437 12.7707L9.75943 15.9083C9.83415 15.9946 9.92716 16.0631 10.0317 16.109C10.1363 16.1548 10.2497 16.1768 10.3638 16.1733C10.4787 16.1713 10.5919 16.1446 10.6956 16.095C10.7993 16.0454 10.891 15.974 10.9647 15.8858L17.5048 8.06773M22.4038 12C22.4038 17.7459 17.7459 22.4038 12 22.4038C6.25414 22.4038 1.59619 17.7459 1.59619 12C1.59619 6.25414 6.25414 1.59619 12 1.59619C17.7459 1.59619 22.4038 6.25414 22.4038 12Z"
-    stroke="#00A708"
+    stroke={stroke || "#00A708"}
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"></path>

apps/website/src/assets/pic_phase_3.png

@@ -1,13 +1,13 @@
 ---
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
-import circleCheckIcon from "../../assets/circle-check-icon.svg";
-import paulJeszenszky from "../../assets/paul-jeszenszky.png";
-import picCrocoderTeam from "../../assets/pic-crocoder-team-3362ae.png";
-import quoteIcon from "../../assets/quote-icon.svg";
-import targetIconCorrect from "../../assets/target-icon-correct.svg";
+import crocoIcon from "../../assets/croco_in_cloud.png";
+import idealForIllustration from "../../assets/pic_phase_3.png";
+import staffCollaborationImg from "../../assets/staff_collaboration.png";
 import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
+import { grid_classes } from "../_grid";
+import CircleCheck from "../icons/CircleCheck.astro";
 
 export type MainContent = {
   pillText: string;
@@ -29,7 +29,7 @@ const staffContent = (await getCollection("staff_augmentation")) as {
 }[];
 
 const contentVariantId = String(
-  Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
+  Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
 );
 
 let content = staffContent.find((c) => c.data.id === contentVariantId);
@@ -42,167 +42,132 @@ const { data } = content;
 ---
 
 <Section
-  className="!py-0 !px-0"
-  contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full before:bg-[#4E5BC8] md:max-w-screen"
+  className="!p-0 bg-[#4E5BC8]"
+  contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full bg-contrast rounded-t-4xl md:rounded-t-[96px] md:max-w-screen overflow-hidden pb-12 lg:pb-24"
 >
   <div
-    class="px-4 md:px-7 py-18 md:py-24 bg-[#1E1A1A] rounded-t-4xl md:rounded-t-[96px]"
+    class={`${grid_classes} md:max-w-[var(--max-width)] md:mx-auto relative z-[2]`}
   >
-    <div class="md:max-w-[var(--max-width)] md:mx-auto">
-      <!-- Section Title -->
+    <div
+      class="relative
+      col-span-6
+      overflow-hidden
+      h-[calc(120vw+100px)]
+      max-h-[700px]
+      md:col-span-12
+      md:h-[70vw]
+      lg:col-span-6
+      lg:max-h-[870px]
+      xl:overflow-visible"
+    >
       <div
-        class="flex flex-col items-center gap-4 mb-12 md:mb-24 px-1 md:px-2 xl:px-[104px] mx-auto"
+        class="aspect-square
+          relative
+          rounded-full
+          overflow-hidden
+          w-[120%]
+          max-w-[630px]
+          -left-1/4
+          -top-1/12
+          md:w-[70%]
+          md:-left-18
+          lg:w-[120%]
+          lg:-left-1/5
+          lg:max-w-[800px]"
       >
-      <Pill className="min-w-0 w-auto max-w-[280px] !whitespace-normal break-words text-center sm:w-fit sm:max-w-none">
-        {data.main.pillText}
-      </Pill>
-              <h2
-          class="text-[32px] leading-[36px] md:text-[48px] md:leading-[52px] lg:text-[60px] lg:leading-[66px] xl:text-[74px] xl:leading-[81px] font-medium tracking-[-2%] text-center"
+        <Image
+          src={staffCollaborationImg}
+          alt="Two male developers in CroCoder hoodies collaborating"
+          class="absolute top-1/12 left-1/6 md:left-0"
+        />
+      </div>
+      <Image
+        src={crocoIcon}
+        alt="Illustration of a crocodile in a cloud with laptop"
+        class="absolute bottom-0 left-4 lg:left-7 w-[300px]"
+      />
+    </div>
+    <div
+      class="col-span-6 md:col-span-12 py-12 lg:py-24 px-4 md:px-7 lg:col-span-6 lg:pl-0"
+    >
+      <div class="flex flex-col gap-4">
+        <Pill>We're 100% Focused on results</Pill>
+        <h2
+          class="text-[32px]
+            leading-[36px]
+            font-medium
+            tracking-[-2%]
+            md:text-[48px]
+            md:leading-[52px]
+            lg:text-[54px]
+            lg:leading-[1.1]"
         >
-          <span class="text-white block md:whitespace-nowrap"
-            >{data.main.title_1}</span
-          >
-          <span class="text-[#FEC343] block">{data.main.title_2}</span>
+          <span class="text-white block"> Flexible, Embedded Engineers, </span>
+          <span class="text-[#FEC343] block">Ready to Plug-In</span>
         </h2>
       </div>
-
-      <!-- Content Container -->
-      <div class="pb-12 md:pb-24">
-        <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
-          <!-- Left Column -->
-          <div class="space-y-4">
-            <!-- Main Description Card -->
-            <div
-              class="bg-[rgba(66,76,109,0.9)] rounded-2xl p-6 md:p-12 text-white"
-            >
-              <div
-                class="w-[60px] h-[60px] md:w-[90px] md:h-[90px] flex items-center justify-center mb-6 md:mb-7"
-              >
-                <Image
-                  src={targetIconCorrect}
-                  alt="Target icon"
-                  width={90}
-                  height={90}
-                  loading="lazy"
-                  class="w-full h-full"
-                />
-              </div>
-              <div class="space-y-4 md:space-y-7">
-                {
-                  data.main.aboutUs.map((about) => (
-                    <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px] font-normal">
-                      {about}
-                    </p>
-                  ))
-                }
-              </div>
-            </div>
-
-            <!-- Testimonial Card -->
-            <div
-              class="bg-white rounded-2xl p-4 md:p-7 backdrop-blur-[30px] flex flex-col md:flex-row gap-4"
-            >
-              <div class="flex-1">
-                <p
-                  class="text-sm md:text-base leading-[22px] md:leading-[26px] text-black mb-4 md:mb-7"
-                >
-                  We have found the perfect extension of our team with CroCoder.
-                  We operate as one team, celebrating our wins and working
-                  through the challenges together. They "own" the roadmap,
-                  deadlines and outcomes with us — from the ideation and
-                  direction stages through to post-launch optimization.
-                </p>
-                <div class="flex items-center gap-3">
-                  <div
-                    class="w-[48px] h-[48px] md:w-[72px] md:h-[72px] rounded-full overflow-hidden flex-shrink-0"
-                  >
-                    <Image
-                      src={paulJeszenszky}
-                      alt="Paul Jeszenszky"
-                      width={72}
-                      height={72}
-                      class="w-full h-full object-cover"
-                      loading="lazy"
-                    />
-                  </div>
-                  <div>
-                    <p
-                      class="text-[16px] md:text-[20px] leading-[22px] md:leading-[28px] text-black font-medium"
-                    >
-                      Paul Jeszenszky
-                    </p>
-                    <p
-                      class="text-[14px] md:text-[20px] leading-[20px] md:leading-[28px] text-black"
-                    >
-                      Submix co-founder & CEO
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="w-[60px] h-[40px] md:w-[82px] md:h-[54px] opacity-20 self-start md:self-auto"
-              >
-                <Image
-                  src={quoteIcon}
-                  alt="Quote icon"
-                  width={82}
-                  height={54}
-                  loading="lazy"
-                  class="w-full h-full"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- Right Column - Ideal for Teams Card -->
-          <div
-            class="bg-[rgba(60,56,67,0.8)] rounded-2xl p-6 md:p-12 text-white flex flex-col justify-center"
-          >
-            <h3
-              class="text-[24px] leading-[28px] md:text-[36px] md:leading-[40px] font-medium mb-4 md:mb-7"
-            >
-              Ideal for Teams who
-            </h3>
-            <div class="space-y-4 md:space-y-7 mb-4 md:mb-7">
-              {
-                content.data.main.fitChecks.map((check) => (
-                  <div class="flex gap-4 md:gap-7">
-                    <div class="w-8 h-8 md:w-12 md:h-12 flex-shrink-0">
-                      <Image
-                        src={circleCheckIcon}
-                        alt="Check icon"
-                        width={48}
-                        height={48}
-                        loading="lazy"
-                        class="w-full h-full"
-                      />
-                    </div>
-                    <div>
-                      <p class="text-[16px] mb-2 leading-[24px] md:text-[22px] md:leading-[32px] md:h-8 flex items-center font-semibold">
-                        {check.highlight}
-                      </p>
-                      <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px]">
-                        {check.text}
-                      </p>
-                    </div>
-                  </div>
-                ))
-              }
-            </div>
-
-            <div class="flex justify-center">
-              <Image
-                src={picCrocoderTeam}
-                alt="CroCoder team"
-                widths={[320, 480, 640, 800]}
-                sizes="(max-width: 768px) calc(100vw - 32px), 640px"
-                loading="lazy"
-                class="w-full max-w-[625px] h-auto"
+      <div class="pt-12 flex flex-col gap-8">
+        {
+          data.main.aboutUs.map((p) => (
+            <p class="text-[22px] leading-8 text-white">{p}</p>
+          ))
+        }
+      </div>
+    </div>
+    <div
+      class="col-span-6
+        bg-[#3C3843CC]
+        rounded-[48px]
+        mx-4
+        py-12
+        px-4
+        flex
+        flex-col
+        items-center
+        overflow-hidden
+        md:col-span-12
+        md:mx-7
+        lg:p-12
+        xl:mx-7"
+    >
+      <h2
+        class="text-[32px]
+          leading-[36px]
+          font-medium
+          tracking-[-2%]
+        text-white
+          text-center
+          md:text-[48px]
+          md:leading-[52px]
+          lg:text-[54px]
+          lg:leading-[1.1]"
+      >
+        <span class="text-[#FEC343]">Ideal</span> For Teams Who
+      </h2>
+      <div class="flex flex-col lg:flex-row gap-7 mt-12">
+        {
+          data.main.fitChecks.map((c) => (
+            <div class="flex lg:flex-col items-center gap-4 grow basis-0">
+              <CircleCheck
+                width={48}
+                height={48}
+                stroke="#FEC343"
+                classNames="min-w-12"
               />
+              <p class="text-[22px] leading-8 text-white lg:text-center">
+                <strong>{c.highlight}</strong>
+                <br />
+                {c.text}
+              </p>
             </div>
-          </div>
-        </div>
+          ))
+        }
       </div>
+      <Image
+        src={idealForIllustration}
+        alt="Illustration of crocodile and developers collaborating"
+        class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
+      />
     </div>
   </div>
 </Section>

apps/website/src/assets/staff_collaboration.png

@@ -33,18 +33,3 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
 
   <Footer />
 </Base>
-
-<script is:inline>
-  function handleActionHeroClick() {
-    window.navScroll = true;
-    setTimeout(() => {
-      window.navScroll = false;
-    }, 1500);
-  }
-
-  document
-    .querySelectorAll("#book-a-call-action-hero")
-    .forEach((element) =>
-      element.addEventListener("click", handleActionHeroClick),
-    );
-</script>