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; } }