[DRAFT] Fix/web 39 landing page bugs

apps/website/src/components/BookACallForm.astro

@@ -7,17 +7,17 @@ import Section from "./Section.astro";
 
 <!-- YELLOW-1 = #FEB534 -->
 <Section
-  idx="book-a-call-section"
   className="bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]"
   contentClassName={`${grid_classes} items-center`}
 >
   <div
-    class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-20 md:-mb-36 xl:col-span-6 xl:col-start-4 xl:-mb-56"
+    class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-40 xl:col-span-6 xl:col-start-4 lg:-mb-60"
   >
     <img src="/meeting-croc.png" class="object-cover xl:p-6" />
   </div>
   <div
-    class="col-span-6 grid gap-4 md:col-span-12 md:text-center md:justify-items-center text-white xl:col-span-8 xl:col-start-3"
+    id="book-a-call-section"
+    class="col-span-6 grid gap-4 md:col-span-12 md:text-center md:justify-items-center text-white xl:col-span-8 xl:col-start-3 pt-20"
   >
     <Pill>Book your call today</Pill>
     <h1

apps/website/src/components/Pill.astro

@@ -1,5 +1,14 @@
+---
+import classNames from "classnames";
+
+const { className } = Astro.props;
+---
+
 <div
-  class="bg-white py-2 px-4 gap-2.5 border border-[rgb(60,56,67)]/[0.2] rounded-full uppercase font-bold text-base w-fit leading-none tracking-normal text-secondary"
+  class={classNames(
+    "bg-white py-2 px-4 gap-2.5 border border-[rgb(60,56,67)]/[0.2] rounded-full uppercase font-bold text-base w-fit leading-none tracking-normal text-secondary",
+    className
+  )}
 >
   <slot />
 </div>

apps/website/src/components/ValueCard.astro

@@ -22,7 +22,7 @@ const { title, content, img, styles, onDark, icon } = Astro.props;
     <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 class="text-base leading-7 antialiased" set:html={content.html}></div>
     </div>
   </div>
   <div class="flex justify-center">

apps/website/src/components/hero.astro

@@ -14,52 +14,67 @@ import Section from "./Section.astro";
       <img src="/croco-13.png" alt="" class="" />
     </div>
     <div
-      class="row-start-3 md:row-start-2
-    col-start-1 md:col-start-1 md:col-span-12
+      class="text-white my-auto
+    col-start-1
     col-span-6
+    row-start-3
+    md:col-start-1
+    md:col-span-12
+    md:row-start-2
     xl:row-start-1
-    xl:col-start-1 xl:col-span-6
-    text-white my-auto
-    px-12 pb-12 xl:pl-[104px] mx-0 z-10 xl:pr-0 xl:mt-0 xl:py-24"
+    xl:col-start-1
+    xl:col-span-6
+    p-7
+    !pt-0
+    md:p-12
+    xl:pl-[104px]
+    mx-0 z-10
+    xl:pr-0
+    xl:mt-0
+    xl:py-24"
     >
-      <div
-        class="text-[16px] leading-4 w-full text-center pb-2 lg:pb-4 xl:pt-[92px] md:py-0 lg:px-0 z-10"
-      >
-        <Pill>More than a developer agency</Pill>
+      <div class="w-full pb-2 lg:pb-4 xl:pt-[92px] md:py-0 lg:px-0 z-10">
+        <Pill className="max-md:text-sm">More than a developer agency</Pill>
       </div>
       <h1
-        class="font-normal text-3xl leading-9 md:text-[54px] md:leading-[60px]"
+        class="font-normal text-[32px] leading-9 md:text-[54px] md:leading-[60px] tracking-tight"
       >
-        <span class="fadeInUp" style="animation-delay: 100ms;"
-          >Building Software That Builds Your Business</span
+        <span class="fadeInUp" style="animation-delay: 100ms;">
+          Building Software</span
+        >
+        <span
+          class="fadeInUp"
+          style="animation-delay: 500ms;animation-fill-mode: backwards;"
         >
