From 04931ceecb72535f9c479895478ec18c797bef0c Mon Sep 17 00:00:00 2001
From: stefanskoricdev <stefan@crocoder.dev>
Date: Fri, 19 Sep 2025 15:04:46 +0200
Subject: [PATCH] feat: Update specialization page

---
 apps/website/src/assets/code_monitor_dark.svg |   9 ++
 .../src/assets/performance_increase.svg       |   8 ++
 .../staff-agmentation/MainContent.astro       | 105 +++++++++---------
 .../staff-agmentation/Specialization.astro    |  10 +-
 .../staff_specializations/specializations.md  |  12 +-
 5 files changed, 84 insertions(+), 60 deletions(-)
 create mode 100644 apps/website/src/assets/code_monitor_dark.svg
 create mode 100644 apps/website/src/assets/performance_increase.svg

diff --git a/apps/website/src/assets/code_monitor_dark.svg b/apps/website/src/assets/code_monitor_dark.svg
new file mode 100644
index 00000000..0fb3b884
--- /dev/null
+++ b/apps/website/src/assets/code_monitor_dark.svg
@@ -0,0 +1,9 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.4285 11.1431H5.57136C4.03285 11.1431 2.78564 12.3903 2.78564 13.9288V58.5002C2.78564 60.0385 4.03285 61.2859 5.57136 61.2859H72.4285C73.9668 61.2859 75.2142 60.0385 75.2142 58.5002V13.9288C75.2142 12.3903 73.9668 11.1431 72.4285 11.1431Z" stroke="#3C3843" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.4286 61.2861L27.8572 75.2147" stroke="#3C3843" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.5713 61.2861L50.1427 75.2147" stroke="#3C3843" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.2856 75.2144H55.7142" stroke="#3C3843" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.0713 29.25L15.3213 37.6071L23.6784 44.5714" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54.3213 30.6431L62.6785 37.6074L52.9285 45.9645" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.8213 48.7501L43.1784 23.6787" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/assets/performance_increase.svg b/apps/website/src/assets/performance_increase.svg
new file mode 100644
index 00000000..e48c21c0
--- /dev/null
+++ b/apps/website/src/assets/performance_increase.svg
@@ -0,0 +1,8 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9062 59.9414H13.3594C12.6629 59.9505 11.9975 60.2311 11.505 60.7236C11.0125 61.2162 10.7318 61.8817 10.7227 62.5781V84.5508H26.543V62.5781C26.5339 61.8817 26.2531 61.2162 25.7606 60.7236C25.2681 60.2311 24.6027 59.9505 23.9062 59.9414Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.2734 45.8789H39.7266C39.0301 45.888 38.3646 46.1686 37.8722 46.6611C37.3797 47.1537 37.0989 47.8192 37.0898 48.5156V84.5508H52.9102V48.5156C52.901 47.8192 52.6205 47.1537 52.1279 46.6611C51.6354 46.1686 50.9699 45.888 50.2734 45.8789Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M76.6406 31.8164H66.0938C65.3973 31.8255 64.7318 32.1062 64.2393 32.5987C63.7467 33.0913 63.4662 33.7566 63.457 34.4531V84.5508H79.2773V34.4531C79.2682 33.7566 78.9877 33.0913 78.4951 32.5987C78.0026 32.1062 77.3371 31.8255 76.6406 31.8164Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.44922 84.5508H84.5508" stroke="#FEB534" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5081 35.2954L74.0043 9.63135" stroke="#FEB534" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M69.8201 20.8477L74.0037 9.63281L62.824 5.44922" stroke="#FEB534" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/components/staff-agmentation/MainContent.astro b/apps/website/src/components/staff-agmentation/MainContent.astro
index 3f0c2bb5..384d5473 100644
--- a/apps/website/src/components/staff-agmentation/MainContent.astro
+++ b/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>
diff --git a/apps/website/src/components/staff-agmentation/Specialization.astro b/apps/website/src/components/staff-agmentation/Specialization.astro
index 11a1d566..9109bf4b 100644
--- a/apps/website/src/components/staff-agmentation/Specialization.astro
+++ b/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"
diff --git a/apps/website/src/content/staff_specializations/specializations.md b/apps/website/src/content/staff_specializations/specializations.md
index 0cec3c55..142eef27 100644
--- a/apps/website/src/content/staff_specializations/specializations.md
+++ b/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",
     },
   ]