wip

apps/web/src/app/(certificate)/diploma/[id]/_components/advise.tsx

@@ -38,12 +38,13 @@ export default async function CertificateAdvise({ id }: { id: string }) {
         modules die je tot nu toe hebt voltooid. {advise}
       </Text>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8 p-2.5 sm:p-6 sm:-mx-6 border border-zinc-900/10 rounded-lg">
         <div>
           <Subheading>Kernmodules</Subheading>
           <ul className="space-y-2 mt-2.5">
             {certificate.curriculum.modules
               .filter((module) => module.isRequired)
+              .sort((a, b) => a.weight - b.weight)
               .map((module, index, filteredArray) => {
                 const isModuleCompleted = uniqueCompletedModules.includes(
                   module.id,
@@ -76,6 +77,7 @@ export default async function CertificateAdvise({ id }: { id: string }) {
           <ul className="space-y-2 mt-2.5">
             {certificate.curriculum.modules
               .filter((module) => !module.isRequired)
+              .sort((a, b) => a.weight - b.weight)
               .map((module, index, filteredArray) => {
                 const isModuleCompleted = uniqueCompletedModules.includes(
                   module.id,

apps/web/src/app/(public)/help/artikel/_content/app-consumenten/_meta.yaml

@@ -0,0 +1,5 @@
+---
+title: Jouw online omgeving
+description: Hoe gebruik je jouw online NWD omgeving?
+---
+

apps/web/src/app/(public)/help/artikel/_content/app-consumenten/je-diploma-online-inzien.mdx

@@ -0,0 +1,72 @@
+---
+title: "Hoe kan je je NWD diploma online inzien?"
+publishedAt: "2024-09-16"
+lastUpdatedAt: "2024-09-16"
+summary:
+  "Leer hoe je eenvoudig je NWD diploma online kunt bekijken, zowel via de
+  QR-code op je diploma als via je online account."
+---
+
+Het Nationaal Watersportdiploma (NWD) biedt twee handige manieren om je
+diploma's online in te zien: via de QR-code op je fysieke diploma of via je
+online account. Beide methoden geven je toegang tot gedetailleerde informatie
+over je behaalde vaardigheden en voortgang.
+
+## Via de QR-code op je diploma
+
+1. Zoek de QR-code op je fysieke NWD diploma.
+2. Scan deze code met de camera van je smartphone of een QR-code scanner app.
+3. Je wordt direct naar de online detailpagina van je diploma geleid, zonder dat
+   je hoeft in te loggen.
+
+## Via je online account
+
+1. Ga naar [www.nationaalwatersportdiploma.nl/login](/login).
+2. Log in met je accountgegevens.
+3. Selecteer de persoon voor wie je het diploma wilt bekijken (als je meerdere
+   personen beheert).
+4. Je ziet nu een overzicht van alle behaalde NWD diploma's.
+5. Klik op het diplomanummer om de detailpagina te openen.
+
+## De detailpagina van je diploma
+
+Op de detailpagina van je diploma vind je:
+
+- Opties om je diploma te delen met anderen
+- Gedetailleerde informatie over de modules en eisen die je hebt afgerond
+- Een overzicht van je voortgang binnen de gehele cursus
+
+Deze informatie helpt je niet alleen om je prestaties te vieren, maar ook om
+inzicht te krijgen in je ontwikkeling als watersporter en mogelijke volgende
+stappen in je leertraject.
+
+## Veelgestelde vragen
+
+<dl className="divide-y divide-gray-900/10 rounded-lg border border-gray-900/10">
+
+<Faq question="Is mijn diplomainformatie veilig online?">
+  Ja, het NWD neemt de privacy en veiligheid van je gegevens zeer serieus.
+  Alleen jij hebt toegang tot je volledige diploma-informatie via je beveiligde
+  account. Als je de knop _"Deel je diploma!"_ gebruikt, verbergen we je
+  persoonlijke gegevens.
+</Faq>
+
+<Faq question="Kan ik mijn oude diploma's ook online inzien?">
+  Alle NWD diploma's die je hebt behaald, zijn beschikbaar in je online account.
+</Faq>
+
+<Faq question="Hoe kan ik mijn diploma downloaden?">
+  Op dit moment is het niet mogelijk om je diploma als PDF te downloaden. Je
+  kunt je diploma echter altijd online bekijken via je account. Mocht je graag
+  een printout willen maken, stuur ons dan een e-mail op
+  [[email protected]](mailto:[email protected]),
+  onder vermelding van het diplomanummer, en datum van uitgifte.
+</Faq>
+
+<Faq question="Ik mis een diploma in mijn account">
+  In dat geval kan je het beste contact opnemen met de vaarlocatie waar je je
+  diploma hebt behaald. Zij kunnen je helpen om het diploma aan je account toe
+  te voegen.
+</Faq>
+
+</dl>