feat: add new service card design

apps/website/src/components/BlogLink.astro

@@ -0,0 +1,16 @@
+---
+import ExternalLink from "./ExternalLink.astro";
+
+interface Props {
+  href: string;
+  linkText: string;
+  title: string;
+}
+
+const { href, linkText, title } = Astro.props;
+---
+
+<div class="bg-white p-4 rounded-md gap-2 grid md:w-[65%]">
+  <span class="text-contrast text-sm sm:text-base font-semibold">{title}</span>
+  <ExternalLink href={href} text={linkText} />
+</div>

apps/website/src/components/CTA.astro

@@ -0,0 +1,22 @@
+---
+import classnames from "classnames";
+
+interface Props {
+  id: string;
+  href: string;
+  classNames?: string | string[];
+}
+
+const { id, href, classNames } = Astro.props;
+---
+
+<a
+  id={id}
+  class={classnames(
+    "flex font-medium w-fit h-11 sm:h-[61px] items-center px-4 py-2 rounded-md text-sm sm:text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90 gap-2",
+    classNames,
+  )}
+  href={href}
+>
+  <slot />
+</a>

apps/website/src/components/ExternalLink.astro

@@ -0,0 +1,23 @@
+---
+interface Props {
+  href: string;
+  text: string;
+}
+
+const { href, text } = Astro.props;
+---
+
+<div class="flex gap-2 items-center">
+  <a
+    class="text-contrast underline underline-offset-2 text-sm sm:text-base"
+    href={href}
+  >
+    {text}
+  </a>
+  <img
+    src={"arrow-top-right.svg"}
+    alt="Arrow Top Right"
+    role="presentation"
+    class="h-3 w-3 sm:h-4 sm:w-4"
+  />
+</div>

apps/website/src/components/IconSubtitle.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  subtitle: string;
+  iconPath: string;
+}
+
+const { subtitle, iconPath } = Astro.props;
+---
+
+<span class="flex gap-3 items-center">
+  <img
+    src={iconPath}
+    alt=""
+    role="presentation"
+    class="lg:mt-[2px] h-6 w-6 sm:h-8 sm:w-8 md:h-12 md:w-12"
+  />
+  <h4
+    class="font-medium text-base sm:text-lg leading-[110%] md:text-[22px] text-left"
+  >
+    {subtitle}
+  </h4>
+</span>

apps/website/src/components/ServiceCard.astro

@@ -1,32 +1,36 @@
 ---
-import classnames from "classnames";
 import { Image } from "astro:assets";
+import classnames from "classnames";
+import BlogLink from "./BlogLink.astro";
+import CTA from "./CTA.astro";
+import IconSubtitle from "./IconSubtitle.astro";
 
 interface Props {
   idx: number;
   title: string;
-  subtitle: string;
+  subtitles: Array<{
+    iconPath: string;
+    text: string;
+  }>;
   content: any;
   styles?: string;
-  imgPath: string;
-  imgAlt: string;
-  iconPath: string;
+  img: {
+    path: string;
+    alt?: string;
+  };
   classNames?: string | string[];
+  link: {
+    href: string;
+    text: string;
+    title?: string;
+  };
 }
 
-const {
-  title,
-  subtitle,
-  content,
-  styles,
-  imgPath,
-  imgAlt,
-  iconPath,
-  classNames,
-} = Astro.props;
+const { title, subtitles, content, styles, img, classNames, link } =
+  Astro.props;
 
 const images = import.meta.glob("../assets/*.*");
