✨ Add LÆREGLEDE section

src/components/sections/learning/Learning.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+
+import { SanityImage } from "src/components/image/SanityImage";
+import SmileyBox from "src/components/smileyBox/SmileyBox";
+import Text from "src/components/text/Text";
+import { LearningSection } from "studio/lib/interfaces/pages";
+
+import styles from "./learning.module.css";
+
+export interface LearningProps {
+  section: LearningSection;
+}
+
+export default function Learning({ section }: LearningProps) {
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h2"} className={styles.title}>
+        {section.basicTitle}
+      </Text>
+      <div className={styles.content}>
+        <SmileyBox description={section.description} />
+        <div className={styles.image}>
+          <SanityImage image={section.image} />
+        </div>
+        <div className={styles.textContainer}>
+          <div className={styles.textContent}>
+            <Text type="labelLarge" className={styles.articleTag}>
+              Artikkel · 5 min{" "}
+            </Text>
+            <Link href="https://blog.variant.no/tidenes-beste-konferansesesong-for-variant-700baa5e82a3">
+              <Text type="h3" className={styles.articleTitle}>
+                Tidenes beste konferansesesong for Variant
+              </Text>
+            </Link>
+            <Text type="bodyBig" className={styles.articleSubtitle}>
+              I Variant har vi en veldig uttalt strategi rundt
+              kompetansebygging. Vi kaller den læreglede.
+            </Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/sections/learning/learning.module.css

@@ -0,0 +1,96 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: var(--max-content-width-large);
+  margin: 5rem auto;
+  gap: 2rem;
+}
+
+.title {
+  width: 40rem;
+
+  @media (max-width: 834px) {
+    width: 25.875rem;
+  }
+
+  @media (max-width: 425px) {
+    width: 19.4375rem;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0.25rem;
+  gap: 1rem;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+  }
+}
+
+.image {
+  height: 30rem;
+
+  & img {
+    border-radius: 6rem 0.375rem 0.375rem 0.375rem;
+  }
+
+  @media (max-width: 834px) {
+    height: 26.25rem;
+    align-self: stretch;
+  }
+
+  @media (max-width: 425px) {
+    align-self: stretch;
+    height: 22.375;
+  }
+}
+
+.textContainer {
+  display: flex;
+  height: 30rem;
+  min-width: 26.625rem;
+  max-width: 33.5625rem;
+  padding: 1.5rem 0.375rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  background-color: var(--surface-blue);
+  color: var(--text-primary-light);
+}
+
+.textContent {
+  display: flex;
+  max-width: 33.5625rem;
+  padding: 0rem 1.125rem;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  align-self: stretch;
+}
+
+.textContainer {
+  color: var(--text-primary-light);
+}
+
+.articleTag {
+  color: var(--text-primary-light);
+}
+
+.articleTitle {
+  color: var(--text-primary-light);
+}
+
+.articleSubtitle {
+  color: var(--text-primary-light);
+}

src/utils/renderSection.tsx

@@ -21,6 +21,7 @@ import ImageSplitComponentPreview from "src/components/sections/image-split/Imag
 import ImageSectionComponent from "src/components/sections/imageSection/ImageSectionComponent";
 import ImageSectionComponentPreview from "src/components/sections/imageSection/ImageSectionComponentPreview";
 import Jobs from "src/components/sections/jobs/Jobs";
+import Learning from "src/components/sections/learning/Learning";
 import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad";
 import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview";
 import Openness from "src/components/sections/openness/Openness";
@@ -295,6 +296,8 @@ const SectionRenderer = ({
       return <Openness section={section} />;
     case "generositySection":
       return <Generosity section={section} language={language} />;
+    case "learningSection":
+      return <Learning section={section} />;
     default:
       return null;
   }

studio/lib/interfaces/pages.ts

@@ -178,6 +178,14 @@ export interface OpennessSection {
   description: string;
 }
 
+export interface LearningSection {
+  _type: "learningSection";
+  _key: string;
+  basicTitle: string;
+  image: IImage;
+  description: string;
+}
+
 export type Section =
   | HeroSection
   | LogoSaladSection
@@ -196,7 +204,8 @@ export type Section =
   | CompensationCalculatorSection
   | JobsSection
   | OpennessSection
-  | GenerositySection;
+  | GenerositySection
+  | LearningSection;
 
 export interface PageBuilder {
   _createdAt: string;

studio/lib/queries/pages.ts

@@ -118,6 +118,10 @@ const SECTIONS_FRAGMENT = groq`
           ${TRANSLATED_LINK_FRAGMENT}
         }
       }
+    },
+    _type == "learningSection" => {
+      "basicTitle": ${translatedFieldFragment("basicTitle")},
+      "description": ${translatedFieldFragment("description")},
     }
   }
 `;

studio/schemas/documents/pageBuilder.ts

@@ -13,6 +13,7 @@ import hero from "studio/schemas/objects/sections/hero";
 import imageSection from "studio/schemas/objects/sections/image";
 import imageSplitSection from "studio/schemas/objects/sections/imagesplit";
 import { jobs } from "studio/schemas/objects/sections/jobs";
+import { learningSection } from "studio/schemas/objects/sections/learning";
 import logoSalad from "studio/schemas/objects/sections/logoSalad";
 import { opennessSection } from "studio/schemas/objects/sections/openness";
 import seo from "studio/schemas/objects/seo";
@@ -61,6 +62,7 @@ const pageBuilder = defineType({
         compensationCalculator,
         opennessSection,
         generositySection,
+        learningSection,
       ],
     }),
   ],

studio/schemas/objects/sections/learning.ts

@@ -0,0 +1,45 @@
+import { defineField } from "sanity";
+
+import { titleID } from "studio/schemas/fields/text";
+export const learningID = "learningSection";
+
+export const learningSection = defineField({
+  name: learningID,
+  title: "Learning",
+  type: "object",
+  fields: [
+    {
+      name: titleID.basic,
+      title: "Title",
+      description:
+        "Enter the primary title that will be displayed at the top of the section.",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "image",
+      type: "image",
+      title: "Image",
+      description: "An image of the learning",
+      options: {
+        hotspot: true,
+      },
+      validation: (rule) => rule.required(),
+    },
+    {
+      name: "description",
+      title: "Description",
+      description:
+        "Enter the description that will be displayed in the smiley block.",
+      type: "internationalizedArrayString",
+      validation: (rule) => rule.required(),
+    },
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: "Learning Section",
+      };
+    },
+  },
+});