Work on portal's About page and Privacy page

react-app/public/content/Contact_page.rtf

@@ -0,0 +1,30 @@
+{\rtf1\ansi\ansicpg1252\cocoartf2709
+\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fswiss\fcharset0 Helvetica-Oblique;}
+{\colortbl;\red255\green255\blue255;\red25\green28\blue31;\red56\green90\blue161;}
+{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;\cssrgb\c27843\c43922\c69412;}
+\paperw11900\paperh16840\margl1440\margr1440\vieww12740\viewh10840\viewkind0
+\deftab720
+\pard\pardeftab720\partightenfactor0
+
+\f0\fs80 \cf2 \expnd0\expndtw0\kerning0
+#Contact form\
+\pard\pardeftab720\partightenfactor0
+
+\fs32 \cf2 Please fill out this form if you need to contact us at the 
+\f1\i Swedish Precision Medicine Portal. 
+\f0\i0 Please provide your contact information and we should get back to you within a week\'92s time. \
+\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs56 \cf2 ##Personal data policy\
+\pard\pardeftab720\sa320\partightenfactor0
+
+\fs32 \cf2 The personal data you provide in this form, your name and email address, will be used to process your suggestion of added resource to the\uc0\u8239 \cf3 Swedish Precision Medicine Portal. \cf2 It is a service run by the SciLifeLab Data Centre on assignment from the \'85 It serves to address\'85 \
+The information you provide will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.\
+The following parties will have access to processing your personal data: SciLifeLab Data Centre, Uppsala University. Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data please contact\uc0\u8239 the controller SciLifeLab Data Centre at Uppsala University using [email protected].\
+\pard\pardeftab720\partightenfactor0
+
+\fs80 \cf2 \
+\pard\pardeftab720\sa160\partightenfactor0
+\cf2 \
+}

react-app/public/content/Index_page.rtf

@@ -0,0 +1,48 @@
+{\rtf1\ansi\ansicpg1252\cocoartf2709
+\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;\red25\green28\blue31;}
+{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;}
+\paperw11900\paperh16840\margl1440\margr1440\vieww16820\viewh11860\viewkind0
+\deftab720
+\pard\pardeftab720\sa80\partightenfactor0
+
+\f0\fs48 \cf2 \expnd0\expndtw0\kerning0
+Welcome to the newly launched Swedish Precision Medicine Portal\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 This portal aims to offer a data catalogue where you can search and gain access to Swedish Precision Medicine datasets. We are currently conducting a pilot project with BrainChild (link) to fill the important need of sharing data within childhood cancer to researchers and clinicians. Stay tuned!\
+
+\fs48 \
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Find your repository\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Links to area-specific data repositories and tools that could be used in your Precision Medicine research \
+
+\fs48 \
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Latest news\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Latest news in the Precision Medicine field and new functionalities on the platform 
+\fs48 \
+\
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Upcoming events\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Find bioinformatics, GDPR and other types of training, as well as Precision Medicine events in Europe\
+\
+\pard\pardeftab720\sa80\partightenfactor0
+
+\fs48 \cf2 Data platform\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Our Precision Medicine data catalogue is still under development \
+\
+\pard\pardeftab720\sa80\partightenfactor0
+
+\fs48 \cf2 Trusted Research Environment \
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Our Precision Medicine TRE is still under development. Our aim is to offer a centralised place for storage, analysis and sharing.}

react-app/public/content/Privacy_page.md