-        <div
-          class="text-[16px] leading-[26px] md:text-[22px] md:leading-8 sm:text-xl lg:text-2xl py-7 font-light"
+          That Builds Your Business</span
         >
-          <span
-            class="fadeInUp"
-            style="animation-delay: 900ms;animation-fill-mode: backwards;"
-            >Experienced tech consultancy delivering enterprise-grade web
-            development</span
-          >
-        </div>
-        <div class="flex flex-col sm:flex-row gap-[10px]">
-          <a
-            id="book-a-call-action-hero"
-            class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
-            href="#book-a-call-section"
-            >
-            Book a call
-          </a>
-          <a
-            id="discover-our-solutions-action-hero"
-            href="#discover-our-services"
-            class="flex font-medium w-fit h-[61px] items-center px-4 py-2 bg-white rounded-md text-base text-center whitespace-nowrap text-contrast hover:text-gray-700 hover:opacity-90"
-          >
-            Discover our solutions
-          </a>
-        </div>
       </h1>
+      <div
+        class="text-[16px] leading-[26px] md:text-[22px] md:leading-8 sm:text-xl lg:text-2xl py-7 font-light tracking-normal"
+      >
+        <span
+          class="fadeInUp"
+          style="animation-delay: 900ms;animation-fill-mode: backwards;"
+          >Experienced tech consultancy delivering enterprise-grade web
+          development</span
+        >
+      </div>
+      <div class="flex flex-col sm:flex-row gap-[10px]">
+        <a
+          id="book-a-call-action-hero"
+          class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
+          href="#book-a-call-section"
+        >
+          Book a call
+        </a>
+        <a
+          id="discover-our-solutions-action-hero"
+          href="#discover-our-services"
+          class="flex font-medium w-fit h-[61px] items-center px-4 py-2 bg-white rounded-md text-base text-center whitespace-nowrap text-contrast hover:text-gray-700 hover:opacity-90"
+        >
+          Discover our solutions
+        </a>
+      </div>
     </div>
   </div>
 </Section>
@@ -79,5 +94,4 @@ import Section from "./Section.astro";
     .forEach((element) =>
       element.addEventListener("click", handleActionHeroClick),
     );
-
 </script>

apps/website/src/content/testimonials/1raphael-bauer.md

@@ -4,5 +4,5 @@ name: "Raphael Bauer"
 title: "CTO"
 company: "Interim"
 ---
+CroCoder is one of the **most trusted partners** in my network. We have successfully completed multiple projects in the past. I highly recommend CroCoder - **their team is exceptional** and they will offer you outstanding support for your projects. I look forward to future collaborations with CroCoder!
 
-CroCoder is one of the most trusted partners in my network. We have successfully completed multiple projects in the past. I highly recommend CroCoder - their team is exceptional and they will offer you outstanding support for your projects. I look forward to future collaborations with CroCoder!

apps/website/src/content/testimonials/2paul-jeszensky.md

@@ -4,5 +4,5 @@ name: "Paul Jeszenszky"
 title: "co-founder & CEO"
 company: "Submix"
 ---
+We have found **the perfect extension of our team** with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They “own” the roadmap, deadlines and outcomes with us - from the ideation and direction stages through to post-launch optimization.
 
-We have found the perfect extension of our team with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They “own” the roadmap, deadlines and outcomes with us - from the ideation and direction stages through to post-launch optimization.

apps/website/src/content/testimonials/3michele.md

@@ -4,5 +4,4 @@ name: "Michele Rattotti"
 title: "Project Manager"
 company: "4evergreen"
 ---
-
-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
+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

apps/website/src/pages/index.astro

@@ -16,8 +16,8 @@ import "../styles/main.css";
   <Hero />
   <Clients />
   <Values />
-  <Services />
   <Testimonial />
+  <Services />
   <BookACallForm>
     <span slot="title">
       Build Your Business <span class="text-crocoder-yellow"> With Us </span>