From f5e044832488f434bc7e3d586ff828a073faf1a9 Mon Sep 17 00:00:00 2001
From: Yolijn <yolijn@frameless.io>
Date: Fri, 23 Aug 2024 16:46:09 +0200
Subject: [PATCH] docs: add all organisations to homepage

---
 src/components/CardGroup.module.css |  4 +++
 src/pages/index.tsx                 | 48 ++++++++++++++++++++++++-----
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/CardGroup.module.css b/src/components/CardGroup.module.css
index c7a85150ddb..65c0ee6c49c 100644
--- a/src/components/CardGroup.module.css
+++ b/src/components/CardGroup.module.css
@@ -47,6 +47,8 @@
   --cardgroup-card-box-shadow: none;
   --cardgroup-card-min-height: 90px;
   --cardgroup-card-justify-content: center;
+  --card-illustration-margin-inline-end: 16px;
+  --card-illustration-margin-inline-start: 16px;
 }
 
 .cardgroup__card--medium {
@@ -71,6 +73,8 @@
   background-color: var(--card-illustration-background-color);
   display: flex;
   justify-content: center;
+  margin-inline-end: var(--card-illustration-margin-inline-end);
+  margin-inline-start: var(--card-illustration-margin-inline-start);
 }
 
 .card__illustration--background {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8d5b5a079cf..1b28c3dc5bf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -49,7 +49,6 @@ export default function Home() {
         </HomepageHero>
         <div className="container" style={{ paddingBlockEnd: '40px' }}>
           <Heading2>Meedoen als...</Heading2>
-
           <CardGroup appearance="medium">
             <Card component="section" appearance="small">
               {/* <CardIllustration background>
@@ -124,7 +123,6 @@ export default function Home() {
               </CardContent>
             </Card>
           </CardGroup>
-
           <Heading2>Wie doen er al mee?</Heading2>
           <CardGroup appearance="small">
             <Card appearance="small" href="https://github.com/nl-design-system/utrecht">
@@ -143,25 +141,61 @@ export default function Home() {
                 />
               </CardIllustration>
             </Card>
+            <Card appearance="small" href="https://github.com/nl-design-system/amsterdam">
+              <CardIllustration>
+                <Image
+                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__amsterdam.svg"
+                  alt="Amsterdam logo"
+                />
+              </CardIllustration>
+            </Card>
+            <Card appearance="small" href="https://github.com/nl-design-system/rotterdam">
+              <CardIllustration>
+                <Image
+                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__rotterdam.svg"
+                  alt="Rotterdam logo"
+                />
+              </CardIllustration>
+            </Card>
+            <Card appearance="small" href="https://github.com/nl-design-system/tilburg">
+              <CardIllustration>
+                <Image
+                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__tilburg.png"
+                  alt="Tilburg logo"
+                />
+              </CardIllustration>
+            </Card>
             <Card appearance="small" href="https://github.com/nl-design-system/rvo">
               <CardIllustration>
                 <Image
                   src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__rvo.svg"
-                  alt="RVO logo"
+                  alt="Rijksdienst voor Ondernemend Nederland logo"
                 />
               </CardIllustration>
             </Card>
-            <Card appearance="small" href="https://github.com/nl-design-system/amsterdam">
+            <Card appearance="small" href="https://github.com/nl-design-system/lux">
               <CardIllustration>
                 <Image
-                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__amsterdam.svg"
-                  alt="Amsterdam logo"
+                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__logius.png"
+                  alt="Logius logo"
+                />
+              </CardIllustration>
+            </Card>
+            <Card appearance="small" href="https://github.com/nl-design-system/rijkshuisstijl-community">
+              <CardIllustration>
+                <Image
+                  src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/meedoen__rijkshuisstijl-community.png"
+                  alt="Rijkshuisstijl Community"
                 />
               </CardIllustration>
             </Card>
           </CardGroup>
           <Paragraph className="homepage__paragraph">
-            En ruim 30 <Link href="https://github.com/nl-design-system/themes">organisaties met een eigen thema</Link>
+            Naast de organisaties die componenten bijdragen doen{' '}
+            <DocusaurusLink to="/community/wie-doet-mee" className="utrecht-link">
+              diverse andere organisaties
+            </DocusaurusLink>{' '}
+            mee in de community van NL Design System.
           </Paragraph>
         </div>
         <div className="container" style={{ paddingBlockStart: '40px', paddingBlockEnd: '40px' }}>