2023-06-20 07:49:52 +00:00
|
|
|
|
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
|
2023-02-13 13:46:56 +00:00
|
|
|
|
import { useTranslate } from "react-polyglot";
|
|
|
|
|
|
import Head from "next/head";
|
2023-05-25 12:37:14 +00:00
|
|
|
|
import Image from "next/legacy/image";
|
2023-02-13 13:46:56 +00:00
|
|
|
|
import Link from "next/link";
|
|
|
|
|
|
import { Grid, Container, Box, Button } from "@mui/material";
|
|
|
|
|
|
import { Layout } from "components/Layout";
|
|
|
|
|
|
import { useAppContext } from "components/AppProvider";
|
|
|
|
|
|
import { PageHeader } from "components/PageHeader";
|
|
|
|
|
|
import { AboutFeature } from "components/AboutFeature";
|
|
|
|
|
|
import { AboutBox } from "components/AboutBox";
|
|
|
|
|
|
import AbstractDiagram from "images/abstract-diagram.png";
|
|
|
|
|
|
import AboutHeader from "images/about-header.png";
|
|
|
|
|
|
import Globe from "images/globe.png";
|
|
|
|
|
|
import Controls from "images/controls.png";
|
|
|
|
|
|
import CommunityBackground from "images/community-background.png";
|
|
|
|
|
|
import Bicycle from "images/bicycle.png";
|
2023-06-20 07:49:52 +00:00
|
|
|
|
import { getEmbedded } from "lib/utils";
|
2023-02-13 13:46:56 +00:00
|
|
|
|
|
2023-06-20 07:49:52 +00:00
|
|
|
|
type AboutProps = {
|
|
|
|
|
|
embedded: boolean;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const About: NextPage<AboutProps> = ({ embedded }) => {
|
2023-02-13 13:46:56 +00:00
|
|
|
|
const t = useTranslate();
|
|
|
|
|
|
const {
|
|
|
|
|
|
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
|
|
|
|
|
|
typography: { h1, h4, p },
|
|
|
|
|
|
} = useAppContext();
|
2023-06-20 07:49:52 +00:00
|
|
|
|
|
2023-02-13 13:46:56 +00:00
|
|
|
|
return (
|
2023-06-20 07:49:52 +00:00
|
|
|
|
<Layout embedded={embedded}>
|
2023-02-13 13:46:56 +00:00
|
|
|
|
<Head>
|
|
|
|
|
|
<title>Digital Threat Dashboard – Leafcutter</title>
|
|
|
|
|
|
</Head>
|
|
|
|
|
|
<PageHeader
|
|
|
|
|
|
backgroundColor={leafcutterElectricBlue}
|
|
|
|
|
|
sx={{
|
|
|
|
|
|
backgroundImage: `url(${AboutHeader.src})`,
|
|
|
|
|
|
backgroundSize: "200px",
|
|
|
|
|
|
backgroundPosition: "bottom right",
|
|
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<Grid
|
|
|
|
|
|
container
|
|
|
|
|
|
direction="row"
|
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
|
alignItems="center"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Grid item xs={9}>
|
|
|
|
|
|
<Box component="h1" sx={h1}>
|
|
|
|
|
|
{t("aboutLeafcutterTitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
|
|
|
|
|
|
{t("aboutLeafcutterDescription")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</PageHeader>
|
|
|
|
|
|
<Container maxWidth="lg">
|
|
|
|
|
|
<AboutFeature
|
|
|
|
|
|
title={t("whatIsLeafcutterTitle")}
|
|
|
|
|
|
description={t("whatIsLeafcutterDescription")}
|
|
|
|
|
|
direction="row"
|
|
|
|
|
|
image={AbstractDiagram}
|
|
|
|
|
|
showBackground={false}
|
|
|
|
|
|
textColumns={8}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<AboutFeature
|
|
|
|
|
|
title={t("whatIsItForTitle")}
|
|
|
|
|
|
description={t("whatIsItForDescription")}
|
|
|
|
|
|
direction="row-reverse"
|
|
|
|
|
|
image={Controls}
|
|
|
|
|
|
showBackground
|
|
|
|
|
|
textColumns={8}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<AboutFeature
|
|
|
|
|
|
title={t("whoCanUseItTitle")}
|
|
|
|
|
|
description={t("whoCanUseItDescription")}
|
|
|
|
|
|
direction="row"
|
|
|
|
|
|
image={Globe}
|
|
|
|
|
|
showBackground
|
|
|
|
|
|
textColumns={6}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Container>
|
|
|
|
|
|
<AboutBox backgroundColor={cdrLinkOrange}>
|
|
|
|
|
|
<Box component="h4" sx={{ ...h4, mt: 0 }}>
|
|
|
|
|
|
{t("whereDataComesFromTitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
{t("whereDataComesFromDescription")
|
|
|
|
|
|
.split("\n")
|
|
|
|
|
|
.map((line: string, i: number) => (
|
|
|
|
|
|
<Box component="p" key={i} sx={p}>
|
|
|
|
|
|
{line}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
))}
|
|
|
|
|
|
</AboutBox>
|
|
|
|
|
|
<AboutBox backgroundColor={leafcutterElectricBlue}>
|
|
|
|
|
|
<Box component="h4" sx={{ ...h4, mt: 0 }}>
|
|
|
|
|
|
{t("projectSupportTitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
{t("projectSupportDescription")
|
|
|
|
|
|
.split("\n")
|
|
|
|
|
|
.map((line: string, i: number) => (
|
|
|
|
|
|
<Box component="p" key={i} sx={p}>
|
|
|
|
|
|
{line}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
))}
|
|
|
|
|
|
</AboutBox>
|
|
|
|
|
|
<Box
|
|
|
|
|
|
sx={{
|
|
|
|
|
|
backgroundImage: `url(${CommunityBackground.src})`,
|
|
|
|
|
|
backgroundSize: "90%",
|
|
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
|
|
backgroundPosition: "center",
|
|
|
|
|
|
position: "relative",
|
|
|
|
|
|
height: "700px",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<Box sx={{ position: "absolute", left: 0, bottom: -20, width: 300 }}>
|
|
|
|
|
|
<Image src={Bicycle} alt="" />
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
<Container
|
|
|
|
|
|
maxWidth="md"
|
|
|
|
|
|
sx={{ textAlign: "center", paddingTop: "280px" }}
|
|
|
|
|
|
>
|
|
|
|
|
|
<Box
|
|
|
|
|
|
component="h4"
|
|
|
|
|
|
sx={{ ...h4, maxWidth: 500, margin: "0 auto", mt: 3 }}
|
|
|
|
|
|
>
|
|
|
|
|
|
{t("interestedInLeafcutterTitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
{t("interestedInLeafcutterDescription")
|
|
|
|
|
|
.split("\n")
|
|
|
|
|
|
.map((line: string, i: number) => (
|
|
|
|
|
|
<Box
|
|
|
|
|
|
component="p"
|
|
|
|
|
|
key={i}
|
|
|
|
|
|
sx={{ ...p, maxWidth: 500, margin: "0 auto" }}
|
|
|
|
|
|
>
|
|
|
|
|
|
{line}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
))}
|
|
|
|
|
|
<Link href="mailto:info@digiresilience.org" passHref>
|
|
|
|
|
|
<Button
|
|
|
|
|
|
sx={{
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
borderRadius: 500,
|
|
|
|
|
|
color: white,
|
|
|
|
|
|
backgroundColor: cdrLinkOrange,
|
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
|
textTransform: "uppercase",
|
|
|
|
|
|
pl: 6,
|
|
|
|
|
|
pr: 5,
|
|
|
|
|
|
mt: 4,
|
|
|
|
|
|
":hover": {
|
|
|
|
|
|
backgroundColor: leafcutterElectricBlue,
|
|
|
|
|
|
color: white,
|
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
|
},
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
{t("contactUs")}
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
</Container>
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
</Layout>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default About;
|
2023-06-20 07:49:52 +00:00
|
|
|
|
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (
|
|
|
|
|
|
context: GetServerSidePropsContext
|
|
|
|
|
|
) => ({ props: { embedded: getEmbedded(context) } });
|
