feat: add values section in cto landing

apps/website/src/components/BookACallForm.astro

@@ -14,7 +14,7 @@ import SectionTitle from "./SectionTitle.astro";
   <SectionTitle className="col-span-6 md:col-span-10 md:!col-start-2 ">
     Build Your Business <br class="xl:hidden sm:block" />With Us
     <p
-      class="leading-normal text-base font-normal text-left text-[#3C3843] mt-4"
+      class="leading-normal text-base font-normal text-left text-secondary mt-4"
     >
       Our software development services helped clients big and small build
       solutions with a lasting impact.

apps/website/src/components/ContactUs.astro

@@ -14,10 +14,10 @@ import SectionTitle from "./SectionTitle.astro";
   <div class="col-span-6 md:col-span-12">
     <SectionTitle
       set:html={contactUsContent.frontmatter.title}
-      className="text-[#3C3843]"
+      className="text-secondary"
     />
     <p
-      class="leading-normal text-base font-normal text-left text-[#3C3843] mt-4"
+      class="leading-normal text-base font-normal text-left text-secondary mt-4"
     >
       <Content />
     </p>

apps/website/src/components/ContactUsForm.astro

@@ -59,7 +59,7 @@ import "../styles/loader.css";
       label={formContent.frontmatter.projectInfo}
       errorText={formContent.frontmatter.requiredField}
     />
-    <span class="text-[#3C3843] text-xs text-right mt-1 block">
+    <span class="text-secondary text-xs text-right mt-1 block">
       <span id="char-counter">0</span>/1500
     </span>
   </div>
@@ -77,7 +77,7 @@ import "../styles/loader.css";
         set:html={formContent.frontmatter.consent}
         id="form-consent-text"
         for="form-consent"
-        class="text-[#3C3843] [&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer"
+        class="text-secondary [&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer"
       />
     </div>
     <button
