feat: adds products to strategy page (#426)

* feat: adds products to strategy page

* fix: å / ø

* fix: Magnus Olderø Sæther

* fix: i -> j

* drop the dash

src/tjenesteomrader/areas/index.tsx

@@ -2,13 +2,14 @@ import style from 'src/tjenesteomrader/shared/bottomText.module.css';
 import Divider from '../images/divider/divider';
 import Footer from '../images/footer/footer';
 import DigitalTjeneste from './DigitalTjeneste';
-import Strategi from './strategi';
+import Strategi, { StrategyExtras } from './strategi';
 import Datadriv from './datadriv';
 import Kultur from './kultur';
 import {
   tjenesteomradePath,
   TjenesteomradeProps,
 } from '../utils/tjenesteomradeTypes';
+import { and } from 'src/utils/css';
 
 const Areas = (prop: TjenesteomradeProps) => {
   return (
@@ -22,6 +23,17 @@ const Areas = (prop: TjenesteomradeProps) => {
           className={style.bottomText__content}
           dangerouslySetInnerHTML={{ __html: prop.fileContents }}
         />
+
+        {prop.name == 'strategi' && (
+          <div
+            className={and(
+              style.bottomText__content,
+              style['bottomText__content--large'],
+            )}
+          >
+            <StrategyExtras />
+          </div>
+        )}
       </div>
       <Footer color={`#${prop.color}`} />
     </div>

src/tjenesteomrader/areas/strategi/index.tsx

@@ -1,21 +1,22 @@
+import { allColors, colorPairs } from '@variant/profile/lib/colors';
+import Head from 'next/head';
+import style from 'src/tjenesteomrader/shared/index.module.css';
 import BlobText from '../../components/blobText/blobText';
 import EmojiList from '../../components/emojiList/emojiList';
 import TwoRows from '../../components/twoRows/twoRows';
 import HeaderBackground from '../../images/headerBackground/headerBackground';
-import style from 'src/tjenesteomrader/shared/index.module.css';
-import { allColors, colorPairs } from '@variant/profile/lib/colors';
-import Head from 'next/head';
 
 // Arrows
+import { useState } from 'react';
 import down1 from 'src/tjenesteomrader/images/arrows/down1.svg';
 import down2 from 'src/tjenesteomrader/images/arrows/down2.svg';
 import down3 from 'src/tjenesteomrader/images/arrows/down3.svg';
 import down4 from 'src/tjenesteomrader/images/arrows/down4.svg';
-import right1 from 'src/tjenesteomrader/images/arrows/right1.svg';
-import right2 from 'src/tjenesteomrader/images/arrows/right2.svg';
 import left1 from 'src/tjenesteomrader/images/arrows/left1.svg';
 import left2 from 'src/tjenesteomrader/images/arrows/left2.svg';
-import { useState } from 'react';
+import right1 from 'src/tjenesteomrader/images/arrows/right1.svg';
+import right2 from 'src/tjenesteomrader/images/arrows/right2.svg';
+import download from './download.svg';
 
 const Strategi = () => {
   const blobColor = allColors.secondary1__shade2;
@@ -133,4 +134,103 @@ const Strategi = () => {
   );
 };
 
+import { ButtonLink } from '@components/button';
+import { PropsWithChildren } from 'react';
+import ThreeColumn from 'src/tjenesteomrader/components/three-column';
+
+export type StrategyExtrasProps = PropsWithChildren<{}>;
+export function StrategyExtras({}: StrategyExtrasProps) {
+  return (
+    <ThreeColumn>
+      <div>
+        <h3 className="fancy">Strateginettverk</h3>
+
+        <p>
+          Variant arrangerer meetups med faglig program og mingling med andre
+          strateger. Meld deg på nettverket ved å sende mail til
+          strategiansvarlig{' '}
+          <a href="mailto:[email protected]">
+            Magnus Olderø Sæther ([email protected])
+          </a>
+        </p>
+
+        <p>
+          <strong>
+            Neste meetup: 12. januar kl. 18. Hvor: Varianthuset i Trondheim
+          </strong>
+        </p>
+
+        <div className={style.buttonRow}>
+          <ButtonLink href="mailto:[email protected]">Meld deg på</ButtonLink>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="fancy">Strategisprint</h3>
+
+        <p>
+          Mange virksomheter sliter med jobbe helhetlig og strategisk med
+          verdiskaping og kulturbygging. Variant har dette som ekspertisefelt,
+          og tilbyr Strategi-sprint som en lavterskel starthjelp. Ta kontakt med
+          oss om dette høres interessant ut for deg og din virksomhet.
+        </p>
+        <div className={style.buttonRow}>
+          <ButtonLink href="mailto:[email protected]">Send forespørsel</ButtonLink>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="fancy">Designressurser</h3>
+
+        <p>
+          I strategisk arbeid er det få verktøy som kobler strategiske
+          målsettinger med kulturbygging, aktiviteter og tiltak. Variant har
+          utviklet modellen{' '}
+          <strong>© Strategic Mountain Map / Fjellmodellen</strong> for å løse
+          dette behovet. Denne modellen er orientert rundt at arbeidet skal være
+          samarbeidende og at resultatet (strategiproduktet) skal være visuelt
+          og enkelt. Modellen er et levende rammeverk og egner seg godt i
+          kontinuerlig strategiarbeid.
+        </p>
+
+        <p>
+          Ta kontakt for å få råd og opplæring i hvordan denne modellen kan
+          brukes effektivt. Last den ned her for å ta en titt:
+        </p>
+
+        <div className={style.buttonRow}>
+          <ButtonLink
+            href="/Variant_Fjellmodellen.pdf"
+            download
+            colorPair={colorPairs.secondary2}
+            title="Last ned PDF-versjon av fjellkart"
+          >
+            PDF
+            <img
+              className={style.downloadIcon}
+              src={download}
+              alt=""
+              role="none"
+            />
+          </ButtonLink>
+          <ButtonLink
+            href="/Variant_Fjellmodellen.png"
+            download
+            colorPair={colorPairs.secondary2}
+            title="Last ned PNG-versjon av fjellkart"
+          >
+            PNG
+            <img
+              className={style.downloadIcon}
+              src={download}
+              alt=""
+              role="none"
+            />
+          </ButtonLink>
+        </div>
+      </div>
+    </ThreeColumn>
+  );
+}
+
 export default Strategi;

src/tjenesteomrader/components/three-column/index.tsx

@@ -0,0 +1,8 @@
+import style from './three-column.module.css';
+
+import { PropsWithChildren } from 'react';
+
+export type ThreeColumnProps = PropsWithChildren<{}>;
+export default function ThreeColumn({ children }: ThreeColumnProps) {
+  return <div className={style.container}>{children}</div>;
+}

src/tjenesteomrader/components/three-column/three-column.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

src/tjenesteomrader/shared/bottomText.module.css

@@ -10,6 +10,11 @@
   gap: 3rem;
 }
 
+.bottomText__content--large {
+  padding-inline: 6rem;
+  margin: 7rem 0;
+}
+
 .bottomText__content :global(.bigText) p {
   font-size: 1.875rem;
 }

src/tjenesteomrader/shared/index.module.css

@@ -40,6 +40,18 @@
   bottom: 2rem;
 }
 
+.buttonRow {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.downloadIcon {
+  display: inline-block;
+  height: 1rem;
+  margin-left: 0.5rem;
+}
+
 .threeRows {
   display: flex;
   gap: 1rem;

src/tjenesteomrader/tjenesteomrader.module.css

@@ -33,3 +33,15 @@
     font-size: 3rem;
   }
 }
+
+:global(.three-column-strategy) {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  :global(.three-column-strategy) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}