Merge pull request #823 from Vizzuality/LET-1428-fe-implement-the-des…

…ign-changes-including-the-new-organizations

[LET-1428][FE] implement the design changes including the new organizations

frontend/containers/about/our-allies/component.tsx

@@ -0,0 +1,65 @@
+import { FormattedMessage } from 'react-intl';
+
+import cx from 'classnames';
+
+import Image from 'next/image';
+
+import { useAlliesLogos, useSupportedByLogos } from './data';
+
+export const OurAllies = () => {
+  const alliesLogos = useAlliesLogos();
+  const supportedByLogos = useSupportedByLogos();
+
+  return (
+    <div className="text-center">
+      <div>
+        <h2 className="font-serif text-3xl font-bold md:text-4xl">
+          <FormattedMessage defaultMessage="Our allies" id="SmmWBo" />
+        </h2>
+        <div className="flex flex-col mt-8">
+          {alliesLogos.map((row, idx) => {
+            return (
+              <div
+                key={idx}
+                className={cx({
+                  'flex flex-wrap items-center justify-center gap-6': true,
+                  'mb-8': idx === 0,
+                })}
+              >
+                {row.map((logo) => {
+                  return (
+                    <span key={logo.src}>
+                      <Image
+                        src={logo.src}
+                        width={logo.width}
+                        height={logo.height}
+                        alt={logo.alt}
+                      />
+                    </span>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="mt-16">
+        <h3 className="font-serif text-2xl font-bold md:text-3xl">
+          <FormattedMessage defaultMessage="Supported by" id="oA5Cj7" />
+        </h3>
+        <div className="flex flex-col mt-8">
+          <div className="flex flex-wrap items-center justify-center gap-6">
+            {supportedByLogos.map((logo) => {
+              return (
+                <span key={logo.src}>
+                  <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
+                </span>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default OurAllies;

frontend/containers/about/our-allies/data.ts

@@ -0,0 +1,233 @@
+import { useMemo } from 'react';
+
+import { useIntl } from 'react-intl';
+
+export const useAlliesLogos = () => {
+  const { formatMessage } = useIntl();
+
+  return useMemo(
+    () => [
+      // ROW 1
+      [
+        {
+          src: '/images/logos/allies-heco.png',
+          alt: formatMessage({ defaultMessage: 'Herencia Colombia', id: 'nZhcAT' }),
+          width: 214,
+          height: 150,
+        },
+      ],
+      // ROW 2
+      [
+        {
+          src: '/images/logos/allies-presidencia-colombia.png',
+          alt: formatMessage({ defaultMessage: 'Presidencia de Colombia', id: 'xxILzE' }),
+          width: 162,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-ministerior-ambiente.png',
+          alt: formatMessage({
+            defaultMessage: 'Ministerio de ambiente y desarrollo sostenible',
+            id: 'ko1LXm',
+          }),
+          width: 183,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-departamento-nacional-planeacion.png',
+          alt: formatMessage({
+            defaultMessage: 'Departamiento Nacional de Planeacion',
+            id: 'hSzbKu',
+          }),
+          width: 256,
+          height: 80,
+        },
+      ],
+      // ROW 3
+      [
+        {
+          src: '/images/logos/allies-parques-nacionales-naturales.png',
+          alt: formatMessage({
+            defaultMessage: 'Unidad Administrativa de Parques Nacionales Naturales de Colombia',
+            id: '3rQrSS',
+          }),
+          width: 150,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-patrimonio-natural.png',
+          alt: formatMessage({
+            defaultMessage: 'Patrimonio Natural',
+            id: 'orvj8F',
+          }),
+          width: 114,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-gordon-betty-moore.png',
+          alt: formatMessage({
+            defaultMessage: 'Gordon and Betty Moore Foundation',
+            id: 'P8c19Y',
+          }),
+          width: 114,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-ci-colombia.png',
+          alt: formatMessage({
+            defaultMessage: 'Conservation International',
+            id: '/HOZmK',
+          }),
+          width: 80,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-wcs.png',
+          alt: formatMessage({
+            defaultMessage: 'Wildlife Conservation Society',
+            id: 'UgHwIR',
+          }),
+          width: 84,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-wwf.png',
+          alt: formatMessage({
+            defaultMessage: 'World Wildlife Fund',
+            id: 'V7dSXH',
+          }),
+          width: 64,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-andes-amazon-fund.png',
+          alt: formatMessage({
+            defaultMessage: 'Andes Amazon Fund',
+            id: 'sFd7gz',
+          }),
+          width: 53,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-the-nature-conservancy.png',
+          alt: formatMessage({
+            defaultMessage: 'The Nature Conservancy',
+            id: 'MStfWd',
+          }),
+          width: 160,
+          height: 80,
+        },
+        {
+          src: '/images/logos/allies-bezos-earth-fund.png',
+          alt: formatMessage({
+            defaultMessage: 'Bezos Earth Fund',
+            id: 'FDU8fT',
+          }),
+          width: 122,
+          height: 80,
+        },
+      ],
+    ],
+    [formatMessage]
+  );
+};
+
+export const useSupportedByLogos = () => {
+  const { formatMessage } = useIntl();
+
+  return useMemo(
+    () => [
+      {
+        src: '/images/logos/supported-by-volo-foundation.png',
+        alt: formatMessage({
+          defaultMessage: 'Volo Fundation',
+          id: 'bovYQa',
+        }),
+        width: 59,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-bobolink-fundacion.png',
+        alt: formatMessage({
+          defaultMessage: 'Bobolink Fundacion',
+          id: 'fgdxhB',
+        }),
+        width: 59,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-global-environment-facility.png',
+        alt: formatMessage({
+          defaultMessage: 'Global environment facility',
+          id: 'idE0oW',
+        }),
+        width: 122,
+        height: 54,
+      },
+      {
+        src: '/images/logos/supported-by-un-development-programme.png',
+        alt: formatMessage({
+          defaultMessage: 'United Nations Development Programme',
+          id: 'Pmm0Xv',
+        }),
+        width: 51,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-the-world-bank.png',
+        alt: formatMessage({
+          defaultMessage: 'The World Bank',
+          id: 'QkxMUG',
+        }),
+        width: 98,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-eu.png',
+        alt: formatMessage({
+          defaultMessage: 'European Union',
+          id: 'eRRmEa',
+        }),
+        width: 58,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-fao-un.png',
+        alt: formatMessage({
+          defaultMessage: 'Food and Agriculture Organization of the United Nations - FAO',
+          id: 'shhSYM',
+        }),
+        width: 242,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-trillion-trees.png',
+        alt: formatMessage({
+          defaultMessage: 'Trillion Trees',
+          id: '3PNhOL',
+        }),
+        width: 123,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-bid.png',
+        alt: formatMessage({
+          defaultMessage: 'Inter American Development Bank',
+          id: 'I8phsw',
+        }),
+        width: 94,
+        height: 56,
+      },
+      {
+        src: '/images/logos/supported-by-green-climate-fund.png',
+        alt: formatMessage({
+          defaultMessage: 'Green Climate Fund',
+          id: 'IKpwpU',
+        }),
+        width: 92,
+        height: 56,
+      },
+    ],
+    [formatMessage]
+  );
+};

frontend/containers/about/our-allies/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

frontend/containers/about/our-partners/card/component.tsx

@@ -0,0 +1,47 @@
+import { FC, useState } from 'react';
+
+import Image from 'next/image';
+
+import { motion } from 'framer-motion';
+
+import type { OurPartnersCardProps } from './types';
+
+export const OurPartnersCard: FC<OurPartnersCardProps> = ({
+  logo,
+  children,
+  defaultOpen = false,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+
+  const handleCardClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <button
+      type="button"
+      className="py-6 px-4 bg-background-middle rounded-2xl focus-visible:outline focus-visible:outline-green-dark focus-visible:outline-2 focus-visible:outline-offset-2"
+      onClick={handleCardClick}
+    >
+      <div className="text-center">
+        <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
+      </div>
+      {children && (
+        <motion.div
+          className="overflow-hidden"
+          initial={isOpen ? 'open' : 'closed'}
+          animate={isOpen ? 'open' : 'closed'}
+          transition={{ bounce: 0, duration: 0.1 }}
+          variants={{
+            open: { height: 'auto', visibility: 'visible' },
+            closed: { height: 0, visibility: 'hidden' },
+          }}
+        >
+          <p className="mt-3 sm:mt-6">{children}</p>
+        </motion.div>
+      )}
+    </button>
+  );
+};
+
+export default OurPartnersCard;

frontend/containers/about/our-partners/card/index.ts

@@ -0,0 +1,2 @@
+export type { OurPartnersCardProps } from './types';
+export { default } from './component';

frontend/containers/about/our-partners/card/types.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+export type OurPartnersCardProps = PropsWithChildren<{
+  /* Logo to display */
+  logo: {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+  /* Whether the card defaults to an open state */
+  defaultOpen?: boolean;
+}>;