Merge pull request #66 from Vizzuality/client/about-page

Add about page

client/next.config.mjs

@@ -20,6 +20,33 @@ const nextConfig = {
     RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false',
     NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH || '',
   },
+  redirects: async () => {
+    return [
+      {
+        source: '/',
+        has: [
+          {
+            type: 'cookie',
+            key: 'esa-visited',
+            value: 'true',
+          },
+        ],
+        permanent: false,
+        destination: '/globe',
+      },
+      {
+        source: '/',
+        missing: [
+          {
+            type: 'cookie',
+            key: 'esa-visited',
+          },
+        ],
+        permanent: false,
+        destination: '/home',
+      },
+    ];
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

client/src/app/(landing)/page.tsx → client/src/app/(landing)/globe/page.tsx

@@ -8,7 +8,7 @@ import { getGetCategoriesQueryOptions } from '@/types/generated/category';
 import { getGetStoriesQueryOptions } from '@/types/generated/story';
 import { CategoryListResponse } from '@/types/generated/strapi.schemas';
 
-import Home from '@/containers/home';
+import Globe from '@/containers/globe';
 
 export const metadata = {
   title: 'Impact sphere',
@@ -64,9 +64,10 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) {
 
 export default async function HomePage({ searchParams }: HomePageProps) {
   const dehydratedState = await prefetchQueries(searchParams);
+
   return (
     <Hydrate state={dehydratedState}>
-      <Home />
+      <Globe />
     </Hydrate>
   );
 }

client/src/app/(landing)/home/page.tsx

@@ -0,0 +1,5 @@
+import Home from '@/containers/home';
+
+export default function HomePage() {
+  return <Home />;
+}

client/src/components/ui/dialog.tsx

@@ -55,6 +55,35 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+const DialogContentHome = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-[498px] max-w-[45vw] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-t-2xl border border-gray-800 bg-[hsla(198,100%,14%,0.31)] leading-relaxed text-white shadow-lg backdrop-blur-2xl duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      <div className="">{children}</div>
+      <DialogPrimitive.Close
+        className={cn(
+          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute  right-1/2  top-0 -translate-y-1/2  translate-x-1/2 rounded-full border border-gray-800 bg-gray-900 p-4 px-4 py-2 opacity-100 backdrop-blur-lg transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none'
+        )}
+      >
+        <X className="h-6 w-6 fill-white" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+
+DialogContentHome.displayName = 'DialogContentHome';
+
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 );
@@ -100,4 +129,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  DialogContentHome,
 };

client/src/containers/home/categories/item.tsx → client/src/containers/globe/categories/item.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/classnames';
 
-import { useSyncCategory } from '@/store/home';
+import { useSyncCategory } from '@/store/globe';
 
 import { Category } from '@/types/generated/strapi.schemas';
 
@@ -10,7 +10,7 @@ import { TooltipTrigger, TooltipContent, Tooltip } from '@/components/ui/tooltip
 
 type CategoryProps = Pick<Category, 'name' | 'slug'>;
 
