feat: add contributors section

docs/src/components/Content.astro

@@ -5,6 +5,7 @@ import { getEntry } from 'astro:content';
 import Author from './Author.astro';
 import ChallengeFooter from './ChallengeFooter.astro';
 import CommentSection from './CommentSection.astro';
+import ContributorsFooter from './ContributorsFooter.astro';
 
 const { lang } = Astro.props;
 const { data } = await getEntry('i18n', lang);
@@ -26,6 +27,8 @@ const renderCommentSection = !Astro.props.entry.data.noCommentSection;
 { renderCommentSection &&
 <CommentSection {...Astro.props} /> }
 
+ <ContributorsFooter {...Astro.props} />
+
 <style>
   .author {
     margin-top: -1rem;

docs/src/components/ContributorsFooter.astro

@@ -0,0 +1,75 @@
+---
+import { getEntry } from 'astro:content';
+
+const contributors = Astro.props.entry.data.contributors ?? [];
+const { lang } = Astro.props;
+const { data } = await getEntry('i18n', lang);
+---
+
+
+{contributors.length === 0 ? null :
+<div class="wrapper card">
+  <h3>{data['contributor.title']}</h3>
+  <p>{data['contributor.subtitle']}</p>
+  <ul class="list">
+    {contributors.map((contributor: string) => (
+      <li key={`contributor-${contributor}`} class="contributor">
+        <a href={`https://github.com/${contributor}`} target="_blank" rel="noreferrer">
+          <img
+            loading="lazy"
+            src={`https://github.com/${contributor}.png?size=80`}
+            width="40"
+            height="40"
+            alt={contributor}
+            class="avatar"
+          />
+        </a>
+      </li>
+    ))}
+  </ul>
+</div>
+  }
+
+<style>
+  .wrapper {
+    margin: 50px 0;
+  }
+
+  .card {
+    border-radius: 10px;
+    min-width: 230px;
+    padding: 25px;
+    flex: 1;
+    border: 1px solid var(--sl-color-gray-5);
+  }
+
+  h3 {
+    color: var(--sl-color-white);
+    margin-bottom: 1rem;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: left;
+    gap: 8px;
+    align-items: center;
+    list-style: none;
+    margin: 10px 0;
+    padding: 0;
+  }
+
+  .contributor {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .avatar {
+    border-radius: 50%;
+    width: 40px;
+    height: auto;
+  }
+
+</style>