@@ -95,9 +95,9 @@ import "../styles/loader.css";
       focus-visible:bg-[#84a22ab3]
       focus:bg-[#84a22ab3]
       focus-visible:outline-1
-      focus-visible:outline-[#3C3843]
+      focus-visible:outline-secondary
       text-center
-      text-[#3C3843]
+      text-secondary
       text-base
       font-medium mt-6"
     >

apps/website/src/components/Field.astro

@@ -41,7 +41,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
     {
       "after:h-[46px]": !Astro.props.isTextArea,
       "after:h-[139px] after:max-h-[139px]": Astro.props.isTextArea,
-    },
+    }
   )}
 >
   {
@@ -62,7 +62,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
         focus:outline-0
         focus:ring-0
         focus:border-transparent
-        text-[#3C3843]
+        text-secondary
        "
       />
     ) : (
@@ -81,17 +81,17 @@ const { classNames, labelProps, label, errorText } = Astro.props;
           focus:outline-0
           focus:ring-0
           focus:border-transparent
-          text-[#3C3843]
+          text-secondary
           `,
-          Astro.props.textAreaProps.class,
+          Astro.props.textAreaProps.class
         )}
         {...Astro.props.textAreaProps}
       />
     )
   }
   <label
     {...labelProps}
-    class="text-[#3C3843]
+    class="text-secondary
       text-xs
       min-[375px]:text-sm
       absolute
@@ -133,7 +133,7 @@ const { classNames, labelProps, label, errorText } = Astro.props;
       {
         "h-[48px] top-[23px]": !Astro.props.isTextArea,
         "h-[142px] top-[23px]": Astro.props.isTextArea,
-      },
+      }
     )}
   >
   </div>

apps/website/src/components/SectionTitle.astro

@@ -9,8 +9,8 @@ const { idx, className } = Astro.props;
 
 <h1
   id={idx}
-  class={`text-5xl lg:text-6xl lg:leading-[84px] font-medium capitalize text-[#3C3843]
+  class={`text-5xl lg:text-6xl lg:leading-[84px] font-medium capitalize text-secondary
     ${className} `}
 >
-    <slot />
+  <slot />
 </h1>

apps/website/src/components/ServiceCard.astro

@@ -8,11 +8,10 @@ interface Props {
   styles: string;
   imgPath: string;
   imgAlt: string;
-  onDark?: boolean;
   classNames?: string | string[];
 }
 
-const { idx, title, content, styles, imgPath, imgAlt, onDark, classNames } =
+const { idx, title, content, styles, imgPath, imgAlt, classNames } =
   Astro.props;
 ---
 
@@ -30,13 +29,13 @@ const { idx, title, content, styles, imgPath, imgAlt, onDark, classNames } =
     overflow-hidden
     will-change-transform
     `,
-    styles,
+    styles
   )}
   data-show=""
 >
   <section
     class={classnames(
-      `text-neutral-50
+      `text-white
       h-full
       lg:h-screen
       p-7
@@ -52,11 +51,7 @@ const { idx, title, content, styles, imgPath, imgAlt, onDark, classNames } =
       lg:grid-rows-[min-content_auto]
       backdrop-blur-[30px]
       `,
-      classNames,
-      {
-        "text-neutral-50": onDark,
-        "text-[#3C3843]": !onDark,
-      },
+      classNames
     )}
   >
     <div

apps/website/src/components/Services.astro

@@ -54,7 +54,6 @@ for (const service of servicesCollection) {
             styles={styles[idx]}
             imgPath={value.img.path}
             imgAlt={value.img.alt}
-            onDark={idx === 1}
             classNames="will-change-transform"
           />
         ))

apps/website/src/components/ValueCard.astro

@@ -15,7 +15,7 @@ const { idx, title, content, img, styles, onDark } = Astro.props;
 ---
 
 <section
-  class={`col-span-6 rounded-2xl p-7 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col gap-7 overflow-hidden lg:h-fit md:col-span-6 lg:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-[#3C3843]"}`}
+  class={`col-span-6 rounded-2xl p-7 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col gap-7 overflow-hidden lg:h-fit md:col-span-6 lg:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
 >
   <span class="font-medium text-[28px] leading-8">{`{${idx}}`}</span>
   <h3 class="font-medium text-[28px] leading-8">{title}</h3>

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,11 @@
+---
+import classNames from "classnames";
+
+const { icon, title, description, className } = Astro.props;
+---
+
+<div class={classNames("grid auto-rows-min text-white gap-7", className)}>
+  <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,105 @@
+---
+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 lg:auto-cols-auto col-span-6 md:col-span-12 gap-2"
+  >
+    <div
+      class="bg-[#5362DBE5]/[0.9] lg:col-span-2 lg:row-start-1 rounded-2xl grid md:grid-cols-2 auto-rows-min"
+    >
+      <div class="flex flex-col gap-7 p-7 pb-0 md:py-12 md:pl-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 class="flex w-max gap-[10px]">
+          <a
+            id="book-a-call-action-hero"
+            href="#book-a-call-section"
+            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-contrast hover:text-gray-700 rounded-md text-base font-medium hover:opacity-90"
+          >
+            Contact us
+          </a>
+        </div>
+      </div>
+      <div>
+        <img src="/vision.png" class="object-cover h-full object-left" />
+      </div>
+    </div>
+    <div
+      class="bg-[#3C3843E5]/90 lg:col-span-1 lg:row-span-2 rounded-2xl grid md:gap-7"
+    >
+      <InfoBlock
+        className="md:pl-12 md:pt-12 p-7"
+        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 class="h-56 lg:h-full flex items-end">
+        <img src="/teams.png" class="h-full lg:object-cover" />
+      </div>
+    </div>
+    <div
+      class="bg-[#424C6DE5]/90 p-7 md:p-12 lg:col-span-1 lg:col-start-2 lg:row-start-2 rounded-2xl"
+    >
+      <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 lg:col-span-1 lg:col-start-2 lg:row-start-3 rounded-2xl grid auto-cols-auto auto-rows-min gap-y-7 gap-x-4"
+    >
+      <p class="text-base leading-[26px] tracking-normal text-secondary">
+        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>
+      <img src="/quotes.svg" class="" />
+      <div class="flex gap-3 col-span-2">
+        <img
+          src="/michele-rattotti.png"
+          class="h-[72px] w-[72px]"
+          alt="Michele Rattotti"
+        />
+        <p class="text-xl text-secondary">
+          <strong>Michele Rattotti</strong>
+          <br />
+          <span class="underline">4evergreen </span>Project Manager
+        </p>
+      </div>
+    </div>
+  </div>
+</Section>

apps/website/src/components/footer.astro

@@ -8,7 +8,7 @@ const copyright = `
   class="w-full
    px-4 sm:px-7
    py-12 lg:py-16
-   overflow-hidden bg-[#3C3843]"
+   overflow-hidden bg-secondary"
 >
   <div class="max-w-[var(--max-width)] mx-auto">
     <div

apps/website/src/components/hero.astro

@@ -5,7 +5,7 @@ import Section from "./Section.astro";
 
 <Section className="!py-0 !px-0">
   <div
-    class={`${grid_classes} bg-[#3C3843] xl:rounded-b-2xl overflow-hidden pt-[75px]`}
+    class={`${grid_classes} bg-secondary xl:rounded-b-2xl overflow-hidden pt-[75px]`}
   >
     <div
       class="row-start-1
@@ -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>
-
-