From 5867607ae977533a3a89183cbdc0be4dad44612c Mon Sep 17 00:00:00 2001
From: Kristoffer Larberg <mail@kristofferlarberg.se>
Date: Fri, 16 Dec 2022 17:13:43 +0100
Subject: [PATCH] refactor: replace Row - wip

---
 client/src/components/Carousel/Carousel.js    |  25 +-
 .../src/components/ContentCard/ContentCard.js |  10 +-
 client/src/components/Footer/Footer.js        | 372 +++++++++---------
 client/src/components/Layout/Flex.js          |  48 +++
 client/src/components/Layout/index.js         |   1 +
 client/src/features/About/CTA.js              |  29 +-
 client/src/features/About/Content.js          |  74 ++--
 client/src/features/About/Medarbetare.js      |  12 +-
 client/src/features/About/TeamList.js         |  15 +-
 client/src/features/Case/CTA.js               |  31 +-
 client/src/features/Case/CaseFooter.js        |  10 +-
 client/src/features/Case/CaseFooterSection.js |  44 +--
 client/src/features/Hero/BaseHero.js          |  60 ++-
 client/src/features/IteamX/Contact.js         |  15 +-
 client/src/features/IteamX/Content.js         |  23 +-
 client/src/features/IteamX/Content2.js        |  40 +-
 client/src/features/IteamX/Fact.js            |  10 +-
 client/src/pages/book.js                      |  33 +-
 client/src/pages/open-source-skolan/[slug].js |  10 +-
 19 files changed, 409 insertions(+), 453 deletions(-)
 create mode 100644 client/src/components/Layout/Flex.js

diff --git a/client/src/components/Carousel/Carousel.js b/client/src/components/Carousel/Carousel.js
index 8ef1edfc..db8d2249 100644
--- a/client/src/components/Carousel/Carousel.js
+++ b/client/src/components/Carousel/Carousel.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useNextSanityImage } from 'next-sanity-image'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 import Gravatar from 'react-gravatar'
 import Slider from 'react-slick'
 import { rgba } from 'polished'
@@ -308,20 +307,16 @@ export const Carousel = ({ content, coworker = false }) => {
   }
   return (
     <Container>
-      <Row className="justify-content-center">
-        <Col lg="12" xl="11">
-          <SliderStyled {...slickSettings} activeSlide={activeSlide}>
-            {content.map((person, i) => {
-              const active = activeSlide === i
-              return coworker ? (
-                <Coworker item={person} key={i} active={active} />
-              ) : (
-                <Client item={person} key={i} active={active} />
-              )
-            })}
-          </SliderStyled>
-        </Col>
-      </Row>
+      <SliderStyled {...slickSettings} activeSlide={activeSlide}>
+        {content.map((person, i) => {
+          const active = activeSlide === i
+          return coworker ? (
+            <Coworker item={person} key={i} active={active} />
+          ) : (
+            <Client item={person} key={i} active={active} />
+          )
+        })}
+      </SliderStyled>
     </Container>
   )
 }
diff --git a/client/src/components/ContentCard/ContentCard.js b/client/src/components/ContentCard/ContentCard.js
index c10476dd..fc3a0e61 100644
--- a/client/src/components/ContentCard/ContentCard.js
+++ b/client/src/components/ContentCard/ContentCard.js
@@ -1,7 +1,6 @@
+import clsx from 'clsx'
 import React from 'react'
-import { Col } from 'react-bootstrap'
 import styled from 'styled-components'
-import clsx from 'clsx'
 
 import { Box, Typography } from '../Core'
 
