feat-resources

src/app/resources/assort/page.tsx

@@ -1,11 +1,126 @@
-import PageTitle from "@/components/pageTitle";
-import Assort from "./assort";
+import { Flex, Heading, Separator, Text } from "@radix-ui/themes";
+import Image from "next/image";
+import { PageTitle } from "@/components/resources/assort/PageTitle";
+import { AboutAssort } from "@/components/resources/assort/AboutAssort";
+import { SortingControl } from "@/components/resources/assort/SortingControl";
+import { Guide } from "@/components/resources/assort/Guide";
+import { ResourceRedirect } from "@/components/resources/assort/ResourceRedirect";
+import { ResourcesFooter } from "@/components/resources/assort/ResourcesFooter";
+
+const data = [
+  {
+    title: "Quality Control",
+    description:
+      "The receiver may have to pay to dispose of items that are culturally inappropriate, out of season, or poor in quality.",
+    src: "/images/resources/Vector.png",
+  },
+  {
+    title: "Sorting",
+    description:
+      "100,000 aid items on a shipment might be sorted one way by the sender and then re-sorted another way by the receiver. Sorting takes time.",
+    src: "/images/resources/Vector (1).png",
+  },
+];
 
 const page = () => {
   return (
     <section>
-      <PageTitle title="RESOURCES" bgColor="brown-600" />
-      <Assort />
+      <PageTitle title="RESOURCES" bgColor="navy-900" textColor="white" />
+      <AboutAssort color="navy-900" />
+      <Flex
+        gap={{ md: "124px", initial: "6" }}
+        mx={{ md: "9", initial: "3" }}
+        align="center"
+        direction={{ md: "row", initial: "column" }}
+        justify="between"
+      >
+        <SortingControl
+          title={data[0].title}
+          description={data[0].description}
+          src="/images/resources/resources_qualitycontrol.png"
+        />
+        <Separator
+          orientation="vertical"
+          className="h-auto self-stretch hidden md:block"
+        />
+        <SortingControl
+          title={data[1].title}
+          description={data[1].description}
+          src="/images/resources/resources_sorting.png"
+        />
+      </Flex>
+      <Separator
+        orientation="horizontal"
+        className="w-auto mx-16 my-3 lg:block hidden"
+      />
+      <Flex
+        mx={{ md: "9", initial: "3" }}
+        gap="3"
+        className="text-navy-800"
+        direction="column"
+        align="center"
+        my="8"
+      >
+        <Text size="5" align="center">
+          ASSORT leads to faster, cheaper, and more responsive aid. By providing
+          a “common language” for aid donations, organisations receiving aid can
+          know ahead of time what is on an aid shipment.
+        </Text>
+        <Image
+          src="/images/resources/arrow-down.png"
+          alt="ASSORT"
+          width={22}
+          height={38}
+        />
+        <Text size="4" align="center">
+          When the shipment arrives, they process it much faster than they
+          otherwise could. Indeed, a pilot shipment showed that using ASSORT
+          standards significantly cut down on the receiving organisation’s
+          sorting and processing time. Saving time and volunteer capacity makes
+          a big difference for grassroots aid organisations.
+        </Text>
+      </Flex>
+      <Flex
+        mx={{ md: "9", initial: "2" }}
+        gap={{ initial: "4", md: "0" }}
+        className="text-navy-800"
+        direction={{ md: "row", initial: "column" }}
+        align="center"
+        my="8"
+      >
+        <Guide />
+        <Image
+          src="/images/resources/resources_guide.png"
+          alt="ASSORT"
+          width={548}
+          height={282}
+        />
+      </Flex>
+      <Heading
+        align="left"
+        size="6"
+        className="text-navy-900"
+        mx={{ md: "9", initial: "3" }}
+      >
+        ASSORT was established as part of a joint partnership between{" "}
+        <ResourceRedirect text="Boxtribute" link="www.boxtribute.org" />,{" "}
+        <ResourceRedirect link="www.distributeaid.org" text="Distribute Aid" />,{" "}
+        <ResourceRedirect link="www.hermine.global" text="HERMINE" />, and the{" "}
+        <ResourceRedirect
+          text="InterEuropean Human Aid Association"
+          link="www.iha.help"
+        />
+      </Heading>
+      <Flex
+        direction="column"
+        align="center"
+        className="bg-red-50"
+        mt={{ md: "9", initial: "7" }}
+        py="43px"
+        px={{ initial: "3", md: "9" }}
+      >
+        <ResourcesFooter />
+      </Flex>
     </section>
   );
 };

