feat: Create whitepaper section

nextjs/src/app/[locale]/theme/page.tsx

@@ -18,6 +18,7 @@ import {
   slaSection,
   partnerSection,
   quoteSection,
+  whitepaperSection,
 } from "./texts"
 import Container from "@/components/container"
 import CardSlider from "@/components/cards/card-slider"
@@ -37,6 +38,7 @@ import SectionQuote from "@/components/sections/section-quote"
 import StandardForm from "@/components/form/standard-form"
 import GetStartedForm from "@/components/form/get-started-form"
 import { type Locale } from "@/hooks/useLocale"
+import SectionWhitepaper from "@/components/sections/section-whitepaper"
 
 export default function Theme({
   params: { locale },
@@ -263,6 +265,14 @@ export default function Theme({
       >
         <StandardForm locale={locale} />
       </Container>
+      <Container id="whitepaper" background="sapphire" padding="both-padding">
+        <SectionWhitepaper
+          title={whitepaperSection.title}
+          cta={whitepaperSection.cta}
+          image={whitepaperSection.image}
+          text={whitepaperSection.description}
+        />
+      </Container>
     </main>
   )
 }

nextjs/src/app/[locale]/theme/texts.ts

@@ -501,6 +501,22 @@ export const quoteSection = {
   },
 } as const
 
+export const whitepaperSection = {
+  title: "Unlock the full potential of GitLab",
+  description:
+    "Say goodbye to toolchain complexity with GitLab's comprehensive DevSecOps Suite. Our white paper highlights GitLab's integrated capabilities for seamless project management, code testing, and release.",
+  cta: {
+    text: "Download Whitepaper",
+    href: "/",
+    variant: "cta",
+    size: "large",
+  },
+  image: {
+    src: "https://images.unsplash.com/photo-1618822579297-53087e4cd1de?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    alt: "Whitepaper image of Gitlab in action",
+  },
+} as const
+
 export const footer = {
   columns: [
     {

nextjs/src/components/sections/section-whitepaper.tsx

@@ -0,0 +1,50 @@
+import { CTA } from "@/lib/cta"
+import React from "react"
+import Image from "next/image"
+import LinkButton from "@/components/link-button"
+import Title from "../title"
+import Text from "../text"
+
+type SectionWhitepaperProps = {
+  title: string
+  /**
+   * @info can be passed markdown or plain text.
+   */
+  text: string
+  cta: CTA
+  image: {
+    src: string
+    alt: string
+  }
+}
+
+const SectionWhitepaper: React.FC<SectionWhitepaperProps> = ({
+  title,
+  text,
+  cta,
+  image: { src, alt },
+}) => {
+  return (
+    <div className="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-y-8 lg:gap-x-12 items-center">
+      <Image
+        className="rounded-xl max-h-64 lg:max-h-full w-auto mx-auto lg:order-1"
+        src={src}
+        alt={alt}
+        width={800}
+        height={400}
+      />
+
+      <div className="col-span-2 grid gap-4 lg:gap-8 justify-items-start">
+        <Title level={3} boldness={"semibold"}>
+          {title}
+        </Title>
+        <Text markdown={text} />
+        <LinkButton href={cta.href} variant={cta.variant} size={cta.size}>
+          {cta.text}
+        </LinkButton>
+      </div>
+    </div>
+  )
+}
+
+export default SectionWhitepaper

nextjs/src/components/title.tsx

@@ -27,6 +27,9 @@ const titleStyles = cva(["tracking-tight text-title-primary"], {
   },
 })
 
+/**
+ * @info either children or markdown can be passed, not both
+ */
 type ChildrenORString =
   | {
       children: React.ReactNode