Feature/home (#4)

Co-authored-by: Clément Prod'homme <[email protected]>
mongabay · Dec 1, 2023 · 72ca99d · 72ca99d
1 parent beacdf8
commit 72ca99d
Show file tree

Hide file tree

Showing 88 changed files with 8,877 additions and 3,620 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["plugin:prettier/recommended", "next/core-web-vitals"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.9.0
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,10 @@
+const config = {
+  semi: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+  printWidth: 100,
+  singleQuote: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};
+
+module.exports = config;
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,33 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: "svg-sprite-loader",
+        },
+        {
+          loader: "svgo-loader",
+          options: {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    convertColors: { shorthex: false },
+                    convertPathData: false,
+                  },
+                },
+              },
+            ],
+          },
+        },
+      ],
+    });
+    return config;
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@react-three/drei": "^9.88.5",
     "@react-three/fiber": "^8.15.5",
+    "classnames": "^2.3.2",
     "framer-motion": "^10.16.4",
     "framer-motion-3d": "^10.16.4",
     "glsl-easings": "^1.0.0",
@@ -19,7 +21,12 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
-    "three": "^0.157.0"
+    "svg-sprite-loader": "^6.0.11",
+    "svgo-loader": "^4.0.0",
+    "swr": "^2.2.4",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.157.0",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -29,8 +36,12 @@
     "autoprefixer": "^10",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "glslify-loader": "^2.0.0",
     "postcss": "^8",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "raw-loader": "^4.0.2",
     "tailwindcss": "^3",
     "typescript": "^5"

diff --git a/public/CNAME b/public/CNAME
@@ -0,0 +1 @@
+lab.mongabay.com
diff --git a/public/images/linkedin.svg b/public/images/linkedin.svg
diff --git a/public/images/mongabay-logo.png b/public/images/mongabay-logo.png
diff --git a/public/images/people/agnieszka-figiel-min.jpg b/public/images/people/agnieszka-figiel-min.jpg
diff --git a/public/images/people/agnieszka-figiel.jpg b/public/images/people/agnieszka-figiel.jpg
diff --git a/public/images/people/alexa-velez-min.jpg b/public/images/people/alexa-velez-min.jpg
diff --git a/public/images/people/alexa-velez.jpg b/public/images/people/alexa-velez.jpg
diff --git a/public/images/people/alicia-arenzana-min.jpg b/public/images/people/alicia-arenzana-min.jpg
diff --git a/public/images/people/alicia-arenzana.jpg b/public/images/people/alicia-arenzana.jpg
diff --git a/public/images/people/alvaro-leal-min.jpg b/public/images/people/alvaro-leal-min.jpg
diff --git a/public/images/people/alvaro-leal.jpg b/public/images/people/alvaro-leal.jpg
diff --git a/public/images/people/andres-alegria-min.jpg b/public/images/people/andres-alegria-min.jpg
diff --git a/public/images/people/andres-alegria.jpg b/public/images/people/andres-alegria.jpg
diff --git a/public/images/people/barbara-chaves-min.jpg b/public/images/people/barbara-chaves-min.jpg
diff --git a/public/images/people/barbara-chaves.jpg b/public/images/people/barbara-chaves.jpg
diff --git a/public/images/people/clement-prodhomme-min.jpg b/public/images/people/clement-prodhomme-min.jpg
diff --git a/public/images/people/clement-prodhomme.jpg b/public/images/people/clement-prodhomme.jpg
diff --git a/public/images/people/daniel-caso-min.jpg b/public/images/people/daniel-caso-min.jpg
diff --git a/public/images/people/daniel-caso.jpg b/public/images/people/daniel-caso.jpg
diff --git a/public/images/people/iker-requerrey-min.jpg b/public/images/people/iker-requerrey-min.jpg
diff --git a/public/images/people/iker-requerrey.jpg b/public/images/people/iker-requerrey.jpg
diff --git a/public/images/people/morgan-erickson-davis-min.jpg b/public/images/people/morgan-erickson-davis-min.jpg
diff --git a/public/images/people/morgan-erickson-davis.jpg b/public/images/people/morgan-erickson-davis.jpg
diff --git a/public/images/people/pablo-urrutia-min.jpg b/public/images/people/pablo-urrutia-min.jpg
diff --git a/public/images/people/pablo-urrutia.jpg b/public/images/people/pablo-urrutia.jpg
diff --git a/public/images/people/teona-teodorescu-min.jpg b/public/images/people/teona-teodorescu-min.jpg
diff --git a/public/images/people/teona-teodorescu.jpg b/public/images/people/teona-teodorescu.jpg
diff --git a/public/images/people/tiago-garcia-min.jpg b/public/images/people/tiago-garcia-min.jpg
diff --git a/public/images/people/tiago-garcia.jpg b/public/images/people/tiago-garcia.jpg
diff --git a/public/images/people/willie-shubert-min.jpg b/public/images/people/willie-shubert-min.jpg
diff --git a/public/images/people/willie-shubert.jpg b/public/images/people/willie-shubert.jpg
diff --git a/public/images/tools/fire-drought-data.png b/public/images/tools/fire-drought-data.png
diff --git a/public/images/tools/reforestation-app.png b/public/images/tools/reforestation-app.png
diff --git a/public/images/tools/satellite.png b/public/images/tools/satellite.png
diff --git a/public/images/tools/supply-chain.png b/public/images/tools/supply-chain.png
diff --git a/public/images/trase-logo.png b/public/images/trase-logo.png
diff --git a/public/images/vizzuality-logo.png b/public/images/vizzuality-logo.png
diff --git a/public/images/wri-logo.png b/public/images/wri-logo.png
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/icon.png b/src/app/icon.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,24 +1,20 @@
-import type { Metadata } from "next";
-import { Open_Sans, Cardo } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Open_Sans, Cardo } from 'next/font/google';
+import './globals.css';
 
