dev > prod

src/app/(static)/layout.tsx

@@ -1,11 +1,13 @@
 import { PropsWithChildren } from 'react';
 
 import Footer from '@/containers/footer';
+import Newsletter from '@/containers/newsletter';
 
 export default function StaticPageLayout({ children }: Readonly<PropsWithChildren>) {
   return (
     <main>
       {children}
+      <Newsletter />
       <Footer />
     </main>
   );

src/app/cases/responsive.tsx

@@ -91,15 +91,15 @@ export default function ResponsiveCasesPage() {
             />
           </CaseStudiesTotal>
         </motion.div>
-        <div className="px-4 md:p-[50px]" ref={ref}>
+        <div className="px-6" ref={ref}>
           <CaseStudiesTotal className="flex items-baseline justify-between gap-4 text-xl">
             <MobileFiltersDropdown
               onClickSearch={handleOpenSearch}
               onClickFilters={handleOpenFilters}
             />
           </CaseStudiesTotal>
         </div>
-        <div className="flex grow px-4">
+        <div className="flex grow px-6">
           <CaseStudies />
         </div>
         <motion.div
@@ -118,7 +118,7 @@ export default function ResponsiveCasesPage() {
       <Media greaterThanOrEqual="md" className="relative flex flex-1">
         <>
           <Sidebar>
-            <div className="px-[60px]">
+            <div className="px-6">
               <CaseStudiesTotal className="text-xl" />
             </div>
             <CaseStudies />
@@ -135,7 +135,7 @@ export default function ResponsiveCasesPage() {
                 setFilters((prev) => ({ ...prev, keyword }));
               }}
               autoFocus
-              placeholder="Search case studies by keyword..."
+              placeholder="Search case studies by title or tag..."
               onClose={handleCloseSearch}
               showCloseIconAlways
             />

src/app/privacy-policy/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import Footer from '@/containers/footer';
+
+export default function PrivacyPolicyLayout({ children }: Readonly<PropsWithChildren>) {
+  return (
+    <main>
+      {children}
+      <Footer />
+    </main>
+  );
+}

src/app/privacy-policy/page.tsx

@@ -0,0 +1,5 @@
+import PrivacyPolicy from '@/containers/privacy-policy';
+
+export default function PrivacyPolicyPage() {
+  return <PrivacyPolicy />;
+}

src/components/app-menu/content.tsx

@@ -11,19 +11,10 @@ import { cn } from '@/lib/utils';
 import { menuOpenAtom } from '@/app/store';
 
 import { SECTIONS } from '@/containers/header';
-import Newsletter from '@/containers/newsletter';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 
 const navItemContainerClass =
   'hover:text-navy-500 relative inline-flex items-center space-x-6 text-xl text-grey-800 2xl:text-4xl' as const;
-const NavItem = (props: PropsWithChildren<LinkProps & { isDialogButton?: boolean }>) => {
+const NavItem = (props: PropsWithChildren<LinkProps>) => {
   const setOpen = useSetAtom(menuOpenAtom);
   const Text = (
     <>
@@ -32,32 +23,6 @@ const NavItem = (props: PropsWithChildren<LinkProps & { isDialogButton?: boolean
     </>
   );
 
-  if (props.isDialogButton) {
-    return (
-      <Dialog>
-        <DialogTrigger asChild>
-          <button
-            type="button"
-            className={navItemContainerClass}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {Text}
-          </button>
-        </DialogTrigger>
-        <DialogContent className="bg-white pt-8 text-grey-800" aria-describedby={undefined}>
-          <DialogHeader>
-            <DialogTitle className="pr-2 text-xl font-bold text-grey-800 md:text-2xl">
-              Interested in our work?
-            </DialogTitle>
-          </DialogHeader>
-          <Newsletter />
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
   return (
     <Link
       href={props.href}
@@ -87,7 +52,7 @@ export const Nav = () => {
   return (
     <div
       className={cn({
-        'pointer-events-none fixed left-0 top-0 z-50 h-screen w-full overflow-y-auto bg-white opacity-0 transition-all':
+        'pointer-events-none fixed left-0 top-0 z-[60] h-screen w-full overflow-y-auto bg-white opacity-0 transition-all':
           true,
         'pointer-events-auto opacity-100': open,
       })}
@@ -131,9 +96,7 @@ export const Nav = () => {
           <ul className="flex flex-col gap-5 lg:gap-8">
             {SECTIONS.map((item) => (
               <li key={item.href} className="text-right">
-                <NavItem href={item.href} isDialogButton={item.href === '#contact-us'}>
-                  {item.name}
-                </NavItem>
+                <NavItem href={item.href}>{item.name}</NavItem>
               </li>
             ))}
           </ul>

src/components/search/index.tsx

@@ -35,7 +35,7 @@ export default function Search({
       <div className="relative flex w-full">
         <input
           className={cn(
-            'flex w-[310px] items-center bg-white pl-6 pr-6 placeholder:text-grey-600 focus:outline-none',
+            'flex w-[345px] items-center bg-white pl-6 pr-6 placeholder:text-grey-600 focus:outline-none',
           )}
           placeholder={placeholder}
           onChange={(e) => {

src/components/ui/accordion.tsx

@@ -16,7 +16,7 @@ const AccordionItem = React.forwardRef<
   <AccordionPrimitive.Item
     ref={ref}
     className={cn(
-      'border-t border-t-grey-800/30 transition-colors data-[state=open]:border-t-grey-800',
+      // 'border-t border-t-grey-800/30 transition-colors last:border-b-grey-800/30 data-[state=open]:border-t-grey-800',
       className,
     )}
     {...props}

src/containers/about/description/index.tsx

@@ -18,17 +18,18 @@ import ForestPerson from '../../../../public/images/forest-person.webp';
 
 export default function AboutDescription() {
   return (
-    <Wrapper className="space-y-10">
-      <div className="space-y-4 lg:grid lg:grid-cols-12">
-        <p className="uppercase tracking-wide lg:col-span-6">A Horizon Europe project</p>
-        <h2 className="text-xl font-semibold lg:col-span-6 lg:text-3xl">
-          Doing
-          <br /> more
-          <span className="font-thin">4</span>
-          nature with citizen science
+    <Wrapper className="space-y-10 lg:space-y-20">
+      <div className="space-y-4">
+        <p className="uppercase tracking-wide">A Horizon Europe project</p>
+        <h2 className="text-xl font-semibold lg:text-3xl">
+          <span className="text-wrap">
+            Doing more
+            <span className="font-thin">4</span>nature
+          </span>
+          <span className="text-nowrap"> with citizen science</span>
         </h2>
       </div>
-      <div className="items-end space-y-10 lg:grid lg:grid-cols-12">
+      <div className="space-y-4 lg:grid lg:grid-cols-12 lg:space-y-0">
         <div className="relative lg:col-span-5">
           <Image src={ForestPerson} alt="person in a forest" />
         </div>

src/containers/about/partners/index.tsx

@@ -26,7 +26,7 @@ export default function Partners() {
         collaborations, with scientific experts from the social sciences, data science and
         technology, and natural sciences, most of whom also have substantial experience with
         hands-on Citizen Science. The consortium combines institutional actors, namely environmental
-        agencies and institutions with citizen science initiatives and environmental NGOs practicing
+        agencies and institutions with Citizen Science initiatives and environmental NGOs practicing
         Citizen Science and intermediaries as well as a network of Fab Labs and Designers and the
         private sector. This enables the consortium to implement its ambitious and truly innovative
         socio-technical approach for large-scale double loop Action Research.

src/containers/case-detail/sidebar/index.tsx

@@ -114,8 +114,8 @@ export default function CaseDetailSidebar() {
         <Media greaterThanOrEqual="md">
           {(className: string, renderChildren: boolean) =>
             renderChildren ? (
-              <Button asChild variant="ghost" className="border border-grey-900">
-                <Link href="/cases">Close detail</Link>
+              <Button asChild variant="secondary" className="border border-grey-900 text-white">
+                <Link href="/cases">Back</Link>
               </Button>
             ) : (
               <Button
@@ -155,33 +155,147 @@ export default function CaseDetailSidebar() {
             className="flex w-full flex-col divide-y divide-white/20"
             defaultValue={accordionItems[0].value}
           >
-            {accordionItems.map((item) => (
-              <AccordionItem key={item.value} value={item.value} className="py-5 first:pt-0">
+            {/*<AccordionItem*/}
+            {/*  value="citizenScienceInitiatives"*/}
+            {/*  className="peer w-full py-5 first:pt-0"*/}
+            {/*>*/}
+            {/*  <AccordionTrigger>*/}
+            {/*    <div className="flex items-center space-x-5">*/}
+            {/*      <span className="text-lg font-semibold">Citizen Science Initiatives</span>*/}
+            {/*    </div>*/}
+            {/*  </AccordionTrigger>*/}
+            {/*  <AccordionContent className="leading-9">*/}
+            {/*    <ul>*/}
+            {/*      {data?.citizenScienceInitiatives.map((item, index) => (*/}
+            {/*        <li key={index}>{renderItem(item)}</li>*/}
+            {/*      ))}*/}
+            {/*    </ul>*/}
+            {/*  </AccordionContent>*/}
+            {/*</AccordionItem>*/}
+            <AccordionItem value="citizenScienceData" className="peer w-full py-5 first:pt-0">
+              <AccordionTrigger>
+                <div className="flex items-center space-x-5">
+                  <span className="text-lg font-semibold">Citizen Science Data</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="leading-9">
+                <ul>
+                  {data?.citizenScienceData.map((item, index) => (
+                    <li key={index}>{renderItem(item)}</li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="complianceNeed" className="peer w-full py-5 first:pt-0">
+              <AccordionTrigger>
+                <div className="flex items-center space-x-5">
+                  <span className="text-lg font-semibold">Compliance Need</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="leading-9">
+                <ul className="space-y-4">
+                  {data?.complianceNeed.map((item, index) => (
+                    <li key={index}>
+                      {typeof item === 'object' && 'impact' in item ? (
+                        <>
+                          <h4 className="font-semibold">{item.impact.name}</h4>
+                          <ul className="space-y-2">
+                            {item.impact.list.map((subItem, index) => (
+                              <li key={index}>{renderItem(subItem)}</li>
+                            ))}
+                          </ul>
+                        </>
+                      ) : (
+                        renderItem(item)
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+            {data?.relevantPoliciesLaw && data.relevantPoliciesLaw.length > 0 && (
+              <AccordionItem value="relevantPoliciesLaw" className="peer w-full py-5 first:pt-0">
                 <AccordionTrigger>
-                  <span className="text-lg font-semibold">{item.title}</span>
+                  <div className="flex items-center space-x-5">
+                    <span className="text-lg font-semibold">Relevant policy/laws</span>
+                  </div>
                 </AccordionTrigger>
                 <AccordionContent className="leading-9">
                   <ul className="space-y-4">
-                    {item.data.map((dataItem, index) => (
+                    {data.relevantPoliciesLaw.map((item, index) => (
                       <li key={index}>
-                        {typeof dataItem === 'object' && 'impact' in dataItem ? (
+                        {typeof item === 'object' && 'impact' in item ? (
                           <>
-                            <h4 className="font-semibold">{dataItem.impact.name}</h4>
+                            <h4 className="font-semibold">{item.impact.name}</h4>
                             <ul className="space-y-2">
-                              {dataItem.impact.list.map((subItem, subIndex) => (
-                                <li key={subIndex}>{renderItem(subItem)}</li>
+                              {item.impact.list.map((subItem, index) => (
+                                <li key={index}>{renderItem(subItem)}</li>
                               ))}
                             </ul>
                           </>
                         ) : (
-                          renderItem(dataItem)
+                          renderItem(item)
                         )}
                       </li>
                     ))}
                   </ul>
                 </AccordionContent>
               </AccordionItem>
-            ))}
+            )}
+            {/*<AccordionItem value="stakeholders" className="peer w-full py-5 first:pt-0">*/}
+            {/*  <AccordionTrigger>*/}
+            {/*    <div className="flex items-center space-x-5">*/}
+            {/*      <span className="text-lg font-semibold">Stakeholders</span>*/}
+            {/*    </div>*/}
+            {/*  </AccordionTrigger>*/}
+            {/*  <AccordionContent className="leading-9">*/}
+            {/*    <ul className="space-y-4">*/}
+            {/*      {data?.stakeholders.map((item, index) => (*/}
+            {/*        <li key={index}>*/}
+            {/*          {typeof item === 'object' && 'impact' in item ? (*/}
+            {/*            <>*/}
+            {/*              <h4 className="font-semibold">{item.impact.name}</h4>*/}
+            {/*              <ul className="space-y-2">*/}
+            {/*                {item.impact.list.map((subItem, index) => (*/}
+            {/*                  <li key={index}>{renderItem(subItem)}</li>*/}
+            {/*                ))}*/}
+            {/*              </ul>*/}
+            {/*            </>*/}
+            {/*          ) : (*/}
+            {/*            renderItem(item)*/}
+            {/*          )}*/}
+            {/*        </li>*/}
+            {/*      ))}*/}
+            {/*    </ul>*/}
+            {/*  </AccordionContent>*/}
+            {/*</AccordionItem>*/}
+            {/*<AccordionItem value="authorities" className="peer w-full py-5 first:pt-0">*/}
+            {/*  <AccordionTrigger>*/}
+            {/*    <div className="flex items-center space-x-5">*/}
+            {/*      <span className="text-lg font-semibold">Authorities</span>*/}
+            {/*    </div>*/}
+            {/*  </AccordionTrigger>*/}
+            {/*  <AccordionContent className="leading-9">*/}
+            {/*    <ul className="space-y-4">*/}
+            {/*      {data?.authorities.map((item, index) => (*/}
+            {/*        <li key={index}>*/}
+            {/*          {typeof item === 'object' && 'impact' in item ? (*/}
+            {/*            <>*/}
+            {/*              <h4 className="font-semibold">{item.impact.name}</h4>*/}
+            {/*              <ul className="space-y-2">*/}
+            {/*                {item.impact.list.map((subItem, index) => (*/}
+            {/*                  <li key={index}>{renderItem(subItem)}</li>*/}
+            {/*                ))}*/}
+            {/*              </ul>*/}
+            {/*            </>*/}
+            {/*          ) : (*/}
+            {/*            renderItem(item)*/}
+            {/*          )}*/}
+            {/*        </li>*/}
+            {/*      ))}*/}
+            {/*    </ul>*/}
+            {/*  </AccordionContent>*/}
+            {/*</AccordionItem>*/}
           </Accordion>
           <div>
             <div className="flex flex-col items-start space-y-5 border-t border-t-white py-9">

src/containers/cases/header/filters/filters-dropdown/content.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import { useAtomValue } from 'jotai';
 import { useSetAtom } from 'jotai/index';
 import { HiOutlineTrash, HiOutlineX } from 'react-icons/hi';
 
@@ -17,7 +18,8 @@ export default function FiltersContent({
   onSetFiltersDone?: () => void;
   onClearFiltersDone?: () => void;
 }) {
-  const [filters, setFilters] = useState(INITIAL_FILTERS_STATE);
+  const globalFilters = useAtomValue(filtersAtom);
+  const [filters, setFilters] = useState(globalFilters);
   const setGlobalFilters = useSetAtom(filtersAtom);
 
   const onClearFilters = useCallback(() => {