feat: add values section in cto landing

apps/website/src/components/cto/Hero.astro

@@ -37,7 +37,7 @@ import Section from "../Section.astro";
       <a
         id="book-a-call-action-hero"
         href="#book-a-call-section"
-        class="inline-block bg-[#FEC343] rounded-md px-[25px] py-4 text-center text-[#1E1A1A] text-base font-medium hover:opacity-90 uppercase w-fit"
+        class="inline-block bg-crocoder-yellow rounded-md px-[25px] py-4 text-center text-contrast text-base font-medium hover:opacity-90 uppercase w-fit"
       >
         Get started
       </a>

apps/website/src/components/cto/InfoBlock.astro

@@ -0,0 +1,9 @@
+---
+const { icon, title, description } = Astro.props;
+---
+
+<div class="grid text-white gap-7">
+  <img src={icon} class="h-[72px] w-[72px] md:h-[90px] md:w-[90px]" />
+  <h3 class="text-[28px] leading-[30px] md:text-4xl tracking-tight">{title}</h3>
+  <p class="text-base leading-[26px]">{description}</p>
+</div>

apps/website/src/components/cto/Values.astro

@@ -0,0 +1,57 @@
+---
+import { grid_classes } from "../_grid";
+import Pill from "../Pill.astro";
+import Section from "../Section.astro";
+import InfoBlock from "./InfoBlock.astro";
+---
+
+<Section
+  idx="values-wrapper"
+  contentClassName={grid_classes}
+  className="bg-contrast"
+>
+  <div
+    class="grid gap-4 col-span-6 md:col-span-10 md:col-start-2 text-center justify-items-center"
+  >
+    <Pill>We’re 100% Focused on results</Pill>
+    <h1
+      class="text-[44px] leading-[48px] md:text-[74px] md:leading-[81px] font-medium tracking-tight text-white"
+    >
+      Be Confident Knowing Your Strategy <span class="text-crocoder-yellow">
+        Gets Implemented
+      </span>
+    </h1>
+  </div>
+  <div id="values-grid" class="grid col-span-6 md:col-span-12">
+    <div class="bg-[#5362DBE5]/[0.9] p-12">
+      <InfoBlock
+        icon="/target-streamline-core.svg"
+        title="Transform Vision into Reality"
+        description="Close the gap between strategy and execution with a partner who ensures your big-picture goals translate into measurable outcomes"
+      />
+    </div>
+    <div class="bg-[#3C3843E5]/90 p-12">
+      <InfoBlock
+        icon="/management-streamline-ultimate.svg"
+        title="Build High-Performing Teams Without Micromanagement"
+        description="Empower your teams to operate independently by introducing sustainable processes and bringing in specialized expertise only where it’s needed"
+      />
+    </div>
+    <div class="bg-[#424C6DE5]/90 p-12">
+      <InfoBlock
+        icon="/calendar-add-streamline-core.svg"
+        title="Drive Operational Efficiency Across the Board"
+        description="Eliminate redundancies, reduce inefficiencies, and accelerate timelines with repeatable systems tailored to your organization’s unique needs."
+      />
+    </div>
+    <div class="backdrop-blur-xl bg-white p-7">
+      <p>
+        We were impressed by the proactive attitude [of CroCoder] and capacity
+        to turn theory into practice. Their support and assistance was very
+        timely and precise, always followed by concrete implementing steps. The
+        small team has a strong multidisciplinary background and proved a good
+        attitude to work in team with other consultants
+      </p>
+    </div>
+  </div>
+</Section>

apps/website/src/components/hero.astro

@@ -45,13 +45,13 @@ import Section from "./Section.astro";
         <a
           id="book-a-call-action-hero"
           href="#book-a-call-section"
-          class="inline-block bg-[#FEC343] rounded-md px-[25px] py-4 text-center text-[#1E1A1A] text-base font-medium hover:opacity-90"
+          class="inline-block bg-crocoder-yellow rounded-md px-[25px] py-4 text-center text-contrast text-base font-medium hover:opacity-90"
         >
           Book a call
         </a>
         <a
           href="/contact"
-          class="inline-block bg-white px-[25px] py-4 text-center text-[#1E1A1A] hover:text-gray-700 rounded-md text-base font-medium hover:opacity-90"
+          class="inline-block bg-white px-[25px] py-4 text-center text-contrast hover:text-gray-700 rounded-md text-base font-medium hover:opacity-90"
         >
           Contact us
         </a>
@@ -93,7 +93,9 @@ import Section from "./Section.astro";
 </Section>
 
 <script is:inline>
-  const bookACallActionHero = document.getElementById("book-a-call-action-hero");
+  const bookACallActionHero = document.getElementById(
+    "book-a-call-action-hero"
+  );
 
   function handleBookACallHero() {
     window.navScroll = true;
@@ -104,5 +106,3 @@ import Section from "./Section.astro";
 
   bookACallActionHero.addEventListener("click", handleBookACallHero);
 </script>
-
-

apps/website/src/components/navigation.astro

@@ -107,7 +107,7 @@
         <ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
           <li data-navhidden>
             <a
-              class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90"
+              class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
               href="/contact"
             >
               Contact us

apps/website/src/layouts/header.astro

@@ -68,7 +68,9 @@
       <div
         class="max-md:absolute max-md:hidden max-md:peer-checked/menu-toggle:flex max-md:flex-col max-md:gap-7 max-md:top-[74px] max-md:w-full max-md:py-7 bg-[#3c3843] max-md:h-[calc(100vh-74px)] max-md:right-0 md:bg-transparent md:flex md:items-center"
       >
-        <ul class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative">
+        <ul
+          class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative"
+        >
           <li>
             <a
               class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
@@ -81,7 +83,7 @@
         <ul class="flex gap-4 mx-7 md:ml-8 md:mr-4">
           <li>
             <a
-              class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90"
+              class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
               href="/contact"
             >
               Contact us

apps/website/src/pages/cto.astro

@@ -5,7 +5,7 @@ import Hero from "../components/cto/Hero.astro";
 import Navigation from "../components/navigation.astro";
 import Services from "../components/Services.astro";
 import Testimonial from "../components/testimonial.astro";
-import Values from "../components/Values.astro";
+import Values from "../components/cto/Values.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
 ---
@@ -14,8 +14,7 @@ import "../styles/main.css";
   <Navigation />
   <Hero />
   <Values />
-  <Services />
-  <Testimonial />
+
   <BookACallForm />
   <Footer />
 </Base>

packages/tailwind/tailwind.config.js

@@ -48,6 +48,8 @@ module.exports = {
         border: theme.colors.default.theme_color.border,
         "theme-light": theme.colors.default.theme_color.theme_light,
         "theme-dark": theme.colors.default.theme_color.theme_dark,
+        "crocoder-yellow": theme.colors.default.theme_color.crocoder_yellow,
+        contrast: theme.colors.default.theme_color.contrast,
       },
       fontSize: {
         base: font_base + "px",

packages/tailwind/theme.json

@@ -7,7 +7,9 @@
         "border": "#D5D5D5",
         "theme_light": "#FAFAFA",
         "theme_dark": "#152035",
-        "secondary": "#3C3843"
+        "secondary": "#3C3843",
+        "crocoder_yellow": "#FEC343",
+        "contrast": "#1E1A1A"
       },
       "text_color": {
         "default": "#747577",