-const open = Open_Sans({ subsets: ["latin"], variable: "--font-open" });
+const open = Open_Sans({ subsets: ['latin'], variable: '--font-open' });
 const cardo = Cardo({
-  weight: ["400"],
-  subsets: ["latin"],
-  variable: "--font-cardo",
+  weight: ['400'],
+  subsets: ['latin'],
+  variable: '--font-cardo',
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${open.variable} ${cardo.variable}`}>
       <body>{children}</body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,25 @@
-import Intro from "@/containers/intro";
+import Blog from '@/containers/blog';
+import Footer from '@/containers/footer';
+import Header from '@/containers/header';
+import Intro from '@/containers/intro';
+import Partners from '@/containers/partners';
+import Tools from '@/containers/tools';
 
-export default function Home() {
+export const metadata = {
+  title: 'Data Journalism Tools',
+  description:
+    'A suite of no-code vizualization tools designed for journalists to create stories backed by reliable data sources.',
+};
+
+export default async function Home() {
   return (
-    <main className="min-h-screen bg-white">
+    <main className="max-w-[100vw] overflow-x-hidden bg-white">
+      <Header />
       <Intro />
-
-      <div className="h-[500vh]"></div>
+      <Tools />
+      <Blog />
+      <Partners />
+      <Footer />
     </main>
   );
 }
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -0,0 +1,37 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import cx from 'classnames';
+
+const BUTTON_TYPE = {
+  PRIMARY: 'bg-primary',
+  SECONDARY: 'bg-secondary',
+};
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {};
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {};
+
+const Button = ({ children, className, ...props }: ButtonProps | AnchorProps) => {
+  const buttonProps = props as ButtonProps;
+  const aProps = props as AnchorProps;
+
+  const c = cx(
+    'inline-block rounded-3xl px-5 py-2.5 focus-visible:outline-primary-green focus-visible:outline-offset-4',
+    className,
+    buttonProps.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+  );
+
+  if (aProps.href) {
+    return (
+      <a href={aProps.href} className={c} target="_blank" rel="noopener noreferrer" {...aProps}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" className={c} {...buttonProps}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import { CSSProperties } from 'react';
+
+interface BrowserSpriteSymbol {
+  id: string;
+  viewBox: string;
+  content: string;
+  node: SVGSymbolElement;
+}
+
+export interface IconProps {
+  icon?:
+    | {
+        id: string;
+        viewBox: string;
+      }
+    | BrowserSpriteSymbol;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const Icon = ({ icon, className, style }: IconProps) => (
+  <svg
+    className={cx({
+      'fill-current': true,
+      [className as string]: !!className,
+    })}
+    viewBox={icon?.viewBox || '0 0 32 32'}
+    style={style}
+  >
+    <use xlinkHref={`#${icon?.id}`} />
+  </svg>
+);
+
+export default Icon;
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -0,0 +1,48 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import Icon from '../icon';
+import XIcon from '@/styles/icons/x.svg?sprite';
+import cx from 'classnames';
+
+type ModalProps = {
+  title?: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  className?: string;
+};
+
+const Modal = ({
+  title = '',
+  children,
+  open = false,
+  onOpenChange,
+  className,
+  size = 'md',
+}: ModalProps) => (
+  <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+      <Dialog.Overlay className="DialogOverlay" />
+      <Dialog.Content
+        className={cx('transition-opacity duration-300', className, {
+          'fixed left-0 top-0 flex h-screen w-screen flex-col': size === 'full',
+        })}
+      >
+        <Dialog.Title className="DialogTitle sr-only">{title}</Dialog.Title>
+        <Dialog.Content className="container !pointer-events-auto relative h-full overflow-y-auto py-14 focus-visible:outline-none">
+          <Dialog.Close asChild>
+            <button
+              className="absolute right-9 top-9 flex h-8 w-8 items-center justify-center rounded-full bg-white hover:opacity-70"
+              aria-label="Close"
+            >
+              <Icon className="h-5 w-5 fill-dark-gray" icon={XIcon} />
+            </button>
+          </Dialog.Close>
+          {children}
+        </Dialog.Content>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default Modal;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -0,0 +1,61 @@
+import SatelliteIcon from '@/styles/icons/satellite.svg?sprite';
+import FireIcon from '@/styles/icons/fire.svg?sprite';
+import ReforestationIcon from '@/styles/icons/reforestation.svg?sprite';
+import SupplyIcon from '@/styles/icons/supply.svg?sprite';
+
+export const COLORS = ['#03755E', '#184B95', '#A01200', '#7E56D8'];
+
+export const TOOLS = [
+  {
+    id: 'satellite',
+    title: 'Satellite',
+    description:
+      'Seeing patterns of planetary change is profound. Combine environmental, social, and satellite data aggregated from various reputable sources to create maps that add evidence and context to articles quickly.',
+    color: COLORS[1],
+    image: '/images/tools/satellite.png',
+    imageWidth: 596,
+    imageHeight: 522,
+    name: 'Satellite Tool',
+    url: 'https://maps.mongabay.com',
+    icon: SatelliteIcon,
+  },
+  {
+    id: 'fire',
+    title: 'Fire Drought',
+    description:
+      'Find shared stories of climate impact. Reveal and compare the annual cycles of fire on land and water in the atmosphere at national and sub-national scales.',
+    color: COLORS[2],
+    image: '/images/tools/fire-drought-data.png',
+    imageWidth: 596,
+    imageHeight: 482,
+    name: 'Fire Drought',
+    url: 'https://charts.mongabay.com',
+    icon: FireIcon,
+  },
+  {
+    id: 'reforestation',
+    title: 'Reforestation App',
+    description:
+      'Mongabay’s global directory of reforestation and tree-planting projects is a starting point for people wanting to learn how to support reforestation.',
+    color: COLORS[0],
+    image: '/images/tools/reforestation-app.png',
+    imageWidth: 662,
+    imageHeight: 454,
+    name: 'Reforestation App',
+    url: 'https://reforestation.app',
+    icon: ReforestationIcon,
+  },
+  {
+    id: 'supply',
+    title: 'Supply Chain',
+    description:
+      'Agricultural commodities move globally and cause deforestation. Find, follow, and create maps of their trail with data from Trase.earth.',
+    color: COLORS[3],
+    image: '/images/tools/supply-chain.png',
+    imageWidth: 596,
+    imageHeight: 476,
+    name: 'Supply Chain',
+    url: 'https://chains.mongabay.com',
+    icon: SupplyIcon,
+  },
+];
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
     /node_modules
     /.pnp
     .pnp.js
+    .yarn
     # testing
     /coverage
@@ Expand Down @@