diff --git a/public/_assets/arrow-right.svg b/public/_assets/arrow-right.svg new file mode 100644 index 000000000..4088b3f25 --- /dev/null +++ b/public/_assets/arrow-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/_assets/arrow-up-right.svg b/public/_assets/arrow-up-right.svg new file mode 100644 index 000000000..0c5f6d1dc --- /dev/null +++ b/public/_assets/arrow-up-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/_assets/arrow.svg b/public/_assets/arrow.svg deleted file mode 100644 index 601f40530..000000000 --- a/public/_assets/arrow.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx new file mode 100644 index 000000000..cde0a0a50 --- /dev/null +++ b/src/components/badge/Badge.tsx @@ -0,0 +1,27 @@ +import Text from "src/components/text/Text"; + +import styles from "./badge.module.css"; + +interface IBadge { + children: React.ReactNode; + badgeColor?: string; + textColor?: string; +} + +const Badge = ({ + children, + badgeColor = "#EAEAEA", + textColor = "#222424", +}: IBadge) => { + const badgeColors = { + backgroundColor: badgeColor, + color: textColor, + }; + return ( +
+ {children} +
+ ); +}; + +export default Badge; diff --git a/src/components/badge/badge.module.css b/src/components/badge/badge.module.css new file mode 100644 index 000000000..a47b1724a --- /dev/null +++ b/src/components/badge/badge.module.css @@ -0,0 +1,9 @@ +.badgeWrapper { + display: inline-flex; + height: 1.5rem; + padding: 0.375rem 0.75rem; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; + border-radius: 624.9375rem; +} diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index 373fa6188..dba1236ab 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -1,16 +1,12 @@ -import { getTranslations } from "next-intl/server"; - import { SanitySharedImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { fetchEmployeesByEmails } from "src/utils/employees"; -import { - CustomerCase as CustomerCaseDocument, - CustomerSector, -} from "studioShared/lib/interfaces/customerCases"; +import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases"; import ContactInformation from "./contactInformation/ContactInformation"; import styles from "./customerCase.module.css"; import FeaturedCases from "./featuredCases/FeaturedCases"; +import CustomerCaseProjectInfo from "./projectInfo/CustomerCaseProjectInfo"; import CustomerCaseConsultants from "./sections/customerCaseConsultants/CustomerCaseConsultants"; import { CustomerCaseSection } from "./sections/CustomerCaseSection"; @@ -27,8 +23,6 @@ export default async function CustomerCase({ customerCase.projectInfo.consultants, ); - const t = await getTranslations("customer_case"); - return (
@@ -36,144 +30,14 @@ export default async function CustomerCase({ {customerCase.basicTitle}
-
-
- {customerCase.projectInfo.customerSectors && ( -
- - {t("customer").toUpperCase()} - -
- {customerCase.projectInfo.customerSectors.map( - (sector: CustomerSector) => ( - - {sector.customerSector} - - ), - )} -
-
- )} - {consultantsResult.ok && ( -
- - {t("variants").toUpperCase()} - -
- 【 - {consultantsResult.value.map((c) => ( - - {c.name} - - ))} - 】 -
-
- )} - {customerCase.projectInfo.collaborators && ( -
- - {t("collaborators").toUpperCase()} - -
- {customerCase.projectInfo.collaborators.map( - (collaborator) => ( - - {collaborator} - - ), - )} -
-
- )} - {customerCase.projectInfo.url && ( -
- - {t("url").toUpperCase()} - - {customerCase.projectInfo.url} -
- )} -
-
- {customerCase.projectInfo.deliveries && ( -
- {customerCase.projectInfo.deliveries["projectManagement"] && ( -
- - {t("project_management").toUpperCase()} - -
- {customerCase.projectInfo.deliveries[ - "projectManagement" - ].map((projectManagement) => ( - - {projectManagement.projectManagementDelivery} - - ))} -
-
- )} - {customerCase.projectInfo.deliveries["design"] && ( -
- - {t("design").toUpperCase()} - -
- {customerCase.projectInfo.deliveries["design"].map( - (design) => ( - - {design.designDelivery} - - ), - )} -
-
- )} - {customerCase.projectInfo.deliveries["development"] && ( -
- - {t("development").toUpperCase()} - -
- {customerCase.projectInfo.deliveries["development"].map( - (development) => ( - - {development.developmentDelivery} - - ), - )} -
-
- )} -
- )} + {consultantsResult.ok && ( +
+
-
+ )}
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css index 2b64c4258..5fd4bfcd3 100644 --- a/src/components/customerCases/customerCase/customerCase.module.css +++ b/src/components/customerCases/customerCase/customerCase.module.css @@ -50,61 +50,12 @@ margin: 1rem 0; } -.projectInfo { - display: flex; - flex-direction: row; - gap: 1rem; -} - -.projectInfoInner { - width: 537px; - max-width: 537px; - gap: 1.5rem; - display: flex; - flex-direction: column; - flex-wrap: wrap; -} - -.dotSeperator::after { - content: "·"; - margin: 0 0.5rem; -} - -.dotSeperator:last-child:after { - content: ""; - margin: 0; -} - -.varianter { - max-width: 537px; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.dotSeperatorVarianter::after { - content: "·"; - margin: 0 0.5rem; -} - -.dotSeperatorVarianter:nth-last-child(2)::after { - content: ""; - margin: 0rem; -} - -.projectInfoItem { - display: flex; - flex-direction: row; -} - -.title { - color: var(--text-tertiary); -} - -.deliveries { +.projectInfoWrapper { display: flex; flex-direction: column; - gap: 1.5rem; + align-self: center; + width: 100%; + max-width: 960px; } .sectionsWrapper { diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx new file mode 100644 index 000000000..08cddba02 --- /dev/null +++ b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx @@ -0,0 +1,163 @@ +import { getTranslations } from "next-intl/server"; + +import Badge from "src/components/badge/Badge"; +import CustomLink from "src/components/link/CustomLink"; +import Text from "src/components/text/Text"; +import { ChewbaccaEmployee } from "src/types/employees"; +import { LinkType } from "studio/lib/interfaces/navigation"; +import { + CustomerCaseProjectInfo as CustomerCaseCaseProjectInfoObject, + CustomerSector, +} from "studioShared/lib/interfaces/customerCases"; + +import styles from "./customerCaseProjectInfo.module.css"; + +interface CustomerCaseProjectInfoProps { + projectInfo: CustomerCaseCaseProjectInfoObject; + consultantsInProject: ChewbaccaEmployee[]; +} + +export default async function CustomerCaseProjectInfo({ + projectInfo, + consultantsInProject, +}: CustomerCaseProjectInfoProps) { + const t = await getTranslations("customer_case"); + + return ( + <> +
+
+ {projectInfo.customerSectors && ( +
+ + {t("customer").toUpperCase()} + +
+ {projectInfo.customerSectors.map((sector: CustomerSector) => ( + {sector.customerSector} + ))} +
+
+ )} +
+ + {t("variants").toUpperCase()} + +
+ 【 + {consultantsInProject.map((c) => ( + + {c.name} + + ))} + 】 +
+
+ {projectInfo.collaborators && ( +
+ + {t("collaborators").toUpperCase()} + +
+ {projectInfo.collaborators.map((collaborator) => ( + + {collaborator} + + ))} +
+
+ )} + {projectInfo.url && ( +
+ + {t("url")} + + +
+ )} +
+
+ {projectInfo.deliveries && ( +
+ {projectInfo.deliveries["projectManagement"] && ( +
+ + {t("project_management").toUpperCase()} + +
+ {projectInfo.deliveries["projectManagement"].map( + (projectManagement) => ( + + {projectManagement.projectManagementDelivery} + + ), + )} +
+
+ )} + {projectInfo.deliveries["design"] && ( +
+ + {t("design").toUpperCase()} + +
+ {projectInfo.deliveries["design"].map((design) => ( + + {design.designDelivery} + + ))} +
+
+ )} + {projectInfo.deliveries["development"] && ( +
+ + {t("development").toUpperCase()} + +
+ {projectInfo.deliveries["development"].map( + (development) => ( + + {development.developmentDelivery} + + ), + )} +
+
+ )} +
+ )} +
+
+ + ); +} diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css new file mode 100644 index 000000000..c652f6ff6 --- /dev/null +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -0,0 +1,84 @@ +.projectInfo { + display: flex; + flex-direction: row; + gap: 1rem; + width: 100%; + + @media (max-width: 425px) { + flex-direction: column; + gap: 3rem; + } +} + +.projectInfoInner { + gap: 1.5rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.badgeWrapper { + display: flex; + align-items: flex-start; + align-content: flex-start; + gap: 0.375rem; + align-self: stretch; + flex-wrap: wrap; + padding-top: 0.25rem; +} + +.dotSeperator::after { + content: "·"; + margin: 0 0.5rem; +} + +.dotSeperator:last-child:after { + content: ""; + margin: 0; +} + +.varianter { + max-width: 537px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.dotSeperatorVarianter::after { + content: "·"; + margin: 0 0.5rem; +} + +.dotSeperatorVarianter:nth-last-child(2)::after { + content: ""; + margin: 0rem; +} + +.projectInfoItem { + display: flex; + flex-direction: row; +} + +.title { + color: var(--text-tertiary); +} + +.deliveries { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.preFancyCharacter { + margin-right: 0.38rem; +} + +.afterFancyCharacter { + margin-left: 0.38rem; +} + +.urlWrapper { + display: flex; + flex-direction: column; + gap: 0.25rem; +} diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx index 73ad4d033..135757ec0 100644 --- a/src/components/link/CustomLink.tsx +++ b/src/components/link/CustomLink.tsx @@ -43,7 +43,11 @@ const CustomLink = ({ } > {link.linkTitle} -
) : (