FEAT: Update specialization page

apps/website/src/components/staff-agmentation/MainContent.astro

@@ -43,7 +43,7 @@ const { data } = content;
 
 <Section
   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"
+  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"
 >
   <div
     class={`${grid_classes} md:max-w-[var(--max-width)] md:mx-auto relative z-[2]`}
@@ -114,60 +114,63 @@ const { data } = content;
         }
       </div>
     </div>
+  </div>
+  <div class="px-4 md:px-7 py-12 lg:py-24">
     <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"
+      class={`${grid_classes} md:max-w-[var(--max-width)] md:mx-auto relative z-[2]`}
     >
-      <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]"
+      <div
+        class="col-span-6
+          bg-[#3C3843CC]
+          rounded-[48px]
+          py-12
+          px-4
+          flex
+          flex-col
+          items-center
+          overflow-hidden
+          md:col-span-12
+          lg:p-12"
       >
-        <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>
-          ))
-        }
+        <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>
+        <Image
+          src={idealForIllustration}
+          alt="Illustration of crocodile and developers collaborating"
+          class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
+        />
       </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/components/staff-agmentation/Specialization.astro

@@ -3,7 +3,8 @@ import { Image } from "astro:assets";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../../components/_grid";
 import classnames from "classnames";
-import { getCollection, type CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import Pill from "../Pill.astro";
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
   "/src/assets/*.svg"
@@ -23,10 +24,13 @@ const specializationCards = collection[0].data.specializations as {
 <Section className="bg-white/20 !py-12 md:!py-24">
   <div class={`${grid_classes} gap-8 md:gap-16`}>
     <div class="col-span-6 md:col-span-12 text-center px-4">
+      <Pill className="mx-auto">Our Expertise</Pill>
       <h2
-        class="text-[28px] leading-[32px] md:text-[74px] md:leading-[82px] tracking-tight font-medium text-secondary mb-4"
+        class="text-[28px] leading-[32px] md:text-[74px] md:leading-[82px] tracking-tight font-medium text-secondary my-4"
       >
-        We Specialize in Building<br />Web Products
+        We Specialize in Building<br /><span class="text-crocoder-green"
+          >Web Products</span
+        >
       </h2>
       <p
         class="text-sm md:text-base leading-[22px] md:leading-[26px] text-secondary max-w-[704px] mx-auto"

apps/website/src/content/staff_specializations/specializations.md

@@ -4,29 +4,29 @@ specializations:
     {
       title: "Full Stack Development",
       description: "Frontend, backend, or complete product development",
-      image: "/src/assets/code-xml-service-icon.svg",
-      bgColor: "bg-[rgba(254,195,67,0.9)]",
+      image: "/src/assets/code_monitor_dark.svg",
+      bgColor: "bg-crocoder-orange",
       textColor: "text-secondary",
     },
     {
       title: "Scalable Architecture",
       description: "Maintainable, future-proof system design",
-      image: "/src/assets/zap-service-icon.svg",
-      bgColor: "bg-[rgba(78,91,200,0.9)]",
+      image: "/src/assets/performance_increase.svg",
+      bgColor: "bg-[#6572DF]",
       textColor: "text-white",
     },
     {
       title: "Feature Development",
       description: "New features, refactors, or greenfield builds",
       image: "/src/assets/hands-puzzle-service-icon.svg",
-      bgColor: "bg-[#E8E8E8]",
+      bgColor: "bg-[#F4F4F4]",
       textColor: "text-secondary",
     },
     {
       title: "Cross-Functional Collaboration",
       description: "Seamless work with product and design teams",
       image: "/src/assets/crm-service-icon.svg",
-      bgColor: "bg-[rgba(66,76,109,0.9)]",
+      bgColor: "bg-[#555E7C]",
       textColor: "text-white",
     },
   ]