fix: several minor fixes in layout ++

messages/en.json

@@ -46,7 +46,6 @@
       "master": "Master"
     }
   },
-
   "employee_card": {
     "show": "Showing",
     "of": "out of",
@@ -59,7 +58,8 @@
     "Prosjekt- og produktledelse": "Project and product management",
     "Strategi": "Strategy",
     "field": "Field",
-    "showMore": "Show all"
+    "showMore": "Show all",
+    "see_all_employees": "See all people"
   },
   "job_posting": {
     "office": "Office",

messages/no.json

@@ -58,7 +58,8 @@
     "Prosjekt- og produktledelse": "Prosjekt- og produktledelse",
     "Strategi": "Strategi",
     "field": "Fag",
-    "showMore": "Vis alle"
+    "showMore": "Vis alle",
+    "see_all_employees": "Se alle folk"
   },
   "job_posting": {
     "office": "Kontor",

messages/se.json

@@ -58,7 +58,8 @@
     "Ledelse": "Ledelse",
     "Strategi": "Strategi",
     "field": "Fält",
-    "showMore": "Vis alla"
+    "showMore": "Vis alla",
+    "see_all_employees": "Se alla folk"
   },
   "job_posting": {
     "office": "Kontor",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "sankitty",
-  "version": "0.1.0",
+  "name": "@variant/homepage",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/(main)/[locale]/[...path]/page.tsx

@@ -138,7 +138,9 @@ async function Page({ params }: Props) {
                 <Legal document={queryResponse.data} />
               );
             case "employee":
-              return <EmployeePage employee={queryResponse} />;
+              return (
+                <EmployeePage employee={queryResponse} language={locale} />
+              );
           }
           return Page404;
         })()}

src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx

