feat: add description component and social links

app/src/components/AssociationDescription.tsx

@@ -0,0 +1,24 @@
+import SocialsList from "./SocialsList";
+import { getTranslation } from "@/locales";
+import styles from "@/styles/AssociationDescription.module.scss";
+import { Association, SocialLink } from "@/types/aliases";
+import Markdown from "react-markdown";
+
+export default function AssociationDescription({
+  association,
+  social_links,
+}: {
+  association: Association;
+  social_links: SocialLink[];
+}) {
+  var translation = getTranslation(association);
+
+  return (
+    <div className={styles.description}>
+      <h1 className="title">À propos</h1>
+      <h2>Qu'est-ce que la CLIC ?</h2>
+      <Markdown className="text">{translation.description}</Markdown>
+      <SocialsList socials={social_links}></SocialsList>
+    </div>
+  );
+}

app/src/components/SocialsList.tsx

@@ -0,0 +1,29 @@
+import DirectusImage from "./DirectusImage";
+import styles from "@/styles/SocialsList.module.scss";
+import { SocialLink } from "@/types/aliases";
+import Link from "next/link";
+
+export default function SocialsList({ socials }: { socials: SocialLink[] }) {
+  if (socials.length == 0) {
+    return;
+  }
+
+  var list: any = [];
+  socials.forEach((s) => {
+    list.push(
+      <Link href={s.link || ""}>
+        <DirectusImage
+          img={s.logo}
+          name={s.media_name}
+          className={styles.social}
+        />
+      </Link>
+    );
+  });
+
+  return (
+    <div className={styles.socialsList}>
+      <div className={styles.list}>{list}</div>
+    </div>
+  );
+}

app/src/pages/index.tsx

@@ -1,4 +1,5 @@
 import PreviewImage from "@/assets/galleryPreview.png";
+import AssociationDescription from "@/components/AssociationDescription";
 import Card from "@/components/Card";
 import DirectusImage from "@/components/DirectusImage";
 import Footer from "@/components/Footer";
@@ -17,11 +18,11 @@ import {
   Member,
   News,
   Partner,
+  SocialLink,
 } from "@/types/aliases";
 import { readItems, readSingleton } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
-import Markdown from "react-markdown";
 
 export default function Home(
   props: InferGetServerSidePropsType<typeof getServerSideProps>
@@ -37,7 +38,7 @@ export default function Home(
       </div>
 
       <div className="news">
-        <h1 className="title">News</h1>
+        <h1 className="title ligth">News</h1>
         <div className="news-list">
           {props.news.map((n) => (
             <NewsCard key={(n as any).id} news={n} />
@@ -47,7 +48,11 @@ export default function Home(
 
       <PartnersList partners={props.partners} />
 
-      <Markdown className="text">{translation.description}</Markdown>
+      <AssociationDescription
+        association={props.association}
+        social_links={props.social_links}
+      />
+
       <div className="cardList">
         <h1 className="title">
           {translate("committee", locale(router), { capitalize: true })}
@@ -72,6 +77,7 @@ export default function Home(
 export const getServerSideProps: GetServerSideProps<{
   association: Association;
   partners: Partner[];
+  social_links: SocialLink[];
   news: News[];
   committee: (AssociationMembership & { member: Member })[];
 }> = populateLayoutProps(async (context) => {
@@ -87,6 +93,15 @@ export const getServerSideProps: GetServerSideProps<{
           })
         )
         .then((result) => result.map((p) => p.partners_id))) as Partner[],
+      social_links: (await directus()
+        .request(
+          readItems("association_social_links", {
+            fields: [{ social_links_id: ["*"] }],
+          })
+        )
+        .then((result) =>
+          result.map((s) => s.social_links_id)
+        )) as SocialLink[],
       news: await directus().request(
         readItems("news", {
           limit: 3,

app/src/styles/AssociationDescription.module.scss

@@ -0,0 +1,24 @@
+@import "glass";
+
+.description {
+  @extend .glass;
+
+  background-color: var(--background-color);
+
+  width: 100%;
+
+  align-items: center;
+
+  display: flex;
+  flex-direction: column;
+
+  padding-bottom: 2rem;
+
+  .text {
+    padding: 1em;
+  }
+
+  h2 {
+    text-align: center;
+  }
+}

app/src/styles/PartnersList.module.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 1rem;
 
   .list {
     margin: auto;

app/src/styles/SocialsList.module.scss

@@ -0,0 +1,17 @@
+.socialsList {
+  width: 100%;
+  margin: 1em;
+
+  .social {
+    width: 50px;
+    height: 50px;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+    width: fit-content;
+    gap: 0.5rem;
+  }
+}

app/src/styles/globals.scss

@@ -6,7 +6,9 @@ body {
 
   --background-color: #fafafa;
   --text-color: #fafafa;
-  --dark-text-color: darkblue;
+  --dark-text-color: #273183;
+  --title-color: #fafafa;
+  --dark-title-color: #273183;
   --glass-color: rgba(100, 100, 255, 0.75);
   --text-link-color: rgb(58, 127, 255);
 
@@ -100,9 +102,6 @@ a {
   max-width: 60ch;
   padding: 0 2rem;
 
-  border-radius: 3rem;
-  background-color: var(--background-color);
-
   h1 {
     text-align: center;
     padding: 0 2rem;
@@ -190,23 +189,19 @@ a {
 }
 
 .title {
+  color: var(--dark-title-color);
+
+  letter-spacing: 0.1em;
+
+  margin: 1rem 0 1rem 0;
   text-align: center;
-  color: var(--dark-text-color);
-
-  &::after {
-    position: relative;
-    min-width: 4rem;
-    min-height: 0.2rem;
-    top: -0.45rem;
-    left: 0.5rem;
-
-    background-color: var(--dark-text-color);
-    content: "";
-    display: inline-block;
-  }
-  &::before {
-    @extend ::after;
-    left: -0.5rem;
+
+  font-weight: lighter;
+  text-transform: uppercase;
+  font-size: 50pt;
+
+  &.ligth {
+    color: var(--title-color);
   }
 
   &.large {
@@ -245,16 +240,20 @@ a {
 }
 
 .cardList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1em;
+
   > div {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     align-items: center;
-    gap: 2rem;
+    justify-items: center;
+    padding: 2rem;
   }
 
   border-radius: 3rem;
-  padding: 2rem;
 
   background-color: var(--background-color);
 

app/src/types/aliases.ts

@@ -5,6 +5,7 @@ import { Schema } from "./schema";
 export type Association = Schema["association"];
 export type AssociationMembership = Schema["association_memberships"][0];
 export type AssociationPartner = Schema["association_partners"][0];
+export type AssociationTranslation = Schema["association_translations"][0];
 export type Commission = Schema["commissions"][0];
 export type CommissionMembership = Schema["commission_memberships"][0];
 export type Member = Schema["members"][0];