From 7305903c272f850ee5a679c7cceef32dc12daa51 Mon Sep 17 00:00:00 2001
From: Petter Hohle <petter.hohle@gmail.com>
Date: Fri, 20 Dec 2024 13:55:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Make=20featured=20cases=20pretti?=
 =?UTF-8?q?er=20(#1081)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Increase gap in featured case

* Increase font sizes and fix borders
---
 .../customerCase/featuredCases/FeaturedCases.tsx   |  8 +++++---
 .../featuredCases/featuredCases.module.css         | 14 +++++++++++---
 .../CustomerCaseConsultants.tsx                    |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
index c4eb01f92..ef47c8688 100644
--- a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
+++ b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
@@ -21,7 +21,7 @@ export default function FeaturedCases({
   return (
     featuredCases.length > 0 && (
       <div className={styles.wrapper}>
-        <Text type={"h3"}>{t("featured_cases.projects")}</Text>
+        <Text type={"h2"}>{t("featured_cases.projects")}</Text>
         <div className={styles.content}>
           {featuredCases.map((featuredCase) => (
             <Link
@@ -32,8 +32,10 @@ export default function FeaturedCases({
               <div className={styles.caseImageWrapper}>
                 <SanityImage image={featuredCase.image} isShared />
               </div>
-              <Text type={"h4"}>{featuredCase.basicTitle}</Text>
-              <Text type={"bodySmall"}>{featuredCase.description}</Text>
+              <div className={styles.textContent}>
+                <Text type={"h4"}>{featuredCase.basicTitle}</Text>
+                <Text type={"bodySmall"}>{featuredCase.description}</Text>
+              </div>
             </Link>
           ))}
         </div>
diff --git a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
index 2e43ef615..f02709ecf 100644
--- a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
+++ b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
@@ -1,7 +1,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-s);
+  gap: var(--padding-rem);
   margin: 4rem auto;
   width: 100%;
   max-width: var(--max-content-width-medium);
@@ -28,11 +28,19 @@
 }
 
 .caseImageWrapper img {
-  border-radius: 1.5rem;
+  border-radius: 0.375rem;
   transition: all 0.3s ease;
+  opacity: 0.8;
   width: 100%;
 
   &:hover {
-    border-radius: 0.375rem;
+    opacity: 1;
+    border-radius: 1.5rem;
   }
 }
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
index 980150d1a..0970b56c7 100644
--- a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
+++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
@@ -29,7 +29,7 @@ export default async function CustomerCaseConsultants({
 
   return (
     <div className={styles.wrapper}>
-      <Text type={"h4"}>{t("in_project")}</Text>
+      <Text type={"h3"}>{t("in_project")}</Text>
       <div className={styles.content}>
         {consultants.map((consultant) => (
           <CustomerCaseEmployeeCard