-const Category = ({ name, slug }: CategoryProps) => {
+const CategoryItem = ({ name, slug }: CategoryProps) => {
   const [category, setCategory] = useSyncCategory();
 
   const handleClick = (slug: string) => {
@@ -52,4 +52,4 @@ const Category = ({ name, slug }: CategoryProps) => {
   );
 };
 
-export default Category;
+export default CategoryItem;

client/src/containers/home/filters/index.tsx → client/src/containers/globe/filters/index.tsx

@@ -3,7 +3,7 @@ import { XIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
-import { filtersOpenAtom } from '@/store/home';
+import { filtersOpenAtom } from '@/store/globe';
 
 import { Button } from '@/components/ui/button';
 

client/src/containers/home/filters/item.tsx → client/src/containers/globe/filters/item.tsx

@@ -1,4 +1,4 @@
-import { useSyncFilters } from '@/store/home';
+import { useSyncFilters } from '@/store/globe';
 
 import { Button } from '@/components/ui/button';
 import { CheckboxButton } from '@/components/ui/checkbox-button';

client/src/containers/globe/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useSetAtom } from 'jotai';
+
+import { layersAtom, tmpBboxAtom } from '@/store/map';
+import { useSyncStep } from '@/store/stories';
+
+import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map';
+
+import Sidebar from '@/containers/globe/sidebar';
+
+import Card from '@/components/ui/card';
+import GradientLine from '@/components/ui/gradient-line';
+
+import Header from '../header';
+
+import Categories from './categories';
+import Dashboard from './dashboard';
+import { Filters } from './filters';
+import TopStories from './top-stories';
+
+export default function Home() {
+  const setTmpBbox = useSetAtom(tmpBboxAtom);
+  const setLayers = useSetAtom(layersAtom);
+  const { removeStep } = useSyncStep();
+
+  useEffect(() => {
+    const tmpbbox: [number, number, number, number] = DEFAULT_MAP_BBOX;
+    setTmpBbox({ bbox: tmpbbox, options: DEFAULT_MAP_STATE });
+  }, [setTmpBbox]);
+
+  useEffect(() => {
+    setLayers([]);
+    removeStep();
+  }, []);
+
+  return (
+    <div className="home text-primary flex h-screen w-screen flex-col justify-between overflow-y-hidden px-12">
+      <Header />
+      <Filters />
+      <div className="flex max-h-full flex-1 justify-between overflow-hidden pb-6 pt-12">
+        <Sidebar>
+          <div className="2xl:w-70 w-[280px]">
+            <Dashboard />
+          </div>
+        </Sidebar>
+        <div className="2xl:w-70 flex h-full w-[280px] flex-col">
+          <div className="flex max-h-[calc(100%-110px)] flex-col justify-between">
+            <Card title="Top stories" className="max-h-[calc(100%-33px)]">
+              <TopStories />
+            </Card>
+            <GradientLine />
+          </div>
+          <div className="h-fit">
+            <Card title="Programme Dashboard">
+              <a
+                target="_blank"
+                className="font-open-sans text-sm leading-snug"
+                href="https://lookerstudio.google.com/reporting/b6d8f54c-558e-48dc-bc79-a7eca193da6f/page/p_2ehvdzg47c"
+              >
+                Detailed report dashboard on ESA GDA programme.
+              </a>
+            </Card>
+          </div>
+        </div>
+      </div>
+      <div className="z-10">
+        <Categories />
+      </div>
+    </div>
+  );
+}

client/src/containers/header/about.tsx

@@ -0,0 +1,61 @@
+import Image from 'next/image';
+
+import { Dialog, DialogContentHome, DialogTrigger } from '@/components/ui/dialog';
+
+const About = () => {
+  return (
+    <Dialog>
+      <DialogTrigger className="text-sm font-bold uppercase tracking-widest">About</DialogTrigger>
+      <DialogContentHome>
+        <div className="space-y-4 p-10">
+          <div className="font-notes items-start justify-start text-2xl font-bold leading-9 text-white">
+            About the Impact Sphere
+          </div>
+          <div className="font-open-sans self-stretch text-base font-normal leading-normal text-white">
+            Lorem ipsum dolor sit amet consectetur. Commodo nulla interdum felis semper augue
+            adipiscing. Massa elementum id venenatis viverra. Non lectus aliquam turpis at. Gravida
+            enim suscipit aliquet erat imperdiet luctus gravida pellentesque. Diam urna amet
+            habitasse sed eget semper pellentesque malesuada. Turpis.
+          </div>
+          <div className="inline-flex items-start justify-center gap-2 self-stretch">
+            <div className="inline-flex w-[418px] flex-col items-start justify-start gap-1">
+              <div className="inline-flex items-center justify-start gap-1">
+                <div className="font-notes text-sm font-bold uppercase leading-[21px] tracking-wide text-slate-400">
+                  contatcs
+                </div>
+              </div>
+              <div>
+                <a
+                  className="font-open-sans self-stretch text-base font-normal leading-normal text-white underline"
+                  href="mailto:[email protected]"
+                >
+                  [email protected]
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end space-x-3">
+            <a href="https://gda.esa.int/" target="_blank" rel="noreferrer">
+              <Image
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logos/GDA-logo.png`}
+                alt="Impact Sphere"
+                width={50}
+                height={50}
+              />
+            </a>
+            <a href="https://www.esa.int/" target="_blank" rel="noreferrer">
+              <Image
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logos/esa-logo.png`}
+                alt="Impact Sphere"
+                width={69}
+                height={32}
+              />
+            </a>
+          </div>
+        </div>
+      </DialogContentHome>
+    </Dialog>
+  );
+};
+
+export default About;

client/src/containers/header/header-link.tsx

@@ -0,0 +1,19 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const HeaderLink = () => {
+  const pathname = usePathname();
+
+  const link = pathname.includes('/landing')
+    ? { name: 'About', href: '/about' }
+    : { name: 'About', href: '/about' };
+
+  return (
+    <Link href={link.href} className="text-sm font-bold uppercase tracking-widest">
+      {link.name}
+    </Link>
+  );
+};
+
+export default HeaderLink;