Fix image section position and featured cases card link

messages/en.json

@@ -22,6 +22,9 @@
       "image": "image",
       "case": "Case",
       "field": "Field"
+    },
+    "featured_cases": {
+      "projects": "Featured Projects"
     }
   },
   "contact_information": {

messages/no.json

@@ -22,6 +22,9 @@
       "image": "bilde",
       "case": "Case",
       "field": "Fag"
+    },
+    "featured_cases": {
+      "projects": "Lignende prosjekter"
     }
   },
   "contact_information": {

messages/se.json

@@ -22,6 +22,9 @@
       "image": "bild",
       "case": "Case",
       "field": "Fält"
+    },
+    "featured_cases": {
+      "projects": "Liknande Projekt"
     }
   },
   "contact_information": {

src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 import { SanitySharedImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
@@ -15,24 +16,26 @@ export default function FeaturedCases({
   featuredCases,
   customerCasesPath,
 }: FeaturedCasesProps) {
+  const t = useTranslations("customer_case");
+
   return (
     featuredCases.length > 0 && (
       <div className={styles.wrapper}>
-        <Text type={"h3"}>Lignende prosjekter</Text>
+        <Text type={"h3"}>{t("featured_cases.projects")}</Text>
         <div className={styles.content}>
           {featuredCases.map((featuredCase) => (
             <div key={featuredCase._id} className={styles.caseWrapper}>
-              <div className={styles.caseImageWrapper}>
-                <SanitySharedImage image={featuredCase.image} />
-              </div>
-              <div>
-                <Link
-                  href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
-                >
+              <Link
+                href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
+              >
+                <div className={styles.caseImageWrapper}>
+                  <SanitySharedImage image={featuredCase.image} />
+                </div>
+                <div>
                   <Text type={"bodyBig"}>{featuredCase.basicTitle}</Text>
-                </Link>
-                <Text type={"bodySmall"}>{featuredCase.description}</Text>
-              </div>
+                  <Text type={"bodySmall"}>{featuredCase.description}</Text>
+                </div>
+              </Link>
             </div>
           ))}
         </div>

src/components/customerCases/customerCase/featuredCases/featuredCases.module.css

@@ -27,6 +27,14 @@
 }
 
 .caseImageWrapper img {
-  border-radius: 0.75rem;
+  border-radius: 1.5rem;
+  transition: all 0.3s ease;
   width: 100% !important;
+  &:hover {
+    border-radius: 0.375rem;
+  }
+}
+
+.content:hover img {
+  border-radius: 0.375rem;
 }

src/components/sections/imageSection/ImageSectionComponent.tsx

@@ -6,13 +6,13 @@ import styles from "./imageSectionComponent.module.css";
 
 const ImageSectionComponent = ({ section }: { section: ImageSection }) => {
   return (
-    <article className={styles.article}>
+    <div className={styles.article}>
       {section.image && (
         <div className={styles.image}>
           <SanityImage image={section.image} />
         </div>
       )}
-    </article>
+    </div>
   );
 };
 

src/components/sections/imageSection/imageSectionComponent.module.css

@@ -1,14 +1,14 @@
 .article {
   width: 100%;
-  max-width: var(--max-content-width-medium);
   display: flex;
-  flex-direction: column;
-  justify-self: center;
+  justify-content: center;
 }
 
 .image {
+  display: flex;
   flex-shrink: 1;
-  max-width: 46rem;
+  max-width: var(--max-content-width-large);
+  width: 100%;
   padding: var(--padding-l) 0rem;
 
   @media (max-width: 834px) {
@@ -23,16 +23,16 @@
 }
 
 .image img {
-  max-width: var(--max-content-width-large);
+  max-width: var(--max-content-width-medium) !important;
   width: 100%;
   height: 100%;
   display: block;
 
   @media (max-width: 834px) {
-    max-width: var(--max-content-width-medium);
+    max-width: var(--max-content-width-medium) !important;
   }
 
   @media (max-width: 425px) {
-    max-width: var(--max-content-width-small);
+    max-width: var(--max-content-width-small) !important;
   }
 }