Merge remote-tracking branch 'origin/post-sfn' into jitter

__tests__/Literature/GenerativeQAInput.spec.tsx

@@ -151,8 +151,8 @@ describe('GenerativeQAInput', () => {
     await selectSuggestion('Paper');
     await selectSuggestion('Journal Paper');
 
-    expectOptionsToBeSelected(['paper', 'journal paper'].map(startCase));
-    expectOptionsNotToBeSelected(['abstract'].map(startCase));
+    expectOptionsToBeSelected(['paper', 'journal-paper']);
+    expectOptionsNotToBeSelected(['abstract']);
   });
 
   test('shows journal suggestions even if user has not started typing', async () => {
@@ -379,7 +379,12 @@ describe('GenerativeQAInput', () => {
 
   const expectOptionsToBeSelected = (options: string[]) => {
     options.forEach((option) => {
-      expect(screen.getByText(option, { selector: selectedOptionsSelector })).toBeVisible();
+      expect(
+        // Exact match for "option" but ignore case.
+        screen.getByText(new RegExp(`^${option}$`, 'i'), {
+          selector: selectedOptionsSelector,
+        })
+      ).toBeVisible();
     });
   };
 

src/app/about/layout.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { ReactNode } from 'react';
+import { Alert } from 'antd';
+import { useQueryState } from 'nuqs';
 
 import { Gabarito } from 'next/font/google';
 
@@ -19,14 +21,37 @@ const gabarito = Gabarito({
 });
 
 export default function AboutPageLayout({ children }: Props) {
+  const [warning, setWarning] = useQueryState('warning', {
+    clearOnDefault: true,
+    defaultValue: '',
+  });
   return (
     <div
       className={classNames(
         'relative flex min-h-screen flex-col bg-primary-9 text-white',
         gabarito.className
       )}
     >
-      <nav className="fixed z-[200] flex w-full items-center justify-between px-6 py-6 backdrop-blur md:px-12 md:py-8">
+      {warning === 'yes' && (
+        <Alert
+          className="fixed left-0 top-0 z-[99999] h-28 w-full md:hidden"
+          banner
+          closable
+          message={
+            <div className="text-justify text-base font-light">
+              You are currently using a mobile device. Some features are only available on the
+              desktop version. Please switch to a desktop for a better experience!
+            </div>
+          }
+          onClose={() => setWarning('')}
+        />
+      )}
+      <nav
+        className={classNames(
+          'fixed z-[200] flex w-full items-center justify-between px-6 py-6 backdrop-blur md:px-12 md:py-8',
+          warning === 'yes' ? 'top-28 md:top-0' : 'top-0'
+        )}
+      >
         <OBPLogo color="text-white" />
         <LoginButton label="Log in" link="/log-in" type="link" />
       </nav>

src/components/About/About.tsx

@@ -34,23 +34,23 @@ const ABOUT_ARTICLES: Array<AboutSection> = [
         title: 'Adapting to Change',
         text: `
             Neuroplasticity, also known as brain plasticity, is the ability of the brain to reorganize itself by forming new neural connections throughout life.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
             Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
-            Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. 
-            Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
+            Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
+            Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
             Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
             Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.
-            Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. 
-            Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. 
+            Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.
+            Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.
             Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
           `,
       },
       {
         title: 'The Power of Learning',
         text: `
-            Learning a new skill or acquiring knowledge can lead to structural changes in the brain. 
+            Learning a new skill or acquiring knowledge can lead to structural changes in the brain.
             Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. 
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
             Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
             Aenean lacinia bibendum nulla sed consectetur.
           `,
@@ -71,20 +71,13 @@ const ABOUT_ARTICLES: Array<AboutSection> = [
       {
         title: 'Chemical Messengers',
         text: `
-            Neurotransmitters play a crucial role in transmitting signals between nerve cells. 
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
-            Aenean lacinia bibendum nulla sed consectetur.
+            Neurotransmitters play a crucial role in transmitting signals between nerve cells.
           `,
       },
       {
         title: 'Emotional Harmony',
         text: `
-            Maintaining a balance of neurotransmitters is essential for emotional stability. 
-            Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
-            Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
-            Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+            Maintaining a balance of neurotransmitters is essential for emotional stability.
           `,
         alt: 'Neurotransmitter Molecules',
         image: `${basePath}/images/topological-neuron-synthesis.png`,
@@ -103,21 +96,14 @@ const ABOUT_ARTICLES: Array<AboutSection> = [
       {
         title: 'Early Stages of Development',
         text: `
-            The human brain undergoes significant changes during the early stages of development. 
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
-            Aenean lacinia bibendum nulla sed consectetur.
+            The human brain undergoes significant changes during the early stages of development.
           `,
       },
       {
         title: 'Adolescence and Beyond',
         text: `
-            The adolescent brain continues to develop, shaping cognitive abilities and decision-making processes. 
+            The adolescent brain continues to develop, shaping cognitive abilities and decision-making processes.
             Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-            Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. 
-            Aenean lacinia bibendum nulla sed consectetur.
           `,
         alt: 'Brain Development Stages',
         image: `${basePath}/images/topological-neuron-synthesis.png`,

src/components/AboutSFN/About.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { useQueryState } from 'nuqs';
+
 import DownloadDocument from './Blocs/DownloadDocument';
 import Footer from './Blocs/Footer';
 import Gallery from './Blocs/Gallery';
@@ -24,11 +26,14 @@ import { classNames } from '@/util/utils';
 export default function AboutSFN() {
   const [activeSection, setActiveSection] = useState<string>('introduction');
   const [showSteps, setShowSteps] = useState(true);
+  const [warning] = useQueryState('warning', { clearOnDefault: true, defaultValue: '' });
+
   return (
     <div
       className={classNames(
-        'relative flex h-screen w-screen flex-col overflow-x-hidden pt-[20vh]',
-        'md:w-full md:snap-y md:snap-mandatory md:snap-center md:pt-0'
+        'relative flex h-screen w-screen flex-col overflow-x-hidden pt-36 md:pt-[117px]',
+        'md:w-full md:snap-y md:snap-mandatory md:snap-center md:pt-0',
+        warning === 'yes' ? 'pt-52 md:pt-36' : 'pt-36'
       )}
     >
       <InternalNavigation activeSection={activeSection} show={showSteps} />
@@ -61,7 +66,7 @@ export default function AboutSFN() {
         id="inshort"
       />
       <Gallery
-        title="Simulation neuroscience"
+        title="Simulation neuro&shy;science"
         subtitle="Discover the benefits"
         content={SIMULATION_NEUROSCIENCE_BLOCK}
         setActiveSection={setActiveSection}

src/components/AboutSFN/Blocs/Footer.tsx

@@ -73,27 +73,6 @@ const content = [
       },
     ],
   },
-  {
-    title: 'More',
-    items: [
-      {
-        title: 'Link 1',
-        url: '#',
-      },
-      {
-        title: 'Link 2',
-        url: '#',
-      },
-      {
-        title: 'Link 3',
-        url: '#',
-      },
-      {
-        title: 'Link 4',
-        url: '#',
-      },
-    ],
-  },
 ];
 
 export default function Footer({

src/components/AboutSFN/Blocs/FormDownloadDocument.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import UserInfoForm from './UserInfoForm';
+import { ConfigProvider, Modal } from 'antd';
 
+import UserInfoForm from './UserInfoForm';
 import { SingleDocumentProps } from '@/types/about/document-download';
+import { CloseIcon } from '@/components/icons';
 import { classNames } from '@/util/utils';
 
 export default function FormDownloadDocument({
@@ -15,16 +17,31 @@ export default function FormDownloadDocument({
   setFormOpen: (value: boolean) => void;
 }) {
   return (
-    <>
-      <div className="fixed left-0 top-0 z-[5555] h-screen w-screen bg-primary-7 opacity-50 backdrop-blur-lg" />
-      <div
+    <ConfigProvider theme={{ hashed: false }}>
+      <Modal
+        mask
+        centered
+        destroyOnClose
+        maskClosable
+        open={formOpen}
+        onCancel={() => setFormOpen(false)}
+        title={null}
+        footer={null}
+        styles={{
+          mask: {
+            background: '#002766ba',
+          },
+          body: { padding: '20px' },
+        }}
+        closeIcon={<CloseIcon className="block h-auto w-4" />}
         className={classNames(
-          'fixed left-1/2 top-1/2 z-[99999] flex h-screen w-screen  -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-[rgba(0,39,102,0.8)] text-primary-8 md:h-3/4 md:w-3/4 xl:h-2/3 xl:w-2/3',
-          formOpen ? 'pointer-events-auto' : 'pointer-events-none'
+          '!m-0 h-full w-full !max-w-full md:h-auto md:!w-[700px]',
+          '[&_.ant-modal-body]:flex [&_.ant-modal-body]:h-full [&_.ant-modal-body]:items-center [&_.ant-modal-body]:justify-center md:[&_.ant-modal-body]:h-auto',
+          '[&_.ant-modal-confirm-body]:!w-full [&_.ant-modal-confirm-paragraph]:max-w-full [&_.ant-modal-content]:h-full [&_.ant-modal-content]:!rounded-none'
         )}
       >
         <UserInfoForm content={content} setFormOpen={setFormOpen} />
-      </div>
-    </>
+      </Modal>
+    </ConfigProvider>
   );
 }

src/components/AboutSFN/Blocs/Gallery.tsx

@@ -44,12 +44,17 @@ export default function Gallery({
 
   return (
     <div
-      className="relative flex w-full flex-col py-[14vh] md:min-h-screen md:snap-start md:px-[16vw]"
+      className="relative flex w-full flex-col py-[15vh] md:min-h-screen md:snap-start md:px-[16vw]"
       id={slugify(id)}
       ref={ref}
     >
       <header className="mb-4 flex flex-col px-8 uppercase tracking-[0.1em] md:mb-12 md:px-0">
-        <h2 className="mb-4 text-5xl font-bold leading-[0.86] md:text-6xl xl:text-8xl">{title}</h2>
+        <h2
+          lang="en"
+          className="mb-4 hyphens-manual whitespace-pre-line text-4xl font-bold leading-[0.86] md:hyphens-none md:text-5xl xl:text-5xl"
+        >
+          {title}
+        </h2>
         <h3 className="text-xl font-normal uppercase text-primary-3 md:text-3xl">{subtitle}</h3>
       </header>
       <SingleGalleryItem

src/components/AboutSFN/Blocs/Introduction.tsx

@@ -26,7 +26,7 @@ export default function Introduction({
   return (
     <div
       className={classNames(
-        'relative flex min-h-screen w-screen flex-col justify-center px-8 py-8 md:py-[20vh]',
+        'relative flex w-screen flex-col justify-start px-8 py-8 md:min-h-screen md:justify-center',
         'text-white md:w-full md:snap-start md:px-[16vw] md:py-[20vh]'
       )}
       id={id}

src/components/AboutSFN/Blocs/RichContent.tsx

@@ -33,7 +33,7 @@ export default function RichContent({
 
   return (
     <div
-      className="relative flex min-h-screen w-full flex-col px-[10vw] py-8 md:snap-start md:px-[16vw] md:py-[20vh]"
+      className="relative mb-16 flex w-full flex-col px-[10vw] py-8 md:mb-0 md:min-h-screen md:snap-start md:px-[16vw] md:py-[15vh]"
       id={slugify(id)}
       ref={ref}
     >
@@ -47,10 +47,10 @@ export default function RichContent({
           <p key={`paragraph_${index + 1}`}>{paragraph}</p>
         ))}
       </div>
-      <div className="mt-4 w-full">
+      <div className="mt-10 w-full md:mt-4">
         <Image
-          width={1920}
-          height={1080}
+          width={1500}
+          height={844}
           src={image}
           alt={title}
           className="aspect-video object-fill object-center"

src/components/AboutSFN/Blocs/SingleDocumentDownloadCard.tsx

@@ -2,10 +2,9 @@
 
 import { useState } from 'react';
 
-import downloadFileByHref from '@/util/downloadFileByHref';
 import { SingleDocumentProps } from '@/types/about/document-download';
 import { classNames } from '@/util/utils';
-import { basePath } from '@/config';
+import downloadFileByHref from '@/util/downloadFileByHref';
 
 export default function SingleDocumentDownloadCard({
   content,
@@ -21,33 +20,17 @@ export default function SingleDocumentDownloadCard({
   const [onMouseHover, setOnMouseHover] = useState<boolean>(false);
 
   const handleClick = () => {
-    if (content.access === 'restricted') {
-      openModal(content);
-    } else {
-      downloadFileByHref(`${basePath}${content.url}`, content.name);
-    }
-  };
-
-  const cardHeight = 440;
-
-  const cardStyle = {
-    background: 'radial-gradient(circle at 110% 110%, rgba(77,194,237,1) 0%, rgba(33,36,77,1) 70%)',
-    // clipPath: 'polygon(0% 0%, 0% 100%, 100% 100%, 100% 19%, 72% 0)',
-    // height: `${cardHeight}px`,
+    if (content.access === 'restricted') openModal(content);
+    else downloadFileByHref(content.url, `${content.file}.pdf`);
   };
-  // TODO: for loris to decide when he return back
-  // const cornerStyle = {
-  //   clipPath: 'polygon(80% 0, 80% 18%, 100% 18%)',
-  //   background: 'linear-gradient(50deg, rgba(77,194,237,1) 80%, rgba(33,36,77,1) 100%)',
-  // };
 
   return (
     <div
       className={classNames(
         'relative top-0 flex w-full transition-top duration-500 ease-out-back',
         inView ? 'top-0' : 'top-32'
       )}
-      style={{ height: `${cardHeight}px`, transitionDelay: `${(index + 1) * 150}ms` }}
+      style={{ height: '440px', transitionDelay: `${(index + 1) * 150}ms` }}
       onMouseOver={() => setOnMouseHover(true)}
       onFocus={() => setOnMouseHover(true)}
       onMouseOut={() => setOnMouseHover(false)}
@@ -59,7 +42,10 @@ export default function SingleDocumentDownloadCard({
       />
       <div
         className="relative flex h-full w-full flex-col justify-between overflow-hidden px-6 pb-6 pt-28 shadow-superShadow"
-        style={cardStyle}
+        style={{
+          background:
+            'radial-gradient(circle at 110% 110%, rgba(77,194,237,1) 0%, rgba(33,36,77,1) 70%)',
+        }}
       >
         <div className="relative flex flex-col gap-y-2">
           <h2 className="relative mb-4 break-words text-center text-4xl font-bold uppercase leading-[0.9] tracking-widest md:text-xl xl:text-4xl">
@@ -69,9 +55,6 @@ export default function SingleDocumentDownloadCard({
             {content.description}
           </p>
         </div>
-
-        {/* Button DESKTOP */}
-        {/* Made to avoid using a library especially for this component */}
         <div
           className={classNames(
             'absolute bottom-4 w-[calc(100%-3rem)] transition-bottom duration-700 ease-in-out',
@@ -80,10 +63,7 @@ export default function SingleDocumentDownloadCard({
         >
           <button
             type="button"
-            className={classNames(
-              'relative mt-4 flex w-full flex-col items-center bg-white py-8 font-sans text-lg uppercase leading-none tracking-wider text-primary-8 md:flex'
-              // onMouseHover ? 'top-0' : 'top-32'
-            )}
+            className="relative mt-4 flex w-full flex-col items-center bg-white py-8 font-sans text-lg uppercase leading-none tracking-wider text-primary-8 md:flex"
             onClick={handleClick}
           >
             <span className="font-bold ">Download Brochure</span>