@@ -0,0 +1,18 @@
+#Privacy Policy
+SciLifeLab operates the Swedish Precision Medicine Portal, which provides the Service.
+This page is used to inform website visitors regarding our personal data processing policy. If you choose to use our Service, then your personal data will be processed in accordance with this policy.
+The personal information that we collect is used for providing and improving the Service. We will not use or share your information with anyone except as described in this policy. All collected personal information will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.
+##Visitor statistics
+We want to inform you that whenever you visit our Service, we collect the information that your browser sends to us, which is called ’log data’. Log data may include: the website that you visited us from, the parts of our Service you visit, the date and duration of your visit, your anonymised IP address, information from the device that you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type), and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to improve our Service, and to recognise and stop any misuse.
+You can opt out of your statistics being collected below:
+The tracking opt-out feature requires cookies to be enabled.
+
+##Forms
+Our Service contains a number of forms that visitors can use to contact us or send us suggestions. The website visitors may choose to provide their personal information such as their name and e-mail address through these forms.
+The following parties will have access to processing the personal data provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska högskolan (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data, please contact the controller SciLifeLab Data Centre at Uppsala University using [email protected]
+##Links to Other Sites
+Our Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the privacy policy of these websites. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party sites or services.
+##Changes to This Privacy Policy
+We may update our privacy policy from time to time. Thus, we advise you to review this page periodically for any changes. We will notify you of any changes by posting the new privacy policy on this page. These changes posted on this page are effective immediately.
+##Contact Us
+If you have any questions or suggestions about our privacy policy, do not hesitate to contact us (link to contact page).

react-app/src/components/AccordionComponent.tsx

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react'
+
+export default function AccordionComponent(): ReactElement {
+
+    return (
+        <>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+        </>
+    );
+}

react-app/src/components/CardComponent.tsx

@@ -1,22 +1,29 @@
 import { ReactElement } from "react";
+import { ICardConfig, ICardContent } from "../interfaces/types";
 
-export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement {
+export default function CardComponent(prop: { cardConfig: ICardConfig, cardContent: ICardContent }): ReactElement {
     const title: ReactElement = (
-        <h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
+        <h2 className={prop.cardConfig.titleClasses}>{prop.cardContent.title}</h2>
     );
 
+    const image: ReactElement = (
+        <figure><img src={prop.cardContent.imageSrc} alt={prop.cardContent.imageAlt} /></figure>
+    );
+
+    var buttonClasses: string = "card-actions " + prop.cardConfig.buttonPlacement;
     const button: ReactElement = (
-        <div className="card-actions justify-center">
-            <button className={prop.buttonClasses}>{prop.button}</button>
+        <div className={buttonClasses}>
+            <button className={prop.cardConfig.buttonClasses}>{prop.cardContent.buttonText}</button>
         </div>
     );
 
     return (
-        <div className={"card " + prop.classes}>
+        <div className={"card " + prop.cardConfig.cardClasses}>
+            {prop.cardContent.imageSrc && image}
             <div className="card-body">
-                {prop.title && title}
-                <p className="text-center content-end">{prop.text}</p>
-                {prop.button && button}
+                {prop.cardContent.title && title}
+                <p className={prop.cardConfig.textClasses}>{prop.cardContent.text}</p>
+                {prop.cardContent.buttonText && button}
             </div>
         </div>
     );

react-app/src/components/FooterComponent.tsx

@@ -13,7 +13,7 @@ export default function FooterComponent(): ReactElement {
   };
 
   var linksCol2: { [id: string] : ILink; } = {
-      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' },
+      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/about' },
       'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/' },
       'l3': { text: 'Open Source Contribution', classes: LINK_CLASSES, link: '/' },
       'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },

react-app/src/components/Routes.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom';
 import App from '../App';
 import HomePage from '../pages/HomePage';
 import AboutPage from '../pages/AboutPage';
@@ -8,6 +8,9 @@ import DataPage from '../pages/DataPage';
 import EventsAndNewsPage from '../pages/EventsAndNewsPage';
 import SignInPage from '../pages/SignInPage';
 import PrivacyPage from '../pages/PrivacyPage';
+import AboutProductPage from '../pages/AboutProductPage';
+import AboutFAQPage from '../pages/AboutFAQPage';
+import AboutPartnersPage from '../pages/AboutPartnersPage';
 
 const router = createBrowserRouter([
     {
@@ -21,6 +24,24 @@ const router = createBrowserRouter([
             {
                 path: 'about',
                 element: <AboutPage />,
+                children: [
+                    {
+                        index: true,
+                        loader: async () => redirect('product')
+                    },
+                    {
+                        path: 'product',
+                        element: <AboutProductPage />,
+                    },
+                    {
+                        path: 'faq',
+                        element: <AboutFAQPage />,
+                    },
+                    {
+                        path: 'partners',
+                        element: <AboutPartnersPage />,
+                    },
+                ]
             },
             {
                 path: 'contact',
@@ -48,4 +69,8 @@ const router = createBrowserRouter([
 
 export default function Routes(): ReactElement {
     return <RouterProvider router={router} />;
-}
+}
+
+function async(): import("react-router-dom").LoaderFunction<any> | undefined {
+    throw new Error('Function not implemented.');
+}

react-app/src/constants.ts

@@ -1,11 +1,11 @@
 // reused tailwind classes
-export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold";
+export const H_1: string = "text-left text-black text-[40px] font-semibold";
 
-export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6";
+export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-5xl leading-snug font-bold p-6";
 
 export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
 export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300';
 
-export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12";
+export const BODY_CLASSES: string = "bg-white space-y-8 py-4 px-12 pb-60";
 
 export const LINK_CLASSES: string = 'link link-hover';

react-app/src/interfaces/types.ts

@@ -12,4 +12,20 @@ export interface ISVG {
     viewBox: string;
     classes: string;
     svg: string;
+};
+
+export interface ICardConfig {
+    cardClasses: string;
+    titleClasses: string;
+    textClasses: string;
+    buttonClasses: string;
+    buttonPlacement: string;
+};
+
+export interface ICardContent {
+    title: string; 
+    text: string; 
+    buttonText: string;
+    imageSrc: string;
+    imageAlt: string;
 };

react-app/src/pages/AboutFAQPage.tsx

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import AccordionComponent from '../components/AccordionComponent';
+
+export default function AboutFAQPage(): ReactElement {
+    const { trackPageView,} = useMatomo()
+
+    // Track page view
+    React.useEffect(() => {
+        trackPageView()
+    }, [])
+
+    return (
+        <>
+            <div className="divider">FAQ</div>
+            <AccordionComponent />
+        </>
+    );
+}

react-app/src/pages/AboutPage.tsx

@@ -1,5 +1,13 @@
 import React, { ReactElement } from 'react';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import TextBarComponent from '../components/TextBarComponent';
+import {
+    BODY_CLASSES,
+    H_1,
+    PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
+} from '../constants';
+import { Link, NavLink, Outlet } from 'react-router-dom';
+import { ILink, } from '../interfaces/types';
 
 export default function AboutPage(): ReactElement {
     const { trackPageView,} = useMatomo()
@@ -9,9 +17,33 @@ export default function AboutPage(): ReactElement {
         trackPageView()
     }, [])
 
+    var pageTitle: string = "About Us";
+    var textBarContent: string = "Get to know about the team behind the [product name] and our mission to connect you with the data you need.";
+
+    var breadcrumbs: { [id: string] : ILink; } = {
+        'l1': { text: 'Home', classes: '', link: '/' },
+        'l2': { text: 'About', classes: '', link: '' },
+    };
+
     return (
-        <div>
-            <p className="bg-green text-bold">About page under construction</p>
-        </div>
+        <>
+            <TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
+            <div className={BODY_CLASSES}>
+                <div className="text-sm breadcrumbs">
+                <ul>
+                {Object.keys(breadcrumbs).map( key => (
+                    <li>{breadcrumbs[key].link ? <Link to={breadcrumbs[key].link}>{breadcrumbs[key].text}</Link> : <>{breadcrumbs[key].text}</>}</li>
+                ))}
+                </ul>
+                </div>
+                <div className={H_1}>{pageTitle}</div>
+                <div role="tablist" className="tabs tabs-lifted pb-4">
+                    <NavLink to='/about/product' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Product</NavLink>
+                    <NavLink to='/about/faq' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>FAQ</NavLink>
+                    <NavLink to='/about/partners' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Partners</NavLink>
+                </div>
+                <Outlet />
+            </div>
+        </>
     );
 }