diff --git a/public/documents/assort_guidelines_v15.pdf b/public/documents/resources/assort_guidelines_v15.pdf similarity index 100% rename from public/documents/assort_guidelines_v15.pdf rename to public/documents/resources/assort_guidelines_v15.pdf diff --git a/public/documents/assort_sizing_chart_v6.pdf b/public/documents/resources/assort_sizing_chart_v6.pdf similarity index 100% rename from public/documents/assort_sizing_chart_v6.pdf rename to public/documents/resources/assort_sizing_chart_v6.pdf diff --git a/public/images/resources/Vector (1).png b/public/images/resources/Vector (1).png new file mode 100644 index 00000000..0ee77490 Binary files /dev/null and b/public/images/resources/Vector (1).png differ diff --git a/public/images/resources/Vector (2).png b/public/images/resources/Vector (2).png new file mode 100644 index 00000000..9a648690 Binary files /dev/null and b/public/images/resources/Vector (2).png differ diff --git a/public/images/resources/Vector.png b/public/images/resources/Vector.png new file mode 100644 index 00000000..c702e480 Binary files /dev/null and b/public/images/resources/Vector.png differ diff --git a/public/images/resources/unsplash_vZJdYl5JVXY.png b/public/images/resources/unsplash_vZJdYl5JVXY.png new file mode 100644 index 00000000..6d6251ac Binary files /dev/null and b/public/images/resources/unsplash_vZJdYl5JVXY.png differ diff --git a/src/app/resources/assort/assort.tsx b/src/app/resources/assort/assort.tsx deleted file mode 100644 index f0bc2222..00000000 --- a/src/app/resources/assort/assort.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import Link from "next/link"; - -const Assort = () => { - return ( -
-
-
-

- About ASSORT -

-
-

- 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. -

-

- When quality control and sorting are not standardised, - inefficiencies arise. These inefficiencies require significant - expenditure of resources: -

-
    -
  • - Quality Control - the receiver may have to pay to dispose of - items that are culturally inappropriate, out of season, or poor - in quality. -
    • -
  • - Sorting - 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. -
    • -
-
-
-

- - That’s where ASSORT comes in. - {" "} - 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. - 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. -

-

The ASSORT Guide includes multiple areas of standardisation:

-
    -
  • - 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. -
    • -
-
-
-

- ASSORT was established as part of a joint partnership between - - {" "} - - {" "} - Boxtribute - - , - - - {" "} - - {" "} - Distribute Aid - - , - - - {" "} - - {" "} - HERMINE - - , - - and the{" "} - - {" "} - - {" "} - InterEuropean Human Aid Association - - . - -

-
-
-
-

- Download -

-
- - Standards Guide - - - Sizing Chart - -

- 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 - - ! - -

-
-
-
-
- ); -}; - -export default Assort; diff --git a/src/app/resources/assort/page.tsx b/src/app/resources/assort/page.tsx index 9baa025b..df2cc74d 100644 --- a/src/app/resources/assort/page.tsx +++ b/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 (
- - + + + + + + + + + + + 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. + + ASSORT + + 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. + + + + + ASSORT + + + ASSORT was established as part of a joint partnership between + ,{" "} + ,{" "} + , and the{" "} + {" "} + Association. + + + + + 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! + +
); }; diff --git a/src/app/tech/page.tsx b/src/app/tech/page.tsx index 419db1fa..1b377632 100644 --- a/src/app/tech/page.tsx +++ b/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 = () => { diff --git a/src/components/pageTitle.tsx b/src/components/pageTitle.tsx deleted file mode 100644 index a268686b..00000000 --- a/src/components/pageTitle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -interface PageTitleProps { - title: string; - bgColor: string; -} - -const PageTitle = ({ title, bgColor }: PageTitleProps) => { - return ( -
-

- {title} -

-
- ); -}; - -export default PageTitle; diff --git a/src/components/resources/assort/AboutAssort.tsx b/src/components/resources/assort/AboutAssort.tsx new file mode 100644 index 00000000..e01c2aaa --- /dev/null +++ b/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 ( + + + {heading} + + + {description} + + + ); +}; diff --git a/src/components/resources/assort/Guide.tsx b/src/components/resources/assort/Guide.tsx new file mode 100644 index 00000000..6253b790 --- /dev/null +++ b/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 ( + + + + + + The ASSORT Guide includes multiple areas of standardisation: + + + + {data.map((item, index) => ( + + +
  • {item}
    • +     +     + ))} +     +     + ); +}; diff --git a/src/components/resources/assort/PageTitle.tsx b/src/components/resources/assort/PageTitle.tsx new file mode 100644 index 00000000..65d8db75 --- /dev/null +++ b/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 ( + + + {title} + + + ); +}; diff --git a/src/components/resources/assort/ResourceRedirect.tsx b/src/components/resources/assort/ResourceRedirect.tsx new file mode 100644 index 00000000..76ea02b4 --- /dev/null +++ b/src/components/resources/assort/ResourceRedirect.tsx @@ -0,0 +1,22 @@ +import { Link } from "@radix-ui/themes"; +import React from "react"; + +interface ResourceRedirectProps { + link: string; + text: string; +} + +export const ResourceRedirect: React.FC = ({ + link, + text, +}) => { + return ( + + {text} + + ); +}; diff --git a/src/components/resources/assort/ResourcesFooter.tsx b/src/components/resources/assort/ResourcesFooter.tsx new file mode 100644 index 00000000..c860c3bc --- /dev/null +++ b/src/components/resources/assort/ResourcesFooter.tsx @@ -0,0 +1,41 @@ +import { Button, Card, Flex, Link, Text } from "@radix-ui/themes"; + +const data = [ + { title: "Standards guide", link: "/documents/resources/assort_guidelines_v15.pdf" }, + { title: "Sizing Chart", link: "/documents/resources/assort_sizing_chart_v6.pdf" }, +]; + +export const ResourcesFooter = () => { + return ( + + {data.map((item, index) => ( + + + + {item.title} + + + + + + ))} + + ); +}; diff --git a/src/components/resources/assort/SortingControl.tsx b/src/components/resources/assort/SortingControl.tsx new file mode 100644 index 00000000..b7613c7d --- /dev/null +++ b/src/components/resources/assort/SortingControl.tsx @@ -0,0 +1,28 @@ +import { Flex, Heading, Text } from "@radix-ui/themes"; +import Image from "next/image"; + +interface SortingControlProps { + src: string; + title: string; + description: string; +} + +export const SortingControl = ({ + src, + title, + description, +}: SortingControlProps) => { + return ( + + {`${title}`} + {title} + {description} + + ); +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 2a13d5e4..1259c6de 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -89,6 +89,7 @@ const config: Config = { "dark-blue": "#09328b", "text-blue": "#224ba4", "green-10": "#E9FBFE", + "red-50":"#DFCDE8" }, fontFamily: { lato: ["lato", "sans-serif"],