diff --git a/src/components/employeeComponent/employeeComponent.module.css b/src/components/employeeComponent/employeeComponent.module.css index 9a181ae57..e0bcfe60f 100644 --- a/src/components/employeeComponent/employeeComponent.module.css +++ b/src/components/employeeComponent/employeeComponent.module.css @@ -101,6 +101,22 @@ } +.peopleConsultantRole{ + display: flex; + flex-direction: row; + overflow: visible; + align-self: stretch; +} + +.peopleConsultantRoleDot::after { + content: "ยท"; + margin: 0 0.5rem +} + +.peopleConsultantRoleDot:last-child:after{ + content: ""; + margin: 0; +} /*-------------Email_PhoneNR----------------*/ .peopleContactInfo{ diff --git a/src/components/employeeComponent/employeeComponent.tsx b/src/components/employeeComponent/employeeComponent.tsx index 78aa52602..db2e8c404 100644 --- a/src/components/employeeComponent/employeeComponent.tsx +++ b/src/components/employeeComponent/employeeComponent.tsx @@ -37,12 +37,18 @@ export default function EmployeeComponent({

{consultant.name}

+
{consultant.competences.map((competence) => ( - - {competence} + <> + + {competence} + + ))} + +
diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css index 695a603a4..8f885e846 100644 --- a/src/components/sections/employees/employees.module.css +++ b/src/components/sections/employees/employees.module.css @@ -3,19 +3,21 @@ flex-direction: column; align-items: center; margin: 5rem 0; + flex-wrap: wrap; + } .header { - grid-column: 1 / -1; color: var(--primary-black); font-size: 48px; font-weight: 600; + align-self: flex-start; + } .employeeCountWrapper { width: 100%; - grid-column: 1 / -1; - margin-bottom: -24px; + } .employeeCount { @@ -28,56 +30,13 @@ } .employees { - max-width: 1400px; - width: 100%; - text-wrap: wrap; - column-gap: 12px; - row-gap: 52px; - display: grid; - grid-template-columns: repeat(auto-fit, 225px); - justify-content: center; - padding: 1rem; -} - -.employee { display: flex; flex-direction: column; + max-width: 1400px; width: 100%; - gap: 1rem; -} - -.employeeImage { - display: flex; - flex-direction: column; + text-wrap: wrap; align-items: center; - background-color: var(--primary-black); - border-radius: 12px; - height: 150px; - padding: 1rem; - position: relative; -} - -.employeeInfo { - display: flex; - flex-direction: column; - gap: 6px; -} - -.employeeName { - color: var(--primary-black); - font-size: 16px; - font-weight: 600; -} - -.employeeRole { - color: var(--primary-grey); -} - -.employeeEmail, -.employeeTelephone { - color: var(--primary-black); - font-size: 16px; - font-weight: 300; + gap: 0.5rem; } .peopleContainer { @@ -85,6 +44,4 @@ flex-wrap: wrap; gap: 1rem; justify-content: center; - - } \ No newline at end of file