feat-resources

src/app/resources/assort/page.tsx

@@ -1,11 +1,130 @@
-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" />
+      <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/Vector.png"
+        />
+        <Separator
+          orientation="vertical"
+          className="h-auto self-stretch hidden md:block"
+        />
+        <SortingControl
+          title={data[1].title}
+          description={data[1].description}
+          src="/images/resources/Vector (1).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/Vector (2).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/unsplash_vZJdYl5JVXY.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="boxtribute.ord" />,{" "}
+        <ResourceRedirect link="distributeaid.org" text="Distribute Aid" />,{" "}
+        <ResourceRedirect link="hermine.global" text="HERMINE" />, and the{" "}
+        <ResourceRedirect text="InterEuropean Human Aid" link="iha.help" />{" "}
+        Association.
+      </Heading>
+      <Flex
+        gap={{ initial: "4", md: "8" }}
+        direction="column"
+        align="center"
+        className="bg-red-50"
+        mt={{ md: "9", initial: "7" }}
+        py="43px"
+        px={{ initial: "3", md: "9" }}
+      >
+        <ResourcesFooter />
+        <Text>
+          If you are an organisation intending to adopt the standards, we
+          strongly encourage you to fill out this form to receive updates when
+          revised versions of the standards come out: Stay Up To Date!
+        </Text>
+      </Flex>
     </section>
   );
 };

src/app/tech/page.tsx

@@ -1,4 +1,4 @@
-import PageTitle from "../../components/pageTitle";
+import { PageTitle } from "../../components/resources/assort/PageTitle";
 import Tech from "./tech";
 
 const page = () => {

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,31 @@
+import { 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 (
+    <Table.Root size="3" className="bg-gray-50 w-full">
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell p="4">
+            <Text size="5">
+              The ASSORT Guide includes multiple areas of standardisation:
+            </Text>
+          </Table.Cell>
+        </Table.Row>
+        {data.map((item, index) => (
+          <Table.Row key={index}>
+            <Table.Cell p="4">
+              <li>{item}</li>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};

src/components/resources/assort/PageTitle.tsx

@@ -0,0 +1,22 @@
+import { Flex, Heading } from "@radix-ui/themes";
+
+interface PageTitleProps {
+  title: string;
+  bgColor: string;
+}
+
+export const PageTitle = ({ title, bgColor }: PageTitleProps) => {
+  return (
+    <Flex
+      height="100px"
+      className={`bg-${bgColor}`}
+      direction="column"
+      justify="center"
+      align="center"
+    >
+      <Heading size="9" className="text-white">
+        {title}
+      </Heading>
+    </Flex>
+  );
+};