@@ -1,6 +1,6 @@
-import Image from "next/image";
 import { useTranslations } from "next-intl";
 
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
@@ -26,11 +26,11 @@ export default function CustomerCaseEmployeeCard({
     employee.email && (
       <div key={employee.email} className={styles.employee}>
         <div className={styles.employeeImage}>
-          <Image
-            src={employee.imageUrl ?? employee.imageThumbUrl}
-            alt={employee.name}
-            objectFit="cover"
-            fill={true}
+          <SanityImage
+            image={{
+              src: { src: employee.imageUrl ?? employee.imageThumbUrl },
+              alt: employee.name,
+            }}
           />
         </div>
         <div className={styles.employeeInfo}>

src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx

@@ -104,7 +104,7 @@ export default async function CustomerCaseProjectInfo({
                 _key: "go-to-external-link",
                 _type: "link",
                 linkType: LinkType.External,
-                linkTitle: projectInfo.url,
+                linkTitle: shortenUrl(projectInfo.url),
                 url: projectInfo.url,
                 ariaLabel: projectInfo.url,
               }}
@@ -175,3 +175,7 @@ export default async function CustomerCaseProjectInfo({
     </div>
   );
 }
+
+function shortenUrl(url: string) {
+  return url.replace(/^https?:\/\/(www\.)?/, "");
+}

src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css

@@ -1,21 +1,18 @@
 .projectInfo {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 1rem;
+  row-gap: 3rem;
   width: 100%;
   max-width: var(--max-content-width-medium);
 
-  @media (max-width: 425px) {
-    flex-direction: column;
-    gap: 3rem;
-  }
+  margin: var(--padding-m) auto;
 }
 
 .projectInfoInner {
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  width: 50%;
 }
 
 .badgeWrapper {
@@ -70,7 +67,6 @@
   flex-direction: column;
   gap: 1.5rem;
   flex-wrap: wrap;
-  width: 50%;
 }
 
 .preFancyCharacter {
@@ -85,4 +81,5 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  overflow: hidden;
 }

src/components/employeePage/EmployeePage.tsx

@@ -1,19 +1,26 @@
-import Image from "next/image";
-import { useTranslations } from "next-intl";
-
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
 
+import { getTranslations } from "next-intl/server";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+import { SanityImage } from "../image/SanityImage";
+import LinkButton from "../linkButton/LinkButton";
 import styles from "./employeePage.module.css";
 
 export interface EmployeePageProps {
   employee: ChewbaccaEmployee;
+  language: string;
 }
 
-export default function EmployeePage({ employee }: EmployeePageProps) {
+export default async function EmployeePage({
+  employee,
+  language,
+}: EmployeePageProps) {
+  const employeePageSlug = await getEmployeePageSlug(language);
   const image = employee.imageUrl ?? employee.imageThumbUrl ?? null;
-  const t = useTranslations("employee_card");
+  const t = await getTranslations("employee_card");
 
   return (
     employee.name && (
@@ -22,24 +29,26 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
           <div className={styles.employee}>
             {image != null && (
               <div className={styles.employeeImage}>
-                <Image
-                  src={image}
-                  alt={employee.name}
-                  objectFit="cover"
-                  fill={true}
+                <SanityImage
+                  image={{
+                    src: { src: image },
+                    alt: employee.name,
+                  }}
                 />
               </div>
             )}
             <div className={styles.employeeInfo}>
               <Text type={"h2"}>{employee.name}</Text>
               {employee.email && (
                 <Text type={"bodyBig"} className={styles.employeeEmail}>
-                  {employee.email}
+                  <a href={`mailto:${employee.email}`}>{employee.email}</a>
                 </Text>
               )}
               {employee.telephone && (
                 <Text type={"bodyBig"} className={styles.employeeTelephone}>
-                  {formatPhoneNumber(employee.telephone)}
+                  <a href={`tel:${employee.telephone}`}>
+                    {formatPhoneNumber(employee.telephone)}
+                  </a>
                 </Text>
               )}
               {employee.officeName && (
@@ -49,13 +58,33 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
               )}
               {employee.competences.map((competence) => (
                 <Text type="bodyNormal" key={competence}>
-                  {t(competence)}
+                  {t.has(competence) ? t(competence) : competence}
                 </Text>
               ))}
             </div>
           </div>
+
+          <div className={styles.backToEmployees}>
+            <LinkButton
+              link={`/${language}/${employeePageSlug}`}
+              type="secondary"
+              size="S"
+              linkTitle={t("see_all_employees")}
+            />
+          </div>
         </div>
       </div>
     )
   );
 }
+
+export async function getEmployeePageSlug(language: string) {
+  const employeePageSlug =
+    (
+      await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
+        language,
+      })
+    ).data?.slug ?? "";
+
+  return employeePageSlug;
+}

src/components/employeePage/employeePage.module.css

@@ -7,41 +7,24 @@
 
 .content {
   width: 100%;
-  max-width: 1200px;
+  max-width: var(--max-content-width-small);
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 4rem 0 8rem 0;
 }
 
 .employee {
-  display: flex;
+  display: grid;
   gap: 3rem;
-  flex-direction: column;
-  margin: 1rem;
-
-  @media (min-width: 1024px) {
-    flex-direction: row;
-    align-items: center;
-  }
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .employeeImage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   background-color: var(--Dark-500);
-  border-radius: 12px;
-  width: 300px;
-  height: 300px;
-  padding: 1rem;
-  position: relative;
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    width: 200px;
-    height: 200px;
-  }
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
 
 .employeeInfo {
@@ -66,3 +49,11 @@
   color: var(--Dark-500);
   font-weight: 300;
 }
+
+.backToEmployees {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  margin-top: var(--padding-l);
+}

src/components/navigation/footer/footer.module.css

@@ -165,6 +165,7 @@
   font-weight: 500;
   line-height: 120%;
   padding: 0;
+  flex-wrap: wrap;
 }
 
 .dotSeparator:not(:last-child)::after {

src/components/sections/contact-box/contact-box.module.css

@@ -23,6 +23,10 @@
   border-radius: var(--radius-small);
   background: var(--_contactBox__background);
   color: var(--_contactBox__color);
+
+  @media (max-width: 400px) {
+    padding: 1rem 1rem;
+  }
 }
 .contactBox__inner--light {
   --_contactBox__background: var(--background-bg-light-secondary);
@@ -53,7 +57,8 @@
 .tagList {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--padding-s);
+  flex-wrap: wrap;
 
   align-items: flex-start;
   min-width: 120px;

src/components/sections/customerCasesEntry/customerCasesEntry.module.css

@@ -16,7 +16,6 @@
 }
 
 .imageWrapper {
-  aspect-ratio: 16 / 9;
   max-height: 30rem;
   flex-shrink: 1;
 }

src/components/sections/employees/employees.module.css

@@ -7,7 +7,7 @@
   flex-wrap: wrap;
 
   max-width: var(--max-content-width-large);
-  margin: 0 auto;
+  margin: var(--padding-l) auto 0;
 
   background: var(--background-employees-green);
   padding: 3rem;

src/components/sections/generosity/generosity.module.css

@@ -11,23 +11,22 @@
 }
 
 .title {
-  width: 45rem;
+  max-width: 45rem;
   color: var(--text-primary);
 
   @media (max-width: 834px) {
-    width: 25.875rem;
+    max-width: 25.875rem;
   }
 
   @media (max-width: 425px) {
-    width: 19.4375rem;
+    max-width: 19.4375rem;
   }
 }
 
 .content {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 0.25rem;
   gap: 1rem;
 
   height: 30rem;
@@ -48,7 +47,6 @@
   @media (max-width: 768px) {
     display: flex;
     flex-direction: column;
-    padding: 1.5rem;
     height: unset;
   }
 }