@@ -16,10 +15,7 @@ const StyledBox = styled(Box)`
 `
 
 export const ContentCard = ({ dark = false, className, title, ...rest }) => (
-  <Col
-    lg="4"
-    md="6"
-    className="mb-4"
+  <div
     data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="50"
@@ -38,5 +34,5 @@ export const ContentCard = ({ dark = false, className, title, ...rest }) => (
         {title}
       </Typography.H3>
     </StyledBox>
-  </Col>
+  </div>
 )
diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js
index 7b5e8f0f..a8cb88db 100644
--- a/client/src/components/Footer/Footer.js
+++ b/client/src/components/Footer/Footer.js
@@ -1,10 +1,9 @@
-import React from 'react'
-import { Row, Col } from 'react-bootstrap'
 import clsx from 'clsx'
+import React from 'react'
 
 import { Box, Typography } from '../Core'
+import { Container, Flex } from '../Layout'
 import { Logo } from '../Logo'
-import { Container } from '../Layout'
 
 const FooterList = ({ children, className }) => {
   return (
@@ -19,221 +18,206 @@ export const Footer = ({ isDark = true, content }) => {
     <footer>
       <Box bg={isDark ? 'dark' : 'light'}>
         <Container>
-          <Box
-            css={`
-              padding: 80px 0 60px;
-            `}
-          >
-            <Row className="justify-content-center">
-              <Col lg="2" md="4">
-                <Logo white={isDark} vertical />
-              </Col>
-              <Col lg="10" md="8" className="mt-5 mt-lg-0">
-                <Row>
-                  <Col xs="6" lg="3">
-                    <div className="mb-5 mb-lg-4">
-                      <Typography.H3
+          <section>
+            <Flex
+              distance
+              className={clsx(
+                'tw-border-1 tw-border-y tw-py-12',
+                isDark ? 'tw-border-[#2f2f31]' : 'tw-border-gray-border'
+              )}
+            >
+              <Logo white={isDark} />
+              <Flex staticRow>
+                <div>
+                  <Typography.H3
+                    className={clsx(
+                      'tw-mb-6 tw-text-base',
+                      isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                    )}
+                  >
+                    {content.follow}
+                  </Typography.H3>
+                  <FooterList>
+                    <li className="tw-font-light tw-leading-9">
+                      <Typography.Anchor
+                        href={content.linkedinLink}
+                        target="_blank"
+                        ariaLabel="Linkedin"
                         className={clsx(
-                          'tw-mb-6 tw-text-base',
                           isDark ? 'tw-text-white' : 'tw-text-gray-dark'
                         )}
                       >
-                        {content.follow}
-                      </Typography.H3>
-                      <FooterList>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={content.linkedinLink}
-                            target="_blank"
-                            ariaLabel="Linkedin"
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            <i
-                              className="icon icon-logo-linkedin tw-mr-1"
-                              aria-hidden="true"
-                            ></i>
-                            {content.linkedin}
-                          </Typography.Anchor>
-                        </li>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={content.twitterLink}
-                            target="_blank"
-                            aria-label="Twitter"
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            <i
-                              className="icon icon-logo-twitter tw-mr-1"
-                              aria-hidden="true"
-                            ></i>
-                            {content.twitter}
-                          </Typography.Anchor>
-                        </li>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={content.facebookLink}
-                            target="_blank"
-                            aria-label="Facebook"
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            <i
-                              className="icon icon-logo-facebook tw-mr-1"
-                              aria-hidden="true"
-                            ></i>
+                        <i
+                          className="icon icon-logo-linkedin tw-mr-1"
+                          aria-hidden="true"
+                        ></i>
+                        {content.linkedin}
+                      </Typography.Anchor>
+                    </li>
+                    <li className="tw-font-light tw-leading-9">
+                      <Typography.Anchor
+                        href={content.twitterLink}
+                        target="_blank"
+                        aria-label="Twitter"
+                        className={clsx(
+                          isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                        )}
+                      >
+                        <i
+                          className="icon icon-logo-twitter tw-mr-1"
+                          aria-hidden="true"
+                        ></i>
+                        {content.twitter}
+                      </Typography.Anchor>
+                    </li>
+                    <li className="tw-font-light tw-leading-9">
+                      <Typography.Anchor
+                        href={content.facebookLink}
+                        target="_blank"
+                        aria-label="Facebook"
+                        className={clsx(
+                          isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                        )}
+                      >
+                        <i
+                          className="icon icon-logo-facebook tw-mr-1"
+                          aria-hidden="true"
+                        ></i>
+                        {content.facebook}
+                      </Typography.Anchor>
+                    </li>
+                    <li className="tw-font-light tw-leading-9">
+                      <Typography.Anchor
+                        href={content.instagramLink}
+                        target="_blank"
+                        aria-label="Instagram"
+                        className={clsx(
+                          isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                        )}
+                      >
+                        <i
+                          className="icon icon-logo-instagram tw-mr-1"
+                          aria-hidden="true"
+                        ></i>
 
-                            {content.facebook}
-                          </Typography.Anchor>
-                        </li>
-                        <li className="tw-font-light tw-leading-9">
+                        {content.instagram}
+                      </Typography.Anchor>
+                    </li>
+                  </FooterList>
+                </div>
+
+                <div>
+                  <div>
+                    <Typography.H3
+                      className={clsx(
+                        'tw-mb-6 tw-text-base',
+                        isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                      )}
+                    >
+                      {content.visitUs}
+                      <br />
+                    </Typography.H3>
+                    <FooterList>
+                      {content.addresses.map((address) => (
+                        <li
+                          key={address.name}
+                          className={clsx('tw-mb-5 tw-font-light tw-leading-9')}
+                        >
                           <Typography.Anchor
-                            href={content.instagramLink}
-                            target="_blank"
-                            aria-label="Instagram"
+                            href={address.addressLink}
                             className={clsx(
                               isDark ? 'tw-text-white' : 'tw-text-gray-dark'
                             )}
+                            target="_blank"
                           >
-                            <i
-                              className="icon icon-logo-instagram tw-mr-1"
-                              aria-hidden="true"
-                            ></i>
-
-                            {content.instagram}
+                            {address.name}
+                            <br />
+                            {address.streetAddress}
+                            <br />
+                            {address.zipCode} {address.city}
                           </Typography.Anchor>
                         </li>
-                      </FooterList>
-                    </div>
-                  </Col>
-                  <Col xs="6" lg="3">
-                    <div className="mb-5 mb-lg-4">
-                      <Typography.H3
+                      ))}
+                      <li
                         className={clsx(
-                          'tw-mb-6 tw-text-base',
+                          'tw-mb-5 tw-font-light',
                           isDark ? 'tw-text-white' : 'tw-text-gray-dark'
                         )}
                       >
-                        {content.visitUs}
-                        <br />
-                      </Typography.H3>
-                      <FooterList>
-                        {content.addresses.map((address) => (
-                          <li
-                            key={address.name}
-                            className={clsx(
-                              'tw-mb-5 tw-font-light tw-leading-9'
-                            )}
-                          >
-                            <Typography.Anchor
-                              href={address.addressLink}
-                              className={clsx(
-                                isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                              )}
-                              target="_blank"
-                            >
-                              {address.name}
-                              <br />
-                              {address.streetAddress}
-                              <br />
-                              {address.zipCode} {address.city}
-                            </Typography.Anchor>
-                          </li>
-                        ))}
-                        <li
+                        {content.orgNumber}
+                      </li>
+                    </FooterList>
+                  </div>
+                </div>
+                <div>
+                  <div className="mb-lg-4">
+                    <Typography.H3
+                      className={clsx(
+                        'tw-mb-6 tw-text-base',
+                        isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                      )}
+                    >
+                      {content.contact}
+                    </Typography.H3>
+                    <FooterList>
+                      <li className="tw-font-light tw-leading-9">
+                        <Typography.Anchor
+                          href={content.contactLink}
                           className={clsx(
-                            'tw-mb-5 tw-font-light',
                             isDark ? 'tw-text-white' : 'tw-text-gray-dark'
                           )}
                         >
-                          {content.orgNumber}
-                        </li>
-                      </FooterList>
-                    </div>
-                  </Col>
-                  <Col xs="6" lg="3">
-                    <div className="mb-lg-4">
-                      <Typography.H3
-                        className={clsx(
-                          'tw-mb-6 tw-text-base',
-                          isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                        )}
-                      >
-                        {content.contact}
-                      </Typography.H3>
-                      <FooterList>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={content.contactLink}
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            {content.contactTitle}
-                          </Typography.Anchor>
-                        </li>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={content.applyForJobLink}
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            {content.applyForJob}
-                          </Typography.Anchor>
-                        </li>
-                        <li className="tw-font-light tw-leading-9">
-                          <Typography.Anchor
-                            href={`mailto:${content.mailToApplyJob}`}
-                            className={clsx(
-                              isDark ? 'tw-text-white' : 'tw-text-gray-dark'
-                            )}
-                          >
-                            {content.applyJob}
-                          </Typography.Anchor>
-                        </li>
-                      </FooterList>
-                    </div>
-                  </Col>
-                </Row>
-              </Col>
-            </Row>
-          </Box>
-          <div
-            className={clsx(
-              'tw-border-1 tw-border-t tw-py-6',
-              isDark ? 'tw-border-[#2f2f31]' : 'tw-border-gray-border'
-            )}
-          >
-            <Row className="align-items-center">
-              <Col
-                sm="6"
-                className="text-sm-left text-left mb-2 mb-sm-0 tw-w-full"
+                          {content.contactTitle}
+                        </Typography.Anchor>
+                      </li>
+                      <li className="tw-font-light tw-leading-9">
+                        <Typography.Anchor
+                          href={content.applyForJobLink}
+                          className={clsx(
+                            isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                          )}
+                        >
+                          {content.applyForJob}
+                        </Typography.Anchor>
+                      </li>
+                      <li className="tw-font-light tw-leading-9">
+                        <Typography.Anchor
+                          href={`mailto:${content.mailToApplyJob}`}
+                          className={clsx(
+                            isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                          )}
+                        >
+                          {content.applyJob}
+                        </Typography.Anchor>
+                      </li>
+                    </FooterList>
+                  </div>
+                </div>
+              </Flex>
+            </Flex>
+          </section>
+
+          <Flex className="items-start tw-py-6">
+            <div className="text-sm-left text-left mb-2 mb-sm-0 tw-w-full">
+              <p
+                className={clsx(
+                  'tw-mb-1 tw-text-xs tw-tracking-normal',
+                  isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                )}
               >
-                <p
+                &copy; 2021 Iteam, All Rights Reserved.{' '}
+                <Typography.Anchor
                   className={clsx(
-                    'tw-mb-1 tw-text-xs tw-tracking-normal',
-                    isDark ? 'tw-text-white' : 'tw-text-gray-dark'
+                    isDark ? 'tw-text-white' : 'tw-text-gray-dark',
+                    'tw-underline'
                   )}
+                  href="/privacy"
                 >
-                  &copy; 2021 Iteam, All Rights Reserved.{' '}
-                  <Typography.Anchor
-                    className={clsx(
-                      isDark ? 'tw-text-white' : 'tw-text-gray-dark',
-                      'tw-underline'
-                    )}
-                    href="/privacy"
-                  >
-                    Our privacy policy.
-                  </Typography.Anchor>
-                </p>
-              </Col>
-            </Row>
-          </div>
+                  Our privacy policy.
+                </Typography.Anchor>
+              </p>
+            </div>
+          </Flex>
         </Container>
       </Box>
     </footer>
diff --git a/client/src/components/Layout/Flex.js b/client/src/components/Layout/Flex.js
new file mode 100644
index 00000000..1486588d
--- /dev/null
+++ b/client/src/components/Layout/Flex.js
@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+import React, { Children } from 'react'
+
+export const Flex = ({ distance, className, children }) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        distance ? 'tw-gap-20' : 'tw-gap-8',
+        'tw-flex tw-flex-col tw-flex-wrap lg:tw-flex-row [&>*]:tw-flex-1'
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const FlexRow = ({ distance, className, children }) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        distance ? 'tw-gap-20' : 'tw-gap-8',
+        'tw-flex tw-flex-row tw-flex-wrap [&>*]:tw-flex-1'
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const FlexFixedCol = ({ distance, className, children }) => {
+  const colAmount = Children.toArray(children).length
+  console.log(colAmount)
+  return (
+    <div
+      className={clsx(
+        className,
+        distance ? 'tw-gap-20' : 'tw-gap-8',
+        colAmount > 'tw-flex-col lg:tw-flex-row ',
+        '[&>*]:tw-w-1/3 [&>*]:tw-flex-initial',
+        'tw-flex'
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/client/src/components/Layout/index.js b/client/src/components/Layout/index.js
index c68e344c..82c49d93 100644
--- a/client/src/components/Layout/index.js
+++ b/client/src/components/Layout/index.js
@@ -1,2 +1,3 @@
 export { Container } from './Container'
+export { Flex, FlexFixedCol, FlexRow } from './Flex'
 export { Layout } from './Layout'
diff --git a/client/src/features/About/CTA.js b/client/src/features/About/CTA.js
index 73eb2a4c..083f3123 100644
--- a/client/src/features/About/CTA.js
+++ b/client/src/features/About/CTA.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography, CTALink } from '../../components/Core'
 import imgOval from '../../assets/image/svg/l1-cta-oval.svg'
@@ -35,21 +34,19 @@ export const CTA = ({ content }) => (
       <RightCard>
         <Image src={svgCurve} alt="" aria-hidden="true" />
       </RightCard>
-      <Container className="tw-relative">
-        <Row className="justify-content-center text-center">
-          <Col lg="6">
-            <Box mb={5} className="text-center">
-              <Typography.H2 className="tw-text-white">
-                {content.title}
-              </Typography.H2>
-              <CTALink
-                href={buildInternalUrl(content.cta.reference)}
-                text={content.cta.title}
-                className="tw-mt-3"
-              />
-            </Box>
-          </Col>
-        </Row>
+      <Container className="tw-relative tw-justify-center tw-text-center">
+        <div>
+          <Box mb={5} className="text-center">
+            <Typography.H2 className="tw-text-white">
+              {content.title}
+            </Typography.H2>
+            <CTALink
+              href={buildInternalUrl(content.cta.reference)}
+              text={content.cta.title}
+              className="tw-mt-3"
+            />
+          </Box>
+        </div>
       </Container>
     </Section>
   </>
diff --git a/client/src/features/About/Content.js b/client/src/features/About/Content.js
index 4a11c7f8..a53f602a 100644
--- a/client/src/features/About/Content.js
+++ b/client/src/features/About/Content.js
@@ -1,67 +1,37 @@
-import React from 'react'
 import Image from 'next/image'
-import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
+import React from 'react'
 
-import { Section, Box, Typography } from '../../components/Core'
+import { Section, Typography } from '../../components/Core'
+import { Container, Flex } from '../../components/Layout'
 import { urlFor } from '../../utils/helpers'
-import { Container } from '../../components/Layout'
-
-const ContentImg = styled(Box)`
-  box-shadow: ${({ theme }) => `0 42px 54px ${theme.colors.shadow}`};
-  border-radius: 10px;
-  overflow: hidden;
-  height: 100%;
-`
 
 export const Content = ({ content }) => (
   <>
     <Section>
       <Container>
-        <Row className="justify-content-center pb-4">
-          <Col lg="6">
-            <Typography.H2>{content.section.title}</Typography.H2>
-          </Col>
-          <Col lg="6" className="pl-lg-5">
-            <Typography.BlockContent
-              blocks={content.section.blockText.blockText}
-            />
-          </Col>
-        </Row>
-        <Row className="mt-5">
+        <Flex className="tw-justify-center tw-pb-4">
+          <Typography.H2>{content.section.title}</Typography.H2>
+          <Typography.BlockContent
+            blocks={content.section.blockText.blockText}
+          />
+        </Flex>
+        <Flex staticRow className="tw-mt-5">
           {content.layoutImages.map((image, index) => {
-            if (index % 2 == 0) {
-              return (
-                <Col lg="4" sm="5" className="mb-4" key={index}>
-                  <ContentImg>
-                    <div className="tw-relative tw-h-[200px] sm:tw-h-[400px]">
-                      <Image
-                        src={urlFor(image.asset._ref)}
-                        alt={image.alt}
-                        layout="fill"
-                        objectFit="cover"
-                      />
-                    </div>
-                  </ContentImg>
-                </Col>
-              )
-            }
             return (
-              <Col lg="8" sm="7" className="mb-4" key={index}>
-                <ContentImg>
-                  <div className="tw-relative tw-h-[200px] sm:tw-h-[400px]">
-                    <Image
-                      src={urlFor(image.asset._ref)}
-                      alt={image.alt}
-                      layout="fill"
-                      objectFit="cover"
-                    />
-                  </div>
-                </ContentImg>
-              </Col>
+              <div
+                key={index}
+                className="tw-relative tw-h-52 tw-overflow-hidden tw-rounded-md lg:tw-h-96"
+              >
+                <Image
+                  src={urlFor(image.asset._ref)}
+                  alt={image.alt}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
             )
           })}
-        </Row>
+        </Flex>
       </Container>
     </Section>
   </>
diff --git a/client/src/features/About/Medarbetare.js b/client/src/features/About/Medarbetare.js
index f973d239..7d804a4d 100644
--- a/client/src/features/About/Medarbetare.js
+++ b/client/src/features/About/Medarbetare.js
@@ -1,27 +1,27 @@
 import React from 'react'
-import { Row, Col } from 'react-bootstrap'
+import { Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
-import { Container } from '../../components/Layout'
+import { Container, Flex } from '../../components/Layout'
 import { formatPhoneNumber } from '../../utils/helpers'
 import { SocialMediaLinks } from './SocialMediaLinks'
 
 const InfoSection = ({ text, title }) => (
-  <Row className="py-5">
+  <Flex className="tw-py-5">
     <Col md={8} lg={6}>
       <Typography.H3>{title}</Typography.H3>
     </Col>
     <Col md={8} lg={6}>
       <Typography.Paragraph>{text}</Typography.Paragraph>
     </Col>
-  </Row>
+  </Flex>
 )
 
 export const Medarbetare = ({ info }) => (
   <Container>
     <Section>
       <Typography.H2 className="sr-only">Info</Typography.H2>
-      <Row className="py-5">
+      <Flex className="tw-py-5">
         <Col md={8} lg={6}>
           <Typography.H3>Kontakt</Typography.H3>
         </Col>
@@ -48,7 +48,7 @@ export const Medarbetare = ({ info }) => (
             )}
           </Typography.Paragraph>
         </Col>
-      </Row>
+      </Flex>
       {info.answerTech && (
         <InfoSection title={info.whyTech} text={info.answerTech} />
       )}
diff --git a/client/src/features/About/TeamList.js b/client/src/features/About/TeamList.js
index 5d54f8cc..12166fb7 100644
--- a/client/src/features/About/TeamList.js
+++ b/client/src/features/About/TeamList.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
 import { Card } from '../../components/Card'
@@ -21,15 +20,11 @@ export const TeamList = ({ content, coworkers }) => {
     <>
       {/* <!-- Team section --> */}
       <Section className="position-relative pt-5" id="medarbetare">
-        <Container>
-          <Row className="justify-content-center">
-            <Col lg="6" className="text-center pb-3">
-              <div id="medarbetare" className="">
-                <Typography.H2>{content.title}</Typography.H2>
-                <Typography.Paragraph>{content.subtitle}</Typography.Paragraph>
-              </div>
-            </Col>
-          </Row>
+        <Container className="tw-justify-center tw-text-center">
+          <div id="medarbetare" className="tw-mb-8">
+            <Typography.H2>{content.title}</Typography.H2>
+            <Typography.Paragraph>{content.subtitle}</Typography.Paragraph>
+          </div>
           <CardList.CardListGrid>
             {sortedTeam.map((coworker) => {
               const {
diff --git a/client/src/features/Case/CTA.js b/client/src/features/Case/CTA.js
index 98ad7b4a..b2a629b6 100644
--- a/client/src/features/Case/CTA.js
+++ b/client/src/features/Case/CTA.js
@@ -1,13 +1,12 @@
-import React from 'react'
 import Image from 'next/image'
+import React from 'react'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 
-import { Section, Box, Typography, CTALink } from '../../components/Core'
 import imgOval from '../../assets/image/svg/l1-cta-oval.svg'
 import svgCurveGray from '../../assets/image/svg/l1-curve-cta-gray.svg'
-import { buildInternalUrl } from '../../utils/helpers'
+import { Box, CTALink, Section, Typography } from '../../components/Core'
 import { Container } from '../../components/Layout'
+import { buildInternalUrl } from '../../utils/helpers'
 
 const LeftCard = styled(Box)`
   position: absolute;
@@ -37,20 +36,16 @@ export const CTA = ({ text }) => {
           {<Image src={svgCurveGray} alt="" aria-hidden="true" />}
         </RightCard>
         <Container className="tw-relative">
-          <Row className="justify-content-center text-center">
-            <Col lg="6">
-              <Box className="text-center">
-                <Typography.H2 className="tw-text-white">
-                  {text.title}
-                </Typography.H2>
-                <CTALink
-                  href={buildInternalUrl(text.cta.reference)}
-                  text={text.cta.title}
-                  className="tw-mt-3"
-                />
-              </Box>
-            </Col>
-          </Row>
+          <div className="text-center">
+            <Typography.H2 className="tw-text-white">
+              {text.title}
+            </Typography.H2>
+            <CTALink
+              href={buildInternalUrl(text.cta.reference)}
+              text={text.cta.title}
+              className="tw-mt-3"
+            />
+          </div>
         </Container>
       </Section>
     </>
diff --git a/client/src/features/Case/CaseFooter.js b/client/src/features/Case/CaseFooter.js
index 23458f05..e3dc60cb 100644
--- a/client/src/features/Case/CaseFooter.js
+++ b/client/src/features/Case/CaseFooter.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Row, Col } from 'react-bootstrap'
+import { Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
-import { CaseFooterSection } from './CaseFooterSection'
+import { Container, Flex } from '../../components/Layout'
 import { urlFor } from '../../utils/helpers'
-import { Container } from '../../components/Layout'
+import { CaseFooterSection } from './CaseFooterSection'
 
 export const CaseFooter = ({ sectionCards }) => {
   return (
@@ -13,7 +13,7 @@ export const CaseFooter = ({ sectionCards }) => {
       <Section bg="#F7F7FB" className="position-relative">
         <Container>
           <Typography.H2 className="sr-only">Mer information</Typography.H2>
-          <Row className="justify-content-center">
+          <Flex>
             {sectionCards.map((card, i) => {
               return (
                 <Col lg="6" className="mb-5 mb-lg-0" key={i}>
@@ -26,7 +26,7 @@ export const CaseFooter = ({ sectionCards }) => {
                 </Col>
               )
             })}
-          </Row>
+          </Flex>
         </Container>
       </Section>
     </>
diff --git a/client/src/features/Case/CaseFooterSection.js b/client/src/features/Case/CaseFooterSection.js
index 1450c4c2..b1e9d4b0 100644
--- a/client/src/features/Case/CaseFooterSection.js
+++ b/client/src/features/Case/CaseFooterSection.js
@@ -1,36 +1,24 @@
-import React from 'react'
 import Image from 'next/image'
-import styled from 'styled-components'
-
-import { Box, Typography } from '../../components/Core'
-
-const Card = styled(Box)`
-  border-radius: 0;
-  overflow: hidden;
-`
-
-const ImageContainer = styled(Box)`
-  max-width: 210px;
-  border-radius: 0px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-`
+import React from 'react'
 
-const CardText = styled(Box)`
-  padding-left: 30px;
-`
+import { Typography } from '../../components/Core'
 
-export const CaseFooterSection = ({ img, title, alt, blocks, ...rest }) => {
+export const CaseFooterSection = ({ img, title, alt, blocks }) => {
   return (
-    <Card className="d-flex" {...rest}>
-      <ImageContainer>
-        <Image src={img} alt={alt} layout="fill" objectFit="contain" />
-      </ImageContainer>
-      <CardText>
+    <section className="tw-flex">
+      <div className="tw-relative tw-w-1/5 tw-overflow-hidden">
+        <Image
+          src={img}
+          alt={alt}
+          layout="fill"
+          objectFit="contain"
+          objectPosition="top"
+        />
+      </div>
+      <div className="tw-w-4/5 tw-pl-8">
         <Typography.H3>{title}</Typography.H3>
         <Typography.BlockContent blocks={blocks.blockText} />
-      </CardText>
-    </Card>
+      </div>
+    </section>
   )
 }
diff --git a/client/src/features/Hero/BaseHero.js b/client/src/features/Hero/BaseHero.js
index 7107227d..8fed54ff 100644
--- a/client/src/features/Hero/BaseHero.js
+++ b/client/src/features/Hero/BaseHero.js
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React from 'react'
-import { Row, Col } from 'react-bootstrap'
+import { Col } from 'react-bootstrap'
 
 import { CTALink, Section, Typography } from '../../components/Core'
 import { Container } from '../../components/Layout'
@@ -69,37 +69,35 @@ export const BaseHero = ({
       )}
     >
       <Container className="tw-h-full">
-        <Row>
-          <Col md="11" lg="9" xl="7">
-            {children}
-            {subtitle && mediaType.type === 'color' ? (
-              <Typography.Paragraph className="tw-text-white">
+        <Col md="11" lg="9" xl="7">
+          {children}
+          {subtitle && mediaType.type === 'color' ? (
+            <Typography.Paragraph className="tw-text-white">
+              {subtitle}
+            </Typography.Paragraph>
+          ) : (
+            <Typography.Paragraph className="tw-text-white">
+              <span className="tw-inline tw-whitespace-pre-wrap tw-bg-[rgb(0,0,0,0.8)] tw-box-decoration-clone tw-p-2 tw-leading-[2.46rem]">
                 {subtitle}
-              </Typography.Paragraph>
-            ) : (
-              <Typography.Paragraph className="tw-text-white">
-                <span className="tw-inline tw-whitespace-pre-wrap tw-bg-[rgb(0,0,0,0.8)] tw-box-decoration-clone tw-p-2 tw-leading-[2.46rem]">
-                  {subtitle}
-                </span>
-              </Typography.Paragraph>
-            )}
-            {link && (
-              <div
-                data-aos="fade-up"
-                data-aos-duration="300"
-                data-aos-once="true"
-                data-aos-delay="200"
-              >
-                <CTALink
-                  href={getExternalOrInternalLink(link.link)}
-                  text={link.title}
-                  className="tw-mt-8 tw-w-fit"
-                  variant="secondary"
-                />
-              </div>
-            )}
-          </Col>
-        </Row>
+              </span>
+            </Typography.Paragraph>
+          )}
+          {link && (
+            <div
+              data-aos="fade-up"
+              data-aos-duration="300"
+              data-aos-once="true"
+              data-aos-delay="200"
+            >
+              <CTALink
+                href={getExternalOrInternalLink(link.link)}
+                text={link.title}
+                className="tw-mt-8 tw-w-fit"
+                variant="secondary"
+              />
+            </div>
+          )}
+        </Col>
       </Container>
     </SectionWithBackground>
   )
diff --git a/client/src/features/IteamX/Contact.js b/client/src/features/IteamX/Contact.js
index af208629..a14bcefa 100644
--- a/client/src/features/IteamX/Contact.js
+++ b/client/src/features/IteamX/Contact.js
@@ -1,12 +1,11 @@
-import React from 'react'
 import Image from 'next/image'
+import React from 'react'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 
-import { Box } from '../../components/Core'
 import imgShape from '../../assets/image/svg/contact-shape.svg'
-import { HubspotForm } from '../../features/HubspotForm'
+import { Box } from '../../components/Core'
 import { Container } from '../../components/Layout'
+import { HubspotForm } from '../../features/HubspotForm'
 
 const BoxStyled = styled(Box)`
   &::after {
@@ -40,11 +39,9 @@ export const Contact = () => (
         />
       </div>
       <Container className="tw-relative tw-z-10">
-        <Row className="justify-content-center">
-          <Col lg="10" id="sprintMeeting">
-            <HubspotForm value="iteamX" title="Boka gratis rådgivningsmöte" />
-          </Col>
-        </Row>
+        <div id="sprintMeeting">
+          <HubspotForm value="iteamX" title="Boka gratis rådgivningsmöte" />
+        </div>
       </Container>
     </BoxStyled>
   </>
diff --git a/client/src/features/IteamX/Content.js b/client/src/features/IteamX/Content.js
index 72844432..367e5015 100644
--- a/client/src/features/IteamX/Content.js
+++ b/client/src/features/IteamX/Content.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 
-import { Section, Span, Typography } from '../../components/Core'
 import { ContentCard } from '../../components/ContentCard'
-import { Container } from '../../components/Layout'
+import { Section, Span, Typography } from '../../components/Core'
+import { Container, FlexFixedCol } from '../../components/Layout'
 
 const SectionStyled = styled(Section)``
 
@@ -27,21 +26,15 @@ export const Content = ({ content }) => {
       {/* <!-- Content section --> */}
       <SectionStyled bg="dark">
         <Container>
-          <Row className="justify-content-center mb-5">
-            <Col lg="10">
-              <div className="text-center">
-                <Typography.H2 className="tw-text-white">
-                  {title[0]}
-                  <Span color="secondary">en hypotes.</Span> {title[1]}
-                </Typography.H2>
-              </div>
-            </Col>
-          </Row>
-          <Row className="justify-content-center">
+          <Typography.H2 className="tw-text-center tw-text-white">
+            {title[0]}
+            <Span color="secondary">en hypotes.</Span> {title[1]}
+          </Typography.H2>
+          <FlexFixedCol className="tw-mt-20 tw-justify-center">
             {tech.map((item, i) => (
               <ContentCard key={i} title={item} dark />
             ))}
-          </Row>
+          </FlexFixedCol>
         </Container>
       </SectionStyled>
     </>
diff --git a/client/src/features/IteamX/Content2.js b/client/src/features/IteamX/Content2.js
index ebf51e05..074c90fa 100644
--- a/client/src/features/IteamX/Content2.js
+++ b/client/src/features/IteamX/Content2.js
@@ -1,11 +1,11 @@
+import Image from 'next/image'
 import React from 'react'
+import { Col } from 'react-bootstrap'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
-import Image from 'next/image'
 
-import { Section, Box, Typography, CTALink } from '../../components/Core'
+import { Box, CTALink, Section, Typography } from '../../components/Core'
+import { Container, Flex } from '../../components/Layout'
 import { urlFor } from '../../utils/helpers'
-import { Container } from '../../components/Layout'
 
 const ImageRight = styled(Box)`
   img {
@@ -20,23 +20,10 @@ export const Content2 = ({ content }) => {
       {/* <!-- Content section 1 --> */}
       <Section bg="dark" id="ai_sustainability">
         <Container>
-          <Row className="align-items-center">
-            <Col lg="6" md="10" className="order-lg-2 mb-4">
-              <div className="position-relative text-lg-right">
-                <ImageRight>
-                  <Image
-                    src={urlFor(content.imageWithAlt.asset._ref)}
-                    alt={content.imageWithAlt.alt}
-                    width={1526}
-                    height={918}
-                    layout="responsive"
-                  />
-                </ImageRight>
-              </div>
-            </Col>
+          <Flex distance className="items-center">
             <Col
               lg="6"
-              className="order-lg-1 mt-5 mt-lg-0"
+              className="tw-order-2 tw-mt-12 lg:tw-order-1 lg:tw-mt-0"
               data-aos="fade-zoom-in"
               data-aos-easing="ease-in-back"
               data-aos-delay="50"
@@ -59,7 +46,20 @@ export const Content2 = ({ content }) => {
                 />
               </div>
             </Col>
-          </Row>
+            <Col lg="6" md="10" className="tw-order-1 lg:tw-order-2">
+              <div className="position-relative text-lg-right">
+                <ImageRight>
+                  <Image
+                    src={urlFor(content.imageWithAlt.asset._ref)}
+                    alt={content.imageWithAlt.alt}
+                    width={1526}
+                    height={918}
+                    layout="responsive"
+                  />
+                </ImageRight>
+              </div>
+            </Col>
+          </Flex>
         </Container>
       </Section>
     </>
diff --git a/client/src/features/IteamX/Fact.js b/client/src/features/IteamX/Fact.js
index 80d16140..9ba4acd6 100644
--- a/client/src/features/IteamX/Fact.js
+++ b/client/src/features/IteamX/Fact.js
@@ -1,10 +1,10 @@
 import React from 'react'
+import { Col } from 'react-bootstrap'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 
-import { Section, Box, Typography } from '../../components/Core'
+import { Box, Section, Typography } from '../../components/Core'
+import { Container, Flex } from '../../components/Layout'
 import { device } from '../../utils'
-import { Container } from '../../components/Layout'
 
 const SectionStyled = styled(Section)`
   border-bottom: 1px solid #2d2d30;
@@ -20,7 +20,7 @@ export const Fact = ({ content }) => (
     {/* <!-- Fact section 1 --> */}
     <SectionStyled bg="dark">
       <Container>
-        <Row>
+        <Flex staticRow>
           {content.texts.map((item, index) => (
             <Col md="4" sm="6" className="mb-4 mb-md-0" key={index}>
               <Box>
@@ -33,7 +33,7 @@ export const Fact = ({ content }) => (
               </Box>
             </Col>
           ))}
-        </Row>
+        </Flex>
       </Container>
     </SectionStyled>
   </>
diff --git a/client/src/pages/book.js b/client/src/pages/book.js
index 161d4403..1b22edb5 100644
--- a/client/src/pages/book.js
+++ b/client/src/pages/book.js
@@ -1,22 +1,21 @@
-import React, { useEffect } from 'react'
-import { NextSeo } from 'next-seo'
-import { Row, Col } from 'react-bootstrap'
 import { groq } from 'next-sanity'
+import { NextSeo } from 'next-seo'
+import React, { useEffect } from 'react'
 
+import { Box, Section, Typography } from '../components/Core'
+import { ExitPreviewLink } from '../components/ExitPreviewLink'
+import { Container, Flex } from '../components/Layout'
+import { PageWrapper } from '../components/PageWrapper'
+import { Hero } from '../features/Hero'
+import { HubspotForm } from '../features/HubspotForm'
+import { usePreviewSubscription } from '../lib/sanity'
+import { getClient } from '../lib/sanity.server'
 import {
   buildInternalUrl,
   filterDataToSingleItem,
   formatPhoneNumber,
   urlFor,
 } from '../utils/helpers'
-import { Section, Box, Typography } from '../components/Core'
-import { PageWrapper } from '../components/PageWrapper'
-import { ExitPreviewLink } from '../components/ExitPreviewLink'
-import { Hero } from '../features/Hero'
-import { usePreviewSubscription } from '../lib/sanity'
-import { getClient } from '../lib/sanity.server'
-import { HubspotForm } from '../features/HubspotForm'
-import { Container } from '../components/Layout'
 
 const Book = ({ data, preview = false }) => {
   const { data: previewData } = usePreviewSubscription(data?.bookPageQuery, {
@@ -76,14 +75,14 @@ const Book = ({ data, preview = false }) => {
         )}
         <Section>
           <Container>
-            <Row>
-              <Col lg={6}>
+            <Flex distance>
+              <div>
                 <HubspotForm
                   value="contact1"
                   title="Boka ett möte i kalendern"
                 />
-              </Col>
-              <Col lg={5} className="offset-lg-1 order-lg-2 mt-lg-0">
+              </div>
+              <div>
                 <Box className="tw-mb-6">
                   <Typography.H2>
                     {page?.call?.title && page.call.title}
@@ -135,8 +134,8 @@ const Book = ({ data, preview = false }) => {
                       />
                     </Box>
                   ))}
-              </Col>
-            </Row>
+              </div>
+            </Flex>
           </Container>
         </Section>
       </PageWrapper>
diff --git a/client/src/pages/open-source-skolan/[slug].js b/client/src/pages/open-source-skolan/[slug].js
index 8eb55b67..55f85dd6 100644
--- a/client/src/pages/open-source-skolan/[slug].js
+++ b/client/src/pages/open-source-skolan/[slug].js
@@ -12,7 +12,7 @@ import { getClient } from '../../lib/sanity.server'
 import { filterDataToSingleItem } from '../../utils/helpers'
 import { BlogList } from '../../features/Aktuellt'
 import { ExitPreviewLink } from '../../components/ExitPreviewLink'
-import { Container } from '../../components/Layout'
+import { Container, Flex } from '../../components/Layout'
 
 const VideoContainer = styled.div`
   position: relative;
@@ -127,13 +127,13 @@ const LessonDetails = ({ data, preview = false }) => {
             <Section className="pb-0">
               <div className="pt-5"></div>
               <Container>
-                <Row className="justify-content-center text-center">
-                  <Col lg="12">
+                <Flex className="justify-content-center text-center">
+                  <div>
                     <Typography.H2>
                       Se fler lektioner i Open Source skolan
                     </Typography.H2>
-                  </Col>
-                </Row>
+                  </div>
+                </Flex>
               </Container>
             </Section>
             <BlogList posts={data.lessons} />