sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

App directory #3

Browse source
This commit is contained in:
Darren Clarke 2023-06-28 10:52:23 +00:00 • committed by GitHub
parent 8bbeaa25cf
commit 69706053c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 69 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

164
apps/leafcutter/app/(main)/about/_components/About.tsx Normal file
View file

@ -0,0 +1,164 @@
"use client";
import { FC } from "react";
import { useTranslate } from "react-polyglot";
import Image from "next/legacy/image";
import Link from "next/link";
import { Grid, Container, Box, Button } from "@mui/material";
import { useAppContext } from "@/app/_components/AppProvider";
import { PageHeader } from "@/app/_components/PageHeader";
import { AboutFeature } from "./AboutFeature";
import { AboutBox } from "./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";
export const About: FC = () => {
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
typography: { h1, h4, p },
} = useAppContext();
return (
<>
<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>
</>
);
};

35
apps/leafcutter/app/(main)/about/_components/AboutBox.tsx Normal file
View file

@ -0,0 +1,35 @@
"use client";
import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material";
import { useAppContext } from "../../../_components/AppProvider";
type AboutBoxProps = PropsWithChildren<{
backgroundColor: string;
}>;
export const AboutBox: FC<AboutBoxProps> = ({
backgroundColor,
children,
}: any) => {
const {
colors: { white },
} = useAppContext();
return (
<Box
sx={{
width: "100%",
backgroundColor,
color: white,
p: 4,
borderRadius: "10px",
mt: "66px",
mb: "22px",
textAlign: "center",
}}
>
{children}
</Box>
);
};

68
apps/leafcutter/app/(main)/about/_components/AboutFeature.tsx Normal file
View file

@ -0,0 +1,68 @@
"use client";
import { FC } from "react";
import Image from "next/legacy/image";
import { Grid, Box, GridSize } from "@mui/material";
import AboutDots from "images/about-dots.png";
import { useAppContext } from "app/_components/AppProvider";
interface AboutFeatureProps {
title: string;
description: string;
direction: "row" | "row-reverse";
image: any;
showBackground: boolean;
textColumns: number;
}
export const AboutFeature: FC<AboutFeatureProps> = ({
title,
description,
direction,
image,
showBackground,
textColumns,
}) => {
const {
typography: { h2, p },
} = useAppContext();
return (
<Box
sx={{
p: "20px",
mt: "40px",
backgroundImage: showBackground ? `url(${AboutDots.src})` : "",
backgroundSize: "200px 200px",
backgroundPosition: direction === "row" ? "20% 50%" : "80% 50%",
backgroundRepeat: "no-repeat",
}}
>
<Grid
direction={direction}
container
spacing={5}
alignContent="flex-start"
>
<Grid item xs={textColumns as GridSize}>
<Box component="h2" sx={h2}>
{title}
</Box>
<Box component="p" sx={p}>
{description}
</Box>
</Grid>
<Grid
item
xs={(12 - textColumns) as GridSize}
container
direction={direction}
>
<Box sx={{ width: "150px", mt: "-20px" }}>
<Image src={image} alt="" objectFit="contain" />
</Box>
</Grid>
</Grid>
</Box>
);
};