Improve about us section (#266)

components/screens/about/AboutUs.tsx

@@ -0,0 +1,18 @@
+import { Group, Text } from "@mantine/core";
+
+const AboutUs = () => {
+  return (
+    <>
+      <Group>
+        <Text pt="sm">
+          This site is a community project. We have most of our code open-source on our GitHub
+          <br />
+          We are also on Discord, feel free to join us and help us with the development or ask any
+          questions.
+        </Text>
+      </Group>
+    </>
+  );
+};
+
+export default AboutUs;

components/screens/about/DataSection.tsx

@@ -0,0 +1,44 @@
+import { Anchor, Text, Title } from "@mantine/core";
+import { getOpenDataRoute } from "../../../src/routes";
+
+const DataSection = () => {
+  return (
+    <>
+      <Title order={5}>Leaderboards</Title>
+      Live data from Relic servers.
+      <Title order={5}>Player Cards</Title>
+      Live data from Relic servers mixed with data from our database.
+      <Title order={5}>Stats Data</Title>
+      Data from our database. Updated daily ~6 AM UTC unless specified otherwise.
+      <div style={{ paddingLeft: 25 }}>
+        <Title order={5}>Data Scraping</Title>
+        COH3 does not provide Live Games API as in COH2. We are unable to track live games, and
+        therefore all the games played on the platform as we do on coh2stats.com.
+        <br />
+        We are able to track only matches, where there is at least one player who has changed his
+        rank.
+        <br />
+        Such matches are ingested into the system and counted in the stats.
+        <br />
+        <br />
+        You can download the data we are scraping. More info on{" "}
+        <Anchor href={getOpenDataRoute()}> Open Data</Anchor> page.
+      </div>
+      <Title order={5}>Explorer</Title>
+      All the data for units, DPS calculators, faction overviews are generated directly from the
+      game files. There are often a bugs in the COH source files, please report any problems you
+      find to us. Thank you
+      <Title order={1} size="h4" pt="md">
+        API Usage / Collaboration
+      </Title>
+      We are open for collaboration / sharing the data. Check out our{" "}
+      <Anchor href={getOpenDataRoute()}> Open Data</Anchor> page. Or reach out to us on Discord.
+      <br />
+      <Text fw={500}>
+        Its forbidden to use our API or scrape the site without previous consulting!
+      </Text>
+    </>
+  );
+};
+
+export default DataSection;

components/screens/about/DonateSection.tsx

@@ -0,0 +1,55 @@
+import { Group, Anchor, Text } from "@mantine/core";
+import config from "../../../config";
+import { Donate } from "../../icon/donate";
+import { PayPalDonation } from "../../other/paypal-donations";
+
+const DonateSection = () => {
+  return (
+    <>
+      Thank you all who already supported the project!
+      <br />
+      Actually you can support us in many ways. Bug reports, ideas or directly with code!
+      <br />
+      But money for covering the server costs is also appreciated. So we can run this site without
+      any ads.
+      <br />
+      <br />
+      All the donations are used for covering the server costs and expenses for running the site.
+      <br />
+      Our goal is to run the site as long as Relic servers are running for both coh2 and coh3.
+      <br />
+      <br />
+      <Text fw={500}>Donation message:</Text>
+      <Text>
+        If possible, please mention your profile ID and mention coh3 or coh2 in your message. I am
+        planning some perks for donators in the future.
+      </Text>
+      <br />
+      <div>
+        <div>
+          <Group>
+            <Text>
+              All the donations are listed at{" "}
+              <Anchor href={config.DONATION_LINK} target={"_blank"}>
+                Ko-Fi
+              </Anchor>
+              :
+            </Text>
+            <Donate />
+          </Group>
+
+          <Text fz={"sm"} fs="italic">
+            You can Donate via PayPal or Card at Ko-Fi, no registration required.
+          </Text>
+        </div>
+
+        <Group pt={"xl"}>
+          <Text>Direct PayPal if you have problems with Ko-Fi:</Text>
+          <PayPalDonation />
+        </Group>
+      </div>
+    </>
+  );
+};
+
+export default DonateSection;

components/screens/about/index.tsx

@@ -0,0 +1,158 @@
+import { NextPage } from "next";
+import Head from "next/head";
+
+import {
+  Container,
+  Title,
+  Center,
+  Anchor,
+  Grid,
+  Flex,
+  Divider,
+  createStyles,
+} from "@mantine/core";
+import React, { useEffect } from "react";
+import { AnalyticsAboutAppPageView } from "../../../src/firebase/analytics";
+import { generateKeywordsString } from "../../../src/head-utils";
+import AboutUs from "./AboutUs";
+import DonateSection from "./DonateSection";
+import Link from "next/link";
+import config from "../../../config";
+import DataSection from "./DataSection";
+
+const BugReports = () => {
+  return (
+    <>
+      This is a community project. We rely on your feedback, reports and ideas. <br />
+      You can report the things on our{" "}
+      <Anchor
+        href={config.DISCORD_INVITE_LINK}
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        title={"Link to our discord channel"}
+      >
+        Discord
+      </Anchor>{" "}
+      or directly on
+      <Anchor
+        component={Link}
+        href={"https://github.com/cohstats/coh3-stats/issues"}
+        target={"_blank"}
+      >
+        {" "}
+        GitHub
+      </Anchor>
+    </>
+  );
+};
+
+const keywords = generateKeywordsString(["coh3 stats", "coh3 discord", "bug report", "github"]);
+
+const useStyles = createStyles((theme) => ({
+  link: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+  },
+
+  anchor: {
+    display: "block",
+    height: "65px",
+    marginTop: "-65px",
+    visibility: "hidden",
+  },
+
+  menu: {
+    position: "sticky",
+    top: "100px",
+  },
+}));
+
+const sections = [
+  { name: "aboutus", menuDisplayName: "About", pageDisplayName: "About", component: <AboutUs /> },
+  {
+    name: "bugreport",
+    menuDisplayName: "Bug Reports",
+    pageDisplayName: "Bug Reports, Feature Request and Contributions",
+    component: <BugReports />,
+  },
+  {
+    name: "data",
+    menuDisplayName: "Data",
+    pageDisplayName: "Data Sources",
+    component: <DataSection />,
+  },
+  {
+    name: "donate",
+    menuDisplayName: "Donate",
+    pageDisplayName: "Donate and support us",
+    component: <DonateSection />,
+  },
+];
+
+const About: NextPage = () => {
+  useEffect(() => {
+    AnalyticsAboutAppPageView();
+  }, []);
+
+  const { classes } = useStyles();
+
+  return (
+    <div>
+      {/*This is custom HEAD overwrites the default one*/}
+      <Head>
+        <title>About COH3 Stats</title>
+        <meta name="description" content="COH3 Stats - learn more about our page." />
+        <meta name="keywords" content={keywords} />
+        <meta property="og:image" content={`/logo/android-icon-192x192.png`} />
+      </Head>
+      <>
+        <Center>
+          <Title order={1} size="h1" pt="md" mb="md">
+            FAQs
+          </Title>
+        </Center>
+        <Container size={"lg"}>
+          {" "}
+          <Grid>
+            <Grid.Col span={3}>
+              <div className={classes.menu}>
+                {sections.map((x) => {
+                  return (
+                    <Flex
+                      key={x.name}
+                      direction={{ base: "column" }}
+                      gap={{ base: "sm", sm: "lg" }}
+                    >
+                      <div>
+                        <Anchor href={`#${x.name}`} className={classes.link}>
+                          {x.menuDisplayName}
+                        </Anchor>
+                        <Divider my="sm" />
+                      </div>
+                    </Flex>
+                  );
+                })}
+              </div>
+            </Grid.Col>
+
+            <Grid.Col span={9}>
+              {sections.map((x, idx) => {
+                return (
+                  <div key={x.name}>
+                    <span className={classes.anchor} id={x.name} />
+                    <Title size="h3" mb="md">
+                      {x.pageDisplayName}
+                    </Title>
+                    {x.component}
+                    {idx !== sections.length - 1 && <Divider my="sm" />}
+                  </div>
+                );
+              })}
+            </Grid.Col>
+          </Grid>
+        </Container>
+      </>
+    </div>
+  );
+};
+
+export default About;