WEB-49 Feat:Values section redesign

apps/website/src/components/Clients.astro

@@ -0,0 +1,40 @@
+---
+import Section from "./Section.astro";
+---
+
+<Section>
+  <h4
+    class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase mt-[72px]"
+  >
+    Trusted By:
+  </h4>
+  <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
+    <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
+      <img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img
+        src="/lynes.svg"
+        alt=""
+        class="grayscale opacity-50 w-[200px] md:hidden xl:block"
+      />
+      <img
+        src="/submix.svg"
+        alt=""
+        class="grayscale invert opacity-50 w-[200px]"
+      />
+      <img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img
+        src="/misterspex.svg"
+        alt=""
+        class="grayscale opacity-50 w-[200px]"
+      />
+    </div>
+  </div>
+
+  <div class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32  md:pb-[138px]">
+    Our tailored software services bridge the gap between the big-picture
+    <span class="text-[#3C384380]">
+      strategy and day-to-day operations, turning ambitious goals into concrete,
+    actionable steps that drive results.
+    </span>
+  </div>
+</Section>

apps/website/src/components/ValueCard.astro

@@ -9,17 +9,23 @@ interface Props {
   };
   styles?: string | string[];
   onDark?: boolean;
+  icon: string;
 }
 
-const { idx, title, content, img, styles, onDark } = Astro.props;
+const { title, content, img, styles, onDark, icon } = 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-secondary"}`}
+  class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl: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>
-  <p set:html={content.html} class="text-base leading-7" />
-
-  <img class="mt-auto" src={img.path} alt={img.alt} />
+  <div class="flex gap-7 flex-col md:flex-row xl:flex-col mb-5 xl:mb-[61px]">
+    <img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt={icon}>
+    <div>
+      <h3 class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7">{title}</h3>
+      <p set:html={content.html} class="text-base leading-7" />
+    </div>
+  </div>
+  <div class="flex justify-center">
+    <img class="mt-auto max-w-[466px] w-full" src={img.path} alt={img.alt} />
+  </div>
 </section>

apps/website/src/components/Values.astro

@@ -4,10 +4,11 @@ import ValueCard from "./ValueCard.astro";
 import SectionTitle from "./SectionTitle.astro";
 import Section from "./Section.astro";
 import { grid_classes } from "./_grid";
+import Pill from "./Pill.astro";
 
 const styles = [
   "bg-[#FEB534]",
-  "bg-[#607A1A] [&_img]:max-w-[calc(100%+56px)] [&_img]:-ml-7 xl:[&_img]:max-w-[calc(100%+96px)] xl:[&_img]:-ml-12",
+  "bg-[#607A1A]",
   "bg-[#F6FCFD]",
 ];
 
@@ -23,32 +24,32 @@ for (const value of valueCollection) {
       path: value.data.imgPath,
       alt: value.data.imgAlt,
     },
+    icon: value.data.icon
   });
 }
 ---
 
-<Section idx="values-wrapper" contentClassName={grid_classes}>
-  <div
-    class="col-start-1 col-span-6 md:col-start-2 md:col-span-10 lg:col-span-9 text-2xl md:text-3xl !leading-relaxed pb-8"
-  >
-    Our tailored software services bridge the gap between the big-picture
-    strategy and day-to-day operations, turning ambitious goals into concrete,
-    actionable steps that drive results.
+<Section idx="values-wrapper" contentClassName={grid_classes} className="bg-contrast bg-[url(/values-main-image.png)] bg-no-repeat bg-top bg-[auto_320px]">
+  <div class="col-span-6 md:col-span-12 flex flex-col gap-4 pt-[148px] md:pt-48 md:items-center pb-5 md:pb-11 xl:pb-12">
+    <Pill>We’re 100% Focused on results</Pill>
+    <SectionTitle className="col-span-6 md:text-center text-[44px] leading-[48px] md:text-[74px] md:leading-[81px] md:max-w-[712px] xl:max-w-[848px] text-white">
+      <span class="text-[#FEB534]">
+        Creating Value
+      </span>Through The Power Of Software
+    </SectionTitle>
   </div>
