feat: Add support for columns in SectionGroup

adfinis · Jan 3, 2025 · eb32203 · eb32203
1 parent 609e531
commit eb32203
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/nextjs/src/app/[locale]/theme/page.tsx b/nextjs/src/app/[locale]/theme/page.tsx
@@ -19,6 +19,7 @@ import {
   partnerSection,
   quoteSection,
   whitepaperSection,
+  twoColumnMarkdownSection,
 } from "./texts"
 import Container from "@/components/container"
 import CardSlider from "@/components/cards/card-slider"
@@ -265,6 +266,7 @@ export default function Theme({
       >
         <StandardForm locale={locale} />
       </Container>
+
       <Container id="whitepaper" background="sapphire" padding="both-padding">
         <SectionWhitepaper
           title={whitepaperSection.title}
@@ -273,6 +275,17 @@ export default function Theme({
           text={whitepaperSection.description}
         />
       </Container>
+
+      <Container
+        id="two-column-markdown"
+        background="stone"
+        padding="both-padding"
+      >
+        <SectionGroup columns={2}>
+          <Text markdown={twoColumnMarkdownSection.column1} />
+          <Text markdown={twoColumnMarkdownSection.column2} />
+        </SectionGroup>
+      </Container>
     </main>
   )
 }
diff --git a/nextjs/src/app/[locale]/theme/texts.ts b/nextjs/src/app/[locale]/theme/texts.ts
@@ -517,6 +517,25 @@ export const whitepaperSection = {
   },
 } as const
 
+export const twoColumnMarkdownSection = {
+  column1: `
+  ### **How it works**
+  - A discovery call will be scheduled to discuss some aspects of your GitLab setup
+  - We will send you a questionnaire to gather information about your GitLab setup
+  - We will analyse the gathered information and document our recommendations in a report
+  - A delivery and Q&A call is scheduled where we go over our findings and recommendations
+  - After the call, you will receive a report with all the recommendations and takeaways
+  `,
+  column2: `
+  ### **What it covers**
+  - GitLab Architecture and Design for Self-Managed Instances
+  - Security configuration in GitLab
+  - GitLab Monitoring and Maintenance
+  - Disaster Recovery and High Availability
+  - Gitlab Runners setup for Gitlab CI/CD
+  `,
+}
+
 export const footer = {
   columns: [
     {

diff --git a/nextjs/src/app/text.css b/nextjs/src/app/text.css
@@ -20,7 +20,7 @@
         h1,
         h2,
         h3 {
-            @apply font-light tracking-tight text-title-primary;
+            @apply font-light tracking-tight text-title-primary mb-4 lg:mb-8;
 
             b,
             strong {
@@ -69,11 +69,11 @@
 
             ul,
             ol {
-                @apply mt-2;
+                @apply mt-2 lg:mt-4;
             }
 
             &:not(:last-child) {
-                @apply mb-2;
+                @apply mb-2 lg:mb-4;
             }
         }
 

diff --git a/nextjs/src/components/sections/section-group.tsx b/nextjs/src/components/sections/section-group.tsx
@@ -14,6 +14,10 @@ const sectionGroupStyles = cva(["grid gap-12 lg:gap-16"], {
     hasDividers: {
       true: "section-group-dividers",
     },
+    columns: {
+      2: "max-w-4xl grid-cols-1 md:grid-cols-2 mx-auto",
+      3: "max-w-4xl grid-cols-1 md:grid-cols-3 mx-auto",
+    },
   },
   defaultVariants: {
     align: "start",
@@ -30,6 +34,7 @@ type SectionGroupProps = VariantProps<typeof sectionGroupStyles> & {
   title?: string
   text?: string
   children: React.ReactNode
+  columns?: 2 | 3
 }
 
 const SectionGroup: React.FC<SectionGroupProps> = ({
@@ -38,6 +43,7 @@ const SectionGroup: React.FC<SectionGroupProps> = ({
   children,
   align,
   hasDividers,
+  columns,
 }) => {
   return (
     <div className={sectionGroupStyles({ align })}>
@@ -54,7 +60,9 @@ const SectionGroup: React.FC<SectionGroupProps> = ({
           <Text markdown={text} className="text-justify lg:text-center" />
         </div>
       )}
-      <div className={sectionGroupStyles({ hasDividers })}>{children}</div>
+      <div className={sectionGroupStyles({ hasDividers, columns })}>
+        {children}
+      </div>
     </div>
   )
 }