Merge pull request #108 from akvo/feature/107-resources-page

Feature/107 resources page
akvo · Nov 5, 2024 · 22a145e · 22a145e
2 parents eafa7dd + a8ae1d0
commit 22a145e
Show file tree

Hide file tree

Showing 9 changed files with 600 additions and 136 deletions.
diff --git a/frontend/src/app/[locale]/dashboard/(with-header)/faqs/page.js b/frontend/src/app/[locale]/dashboard/(with-header)/faqs/page.js
@@ -7,7 +7,7 @@ const FAQPage = ({ searchParams }) => {
   const question = searchParams.question;
   return (
     <Card>
-      <div className={classNames(openSans.className, "p-12")}>
+      <div className={classNames(openSans.className, "p-6 xl:p-12")}>
         <FAQCollapsible
           defaultActiveKey={[question]}
           wrapClass="w-full flex flex-col items-start justify-start"

diff --git a/frontend/src/app/[locale]/dashboard/(with-header)/pat-resources/page.js b/frontend/src/app/[locale]/dashboard/(with-header)/pat-resources/page.js
@@ -1,11 +1,71 @@
+"use client";
+
 import { useTranslations } from "next-intl";
-import { Card } from "antd";
+import { Card, List } from "antd";
 
 const ResourcesPage = () => {
-  const t = useTranslations("Dashboard");
+  const t = useTranslations("Resources");
+
+  const RESOURCE_LINKS = [
+    {
+      id: 1,
+      url: "https://www.partos.nl/wat-we-doen/innovation-hub/new-ways-of-collaboration/",
+    },
+    {
+      id: 2,
+      url: "https://www.partos.nl/wat-we-doen/innovation-hub/inclusion/",
+    },
+    {
+      id: 3,
+      url: null,
+    },
+    {
+      id: 4,
+      url: "https://shiftthepower.org/",
+    },
+    {
+      id: 5,
+      url: "https://www.bond.org.uk/resources/this-is-the-work-pdf/",
+    },
+  ];
+
   return (
     <Card>
-      <h1 className="font-bold text-xl">{t("resources")}</h1>
+      <div className="w-full p-6 xl:p-12">
+        <div className="w-full text-dark-10 space-y-5 mb-8">
+          <h2 className="text-3xl xl:text-4xl font-extra-bold">{t("title")}</h2>
+          <p className="text-base xl:text-lg">{t("subTitle")}</p>
+        </div>
+        <List bordered={false}>
+          {RESOURCE_LINKS.map((item) => (
+            <List.Item key={item.id}>
+              <List.Item.Meta
+                title={
+                  <h3 className="font-bold text-lg xl:text-xl">
+                    {t(`resource${item.id}`)}
+                  </h3>
+                }
+                description={
+                  <div className="w-full text-sm xl:text-base">
+                    <p className="text-dark-7 mb-4">
+                      {t(`resource${item.id}Desc`)}
+                    </p>
+                    {item.url && (
+                      <a
+                        href={item.url}
+                        target="_blank"
+                        className="font-bold text-dark-10 hover:text-primary-dark hover:underline"
+                      >
+                        {t("learnMore")}
+                      </a>
+                    )}
+                  </div>
+                }
+              />
+            </List.Item>
+          ))}
+        </List>
+      </div>
     </Card>
   );
 };

diff --git a/frontend/src/app/[locale]/dashboard/page.js b/frontend/src/app/[locale]/dashboard/page.js
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 
 import { api } from "@/lib";
-import { PAT_SESSION } from "@/static/config";
+import { PARTOS, PAT_SESSION } from "@/static/config";
 import classNames from "classnames";
 
 const PageTitle = () => {
@@ -156,7 +156,7 @@ const AboutCard = ({ isEmpty = false }) => {
             <p className="whitespace-pre-line">{t("aboutDescription")}</p>
           </div>
           <a
-            href="https://www.partos.nl/wp-content/uploads/2024/04/The-Power-Awareness-Tool-2.pdf"
+            href={PARTOS.PATGuidelineLink}
             target="_blank"
             rel="noopener noreferrer"
           >

diff --git a/frontend/src/app/[locale]/page.js b/frontend/src/app/[locale]/page.js
@@ -66,23 +66,29 @@ const FooterCopySection = () => {
             href="https://www.belastingdienst.nl/rekenhulpen/anbi_zoeken/"
             target="_blank"
           >
-            <img
+            <Image
               src="/images/footer-ANBI.svg"
               className="w-full h-20"
+              width={100}
+              height={80}
               alt="ANBI"
             />
           </a>
           <span>
-            <img
+            <Image
               src="/images/footer-partos-9001.jpg"
               className="w-full h-20 invert-[5%]"
+              width={132}
+              height={80}
               alt="Partos 9001"
             />
           </span>
           <span>
-            <img
+            <Image
               src="/images/footer-EIK.png"
               className="w-full h-20 invert-[5%]"
+              width={84}
+              height={80}
               alt="EIK"
             />
           </span>
@@ -120,7 +126,7 @@ const FooterLinksSection = () => {
     <div
       className={classNames(
         sourceSansPro.className,
-        "w-full pb-2 pt-12 xl:pt-14 bg-footer bg-no-repeat bg-contain bg-right-bottom"
+        "w-full pb-2 pt-12 xl:pt-14 bg-footer bg-no-repeat bg-contain bg-right-bottom",
       )}
     >
       <div className="w-full">
@@ -300,7 +306,7 @@ const HowItWorkSection = () => {
                 <p className="text-sm xl:text-base">{t("howItWorkDesc")}</p>
               </div>
               <a
-                href="https://www.partos.nl/wp-content/uploads/2024/04/The-Power-Awareness-Tool-2.pdf"
+                href={PARTOS.PATGuidelineLink}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -434,7 +440,7 @@ const Home = async ({ params }) => {
       className={classNames(
         openSans.className,
         openSans.variable,
-        "w-full max-w-9xl h-screen bg-grey-100 text-base text-dark-10 overflow-y-auto"
+        "w-full max-w-9xl h-screen bg-grey-100 text-base text-dark-10 overflow-y-auto",
       )}
     >
       <div className="w-full relative bg-landing-gradient backdrop-blur">
@@ -453,7 +459,7 @@ const Home = async ({ params }) => {
         </div>
         <div className="w-full relative px-10">
           <Image
-            src={`/images/mockup-preview-${params?.locale || 'en'}.png`}
+            src={`/images/mockup-preview-${params?.locale || "en"}.png`}
             alt="PARTOS PAT Preview"
             width={1280}
             height={448}
@@ -472,7 +478,7 @@ const Home = async ({ params }) => {
 
       <div className="w-full bg-light-1 py-16">
         <div className="container mx-auto 2xl:px-4">
-          <FAQCollapsible />
+          <FAQCollapsible isPublic />
         </div>
       </div>