diff --git a/messages/en.json b/messages/en.json
index e6aff85e7..869bef251 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -22,6 +22,9 @@
"image": "image",
"case": "Case",
"field": "Field"
+ },
+ "featured_cases": {
+ "projects": "Featured Projects"
}
},
"contact_information": {
diff --git a/messages/no.json b/messages/no.json
index 6bf2433ec..eb45d6cb6 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -22,6 +22,9 @@
"image": "bilde",
"case": "Case",
"field": "Fag"
+ },
+ "featured_cases": {
+ "projects": "Lignende prosjekter"
}
},
"contact_information": {
diff --git a/messages/se.json b/messages/se.json
index 0172c8005..d784bbc9a 100644
--- a/messages/se.json
+++ b/messages/se.json
@@ -22,6 +22,9 @@
"image": "bild",
"case": "Case",
"field": "Fält"
+ },
+ "featured_cases": {
+ "projects": "Liknande Projekt"
}
},
"contact_information": {
diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
index e1996305e..6b3113fb4 100644
--- a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
+++ b/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 && (
-
Lignende prosjekter
+
{t("featured_cases.projects")}
{featuredCases.map((featuredCase) => (
-
-
-
-
-
+
+
+
+
+
{featuredCase.basicTitle}
-
- {featuredCase.description}
-
+
{featuredCase.description}
+
+
))}
diff --git a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
index 15f0c866c..0b7153f0b 100644
--- a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
+++ b/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;
}
diff --git a/src/components/sections/imageSection/ImageSectionComponent.tsx b/src/components/sections/imageSection/ImageSectionComponent.tsx
index 6cda21ed9..08ff3bdb3 100644
--- a/src/components/sections/imageSection/ImageSectionComponent.tsx
+++ b/src/components/sections/imageSection/ImageSectionComponent.tsx
@@ -6,13 +6,13 @@ import styles from "./imageSectionComponent.module.css";
const ImageSectionComponent = ({ section }: { section: ImageSection }) => {
return (
-
+
{section.image && (
)}
-
+
);
};
diff --git a/src/components/sections/imageSection/imageSectionComponent.module.css b/src/components/sections/imageSection/imageSectionComponent.module.css
index 86dfd689c..f1e0a57f6 100644
--- a/src/components/sections/imageSection/imageSectionComponent.module.css
+++ b/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;
}
}