-const src = images[`../assets${imgPath}`] as any as () => Promise<{
+const src = images[`../assets${img.path}`] as any as () => Promise<{
   default: ImageMetadata;
 }>;
 
@@ -53,7 +57,6 @@ const image = await src();
     class={classnames(
       `text-white
       h-full
-      lg:h-[620px]
       p-5
       md:p-7
       lg:p-12
@@ -65,7 +68,6 @@ const image = await src();
       lg:gap-x-7
       lg:gap-y-12
       lg:grid-cols-2
-      lg:grid-rows-[min-content_auto]
       backdrop-blur-[15px]
       `,
       classNames,
@@ -74,38 +76,59 @@ const image = await src();
     <div
       class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-4 md:gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
-      <span class="grid md:flex gap-4 md:gap-7">
-        <img
-          src={iconPath}
-          alt=""
-          role="presentation"
-          class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12"
+      <h2
+        class="font-medium text-xl sm:text-[28px] md:text-5xl text-left leading-[110%] lg:col-start-1 lg:row-start-1"
+      >
+        {title}
+      </h2>
+
+      <div class="flex flex-col gap-4 md:gap-9 lg:row-span-2">
+        <div class="grid md:grid-cols-2 gap-4">
+          {
+            subtitles.map(({ iconPath, text }) => (
+              <IconSubtitle subtitle={text} iconPath={iconPath} />
+            ))
+          }
+        </div>
+        <div
+          class="[&_p]:text-sm [&_p]:leading-[26px] sm:[&_p]:text-base md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
+          set:html={content.html}
         />
-        <div class="gap-y-2 flex flex-col">
-          <h4
-            class="font-medium text-lg leading-[22px] md:text-[28px] md:leading-[30px] text-left"
-          >
-            {title}
-          </h4>
-          <p class="text-base md:text-lg">{subtitle}</p>
+        <div>
+          {
+            link?.title ? (
+              <BlogLink
+                href={link.href}
+                title={link.title}
+                linkText={link.text}
+              />
+            ) : (
+              <CTA id="contact-cta" href={link.href}>
+                {link.text}
+                <img
+                  src={"arrow-top-right.svg"}
+                  alt="Arrow Top Right"
+                  role="presentation"
+                  class="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
+                />
+              </CTA>
+            )
+          }
         </div>
-      </span>
+      </div>
+
       <div
-        class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
+        class="flex flex-col justify-center items-center lg:justify-start lg:col-start-1 lg:row-start-2"
       >
         <Image
           class="object-cover w-full max-lg:max-w-[640px] xl:p-6"
           src={image.default}
-          alt={imgAlt}
+          alt={img.alt || ""}
           widths={[320, 480, 578, 640]}
           sizes="(max-width: 1024px) calc(100vw - 56px), 640px"
           loading="lazy"
         />
       </div>
-      <div
-        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:text-sm [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
-        set:html={content.html}
-      />
     </div>
   </section>
 </div>

apps/website/src/components/Services.astro

@@ -14,13 +14,13 @@ for (const service of servicesCollection) {
   services[service.data.idx - 1] = {
     content: service.rendered,
     title: service.data.title,
-    subtitle: service.data.subtitle,
+    subtitles: service.data.subtitles,
     img: {
       path: service.data.imgPath,
       alt: service.data.imgAlt,
     },
-    icon: service.data.iconPath,
     background: service.data.bgColor,
+    link: service.data.link,
   };
 }
 ---
@@ -48,12 +48,11 @@ for (const service of servicesCollection) {
             <ServiceCard
               idx={idx + 1}
               title={value.title}
-              subtitle={value.subtitle}
+              subtitles={value.subtitles}
               content={value.content}
-              imgPath={value.img.path}
-              imgAlt={value.img.alt}
-              iconPath={value.icon}
+              img={value.img}
               styles={classNames("will-change-transform", value.background)}
+              link={value.link}
             />
           ))
         }

apps/website/src/content/services/create-an-evolving-architecture.md

@@ -1,18 +1,18 @@
 ---
 title: "Product & Platform Engineering"
-subtitle: "Future-Proof Architecture | Scalable Infrastructure"
+subtitles:
+  - iconPath: "/shield-check-gold.svg"
+    text: "Future-Proof Architecture"
+  - iconPath: "/performance-increase.svg"
+    text: "Scalable Infrastructure"
 imgPath: "/pic-web-dev-topics.png"
 imgAlt: "Illustration showing web development topics and architecture planning"
 idx: 2
-iconPath: "/performance-increase.svg"
 bgColor: "bg-[#424C6DE5]/[0.9]"
+link:
+  href: "/blog/using-lago-to-create-a-flexible-billing-system"
+  text: "See case study"
+  title: "Using Lago to Create a Flexible Billing System"
 ---
 
 From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands.
-</br>
-
-<div class="pt-6">
-    <a class='underline underline-offset-2 text-base md:text-[20px]' href="/blog/using-lago-to-create-a-flexible-billing-system">
-        Case Study: Submix Billing System
-    </a>
-</div>

apps/website/src/content/services/improving-engineering-tempo.md

@@ -1,21 +1,18 @@
 ---
 title: "Workflow & Release Optimization"
-subtitle: "Shaping Developer Experience | Development Process Refinement"
+subtitles:
+  - iconPath: "/management.svg"
+    text: "Shaping Developer Experience"
+  - iconPath: "/stopwatch-gold.svg"
+    text: "Development Process Refinement"
 imgPath: "/croco-charts-2.png"
 imgAlt: "Charts and graphs showing engineering performance metrics and improvements"
 idx: 3
 iconPath: "/stopwatch-gold.svg"
 bgColor: "bg-[#3C3843E5]/[0.9]"
+link:
+  href: "/contact"
+  text: "Schedule a free DevEx audit"
 ---
 
 By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures.
-</br>
-
-<div class="flex justify-end items-center gap-4 pt-6">
-  <p class="text-right">Schedule a free DevEx audit</p>
-  <a id="contact-us-our-services-cta"
-     class="flex font-medium w-fit h-[61px] items-center px-4 leading-tight py-2 rounded-md text-sm md:text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90 max-md:h-[45px]"
-     href="/contact">
-    Contact Us
-  </a>
-</div>