-  <SectionTitle className="col-span-6 md:col-span-10 md:col-start-2 ">
-    Creating Value Through<br /> The Power Of Software
-  </SectionTitle>
   {
     values.map((value, idx) => {
       return (
-        <ValueCard
-          idx={idx + 1}
-          title={value.title}
-          content={value.content}
-          styles={styles[idx]}
-          onDark={idx === 1}
-          img={value.img}
-        />
+          <ValueCard
+            idx={idx + 1}
+            title={value.title}
+            content={value.content}
+            styles={styles[idx]}
+            onDark={idx === 1}
+            img={value.img}
+            icon={value.icon}
+            />
       );
     })
   }

apps/website/src/components/hero.astro

@@ -62,25 +62,6 @@ import Section from "./Section.astro";
       </h1>
     </div>
   </div>
-  <h4 class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase mt-[72px]">Trusted By:</span>
-    <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
-      <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
-        <img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
-        <img
-          src="/lynes.svg"
-          alt=""
-          class="grayscale opacity-50 w-[200px] md:hidden xl:block"
-        />
-        <img
-          src="/submix.svg"
-          alt=""
-          class="grayscale invert opacity-50 w-[200px]"
-        />
-        <img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
-        <img src="/misterspex.svg" alt="" class="grayscale opacity-50 w-[200px]" />
-      </div>
-    </div>
-
 </Section>
 
 <script is:inline>
@@ -92,6 +73,11 @@ import Section from "./Section.astro";
   }
 
   document
-    .querySelectorAll("#discover-our-solutions-action-hero, #book-a-call-action-hero")
-    .forEach((element) => element.addEventListener("click", handleActionHeroClick));
+    .querySelectorAll(
+      "#discover-our-solutions-action-hero, #book-a-call-action-hero",
+    )
+    .forEach((element) =>
+      element.addEventListener("click", handleActionHeroClick),
+    );
+
 </script>

apps/website/src/content/values/aligment-business-goals.md

@@ -1,7 +1,8 @@
 ---
 title: "Ensuring Alignment with business goals"
-imgPath: "/values-1.png"
+imgPath: "/values-1-cro.png"
 imgAlt: "Illustration of a video meeting with Crocoder team member"
+icon: "/target-black.svg"
 ---
 
 We continuously assess opportunities and challenges to gain deep understanding of your business so we deliver software solutions that are only fully aligned with your overall strategy. if it doesn’t work toward an impactful purpose, it does not get built.

apps/website/src/content/values/tech-people-skills.md

@@ -2,5 +2,6 @@
 title: "Complementing technical with people skills"
 imgPath: "/values-2.png"
 imgAlt: "Software developers accompanied by a crocodile"
+icon: "/pie-chart.svg"
 ---
 Software development is rarely just about software. By working with us, you gain committed partners with demonstrated technical expertise that can guide you through periods of intensive technical and organisational change. We adapt our approach based on your unique needs, leveraging our interpersonal skills to foster effective collaboration and drive successful outcomes.

apps/website/src/content/values/today-tommorow.md

@@ -1,6 +1,7 @@
 ---
 title: "Balancing today's priorities with tomorrow's expectations"
-imgPath: "/values-3.png"
+imgPath: "/values-img-crocodile-3.png"
 imgAlt: "Crocodile presenting some cool slides."
+icon: "/line-chart-waves.svg"
 ---
 We recognize that thriving today shouldn't compromise future success. By selecting the right tools and focusing on solid software architecture, we address immediate technical challenges while preparing your business for what's ahead.

apps/website/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import BookACallForm from "../components/BookACallForm.astro";
+import Clients from "../components/Clients.astro";
 import Footer from "../components/footer.astro";
 import Hero from "../components/hero.astro";
 import Navigation from "../components/navigation.astro";
@@ -13,6 +14,7 @@ import "../styles/main.css";
 <Base className="bg-white">
   <Navigation />
   <Hero />
+  <Clients />
   <Values />
   <Services />
   <Testimonial />