- {sharedCustomerCases && sharedCustomerCases.data.length > 0 ? (
- sharedCustomerCases.data.map((customerCase) => (
-
-
-
{customerCase.basicTitle}
-
- {customerCase.description && (
-
{customerCase.description}
- )}
+
+
{customerCasesPage.basicTitle}
+ {sharedCustomerCases && sharedCustomerCases.data.length > 0 ? (
+ sharedCustomerCases.data.map((customerCase) => (
+
+
+
+
+
+
+ {customerCase.basicTitle}
+
+ {customerCase.description && (
+ {customerCase.description}
+ )}
+
+
+ ))
+ ) : (
+
+
+ It looks like you haven't created any customer cases yet.
+ Please visit the shared studio to add some.
+
+
- ))
- ) : (
-
-
- It looks like you haven't created any customer cases yet.
- Please visit the shared studio to add some.
-
-
-
- )}
+ )}
+
);
};
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 7b2ffb3e3..85b5a759d 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -10,7 +10,6 @@ export interface CustomerCaseProps {
}
export default function CustomerCase({ customerCase }: CustomerCaseProps) {
- console.log(customerCase.image);
return (
diff --git a/src/components/customerCases/customerCases.module.css b/src/components/customerCases/customerCases.module.css
index 119bf3d06..4820c2987 100644
--- a/src/components/customerCases/customerCases.module.css
+++ b/src/components/customerCases/customerCases.module.css
@@ -1,8 +1,16 @@
.wrapper {
display: flex;
flex-direction: column;
- padding: 10rem 5rem;
+ margin: 8rem 0;
+ align-items: center;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
gap: 5rem;
+ max-width: 1200px;
+ padding: 1rem;
}
.section {
@@ -10,3 +18,17 @@
flex-direction: column;
gap: 5rem;
}
+
+.caseWrapper {
+ display: flex;
+ gap: 3rem;
+}
+
+.caseImageWrapper {
+ min-width: 20rem;
+ max-width: 20rem;
+}
+
+.caseImageWrapper img {
+ border-radius: 12px;
+}
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
index 044b1557d..add0405ac 100644
--- a/studioShared/lib/interfaces/customerCases.ts
+++ b/studioShared/lib/interfaces/customerCases.ts
@@ -18,12 +18,12 @@ export interface CustomerCaseBase {
slug: string;
basicTitle: string;
description: string;
+ image: IImage;
}
export type CustomerCaseSections = (RichTextBlock | ImageBlock)[];
export interface CustomerCase extends CustomerCaseBase {
- image: IImage;
projectInfo: CustomerCaseProjectInfo;
sections: CustomerCaseSections;
}
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index 132020e97..a9647f1fb 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/studioShared/lib/queries/customerCases.ts
@@ -3,12 +3,23 @@ import { groq } from "next-sanity";
import { LANGUAGE_FIELD_FRAGMENT } from "studio/lib/queries/i18n";
import { translatedFieldFragment } from "studio/lib/queries/utils/i18n";
+const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
+ asset,
+ "metadata": asset -> metadata {
+ lqip
+ },
+ "alt": ${translatedFieldFragment("alt")}
+`;
+
const CUSTOMER_CASE_BASE_FRAGMENT = groq`
_id,
${LANGUAGE_FIELD_FRAGMENT},
"slug": ${translatedFieldFragment("slug")},
"basicTitle": ${translatedFieldFragment("basicTitle")},
- "description": ${translatedFieldFragment("description")}
+ "description": ${translatedFieldFragment("description")},
+ "image": image {
+ ${INTERNATIONALIZED_IMAGE_FRAGMENT}
+ }
`;
export const CUSTOMER_CASES_QUERY = groq`
@@ -17,20 +28,9 @@ export const CUSTOMER_CASES_QUERY = groq`
}
`;
-const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
- asset,
- "metadata": asset -> metadata {
- lqip
- },
- "alt": ${translatedFieldFragment("alt")}
-`;
-
export const CUSTOMER_CASE_QUERY = groq`
*[_type == "customerCase" && ${translatedFieldFragment("slug")} == $slug][0] {
${CUSTOMER_CASE_BASE_FRAGMENT},
- "image": image {
- ${INTERNATIONALIZED_IMAGE_FRAGMENT}
- },
"projectInfo": projectInfo {
customer,
"name": ${translatedFieldFragment("name")},