src/components/resources/assort/AboutAssort.tsx

@@ -0,0 +1,27 @@
+import { Flex, Heading, Text } from "@radix-ui/themes";
+
+const heading = "About ASSORT";
+
+const description =
+  "The Aid Standards for Sorting (ASSORT) are a set of interoperability standards for humanitarian aid that are designed to save grassroots organisations time, effort, and money.";
+
+export const AboutAssort = ({ color }: { color: string }) => {
+  return (
+    <Flex
+      justify="center"
+      align="center"
+      className={`text-${color}`}
+      direction="column"
+      gap="5"
+      my="5"
+      mx={{ md: "9", initial: "2" }}
+    >
+      <Heading size="8" align="center">
+        {heading}
+      </Heading>
+      <Text align="center" size="5">
+        {description}
+      </Text>
+    </Flex>
+  );
+};

src/components/resources/assort/Guide.tsx

@@ -0,0 +1,41 @@
+import { Box, Flex, Separator, Table, Text } from "@radix-ui/themes";
+
+const data = [
+  "How to quality check donated items meant for distribution;",
+  "How to sort donations into standard categories;",
+  "How to size clothing donations with a printable ASSORT sizing chart;",
+  "How to box and label the sorted donations and ready them for shipment.",
+];
+
+export const Guide = () => {
+  return (
+    <Flex
+      direction="column"
+      className="bg-gray-50"
+      width="100%"
+      mx={{ initial: "2", xs: "0" }}
+      p="1"
+    >
+      <Text size="5" className="p-3">
+        The ASSORT Guide includes multiple areas of standardisation:
+      </Text>
+      <Separator
+        orientation="horizontal"
+        className="w-full self-stretch mt-1"
+      />
+      {data.map((item, index) => (
+        <Box key={index}>
+          <li className="p-3">
+            <Text size="4">{item}</Text>
+          </li>
+          {index !== data.length - 1 && (
+            <Separator
+              orientation="horizontal"
+              className="w-full self-stretch mt-1"
+            />
+          )}
+        </Box>
+      ))}
+    </Flex>
+  );
+};

src/components/pageTitle.tsx → src/components/resources/assort/PageTitle.tsx

@@ -1,16 +1,15 @@
 interface PageTitleProps {
   title: string;
   bgColor: string;
+  textColor: string;
 }
 
-const PageTitle = ({ title, bgColor }: PageTitleProps) => {
+export const PageTitle = ({ textColor, title, bgColor }: PageTitleProps) => {
   return (
     <div className={`bg-${bgColor} py-8 text-center`}>
-      <h1 className="text-dark-blue uppercase font-extrabold text-5xl">
+      <h1 className={`text-${textColor} uppercase font-extrabold text-5xl`}>
         {title}
       </h1>
     </div>
   );
 };
-
-export default PageTitle;

src/components/resources/assort/ResourceRedirect.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@radix-ui/themes";
+import React from "react";
+
+interface ResourceRedirectProps {
+  link: string;
+  text: string;
+}
+
+export const ResourceRedirect: React.FC<ResourceRedirectProps> = ({
+  link,
+  text,
+}) => {
+  return (
+    <Link href={`https://${link}`} className="text-inherit " underline="always">
+      {text}
+    </Link>
+  );
+};