Feat/homepage add ons

app/components/content-mdx-provider.tsx

@@ -3,7 +3,16 @@ import { Box } from "@mui/material";
 import { ReactNode } from "react";
 
 import { ContentLayout, StaticContentLayout } from "@/components/layout";
-import { Contribute, Examples, Intro, Tutorial } from "@/homepage";
+import {
+  BugReport,
+  Contribute,
+  Examples,
+  Intro,
+  Newsletter,
+  Tutorial,
+} from "@/homepage";
+import { FeatureRequest } from "@/homepage/feature-request";
+import { Section } from "@/homepage/section";
 
 const castContentId = (contentId: unknown) => {
   if (typeof contentId === "string") {
@@ -35,6 +44,10 @@ const defaultMDXComponents = {
   Tutorial,
   Examples,
   Contribute,
+  Newsletter,
+  BugReport,
+  Section,
+  FeatureRequest,
 };
 
 export const ContentMDXProvider = ({ children }: { children: ReactNode }) => {

app/docs/homepage.docs.mdx

@@ -1,25 +1,37 @@
 import { Box } from "@mui/material";
 import { ReactSpecimen } from "./catalog";
 
-import { Contribute, Examples, Intro, Tutorial } from "@/homepage";
-import { Canvas, Meta } from '@storybook/blocks';
-import * as HomepageStories from './homepage.stories';
+import {
+  BugReport,
+  Contribute,
+  Examples,
+  Intro,
+  Newsletter,
+  Tutorial,
+} from "@/homepage";
+import { bugReportTemplates } from "@/templates/email/bug-report";
+import { featureRequestTemplates } from "@/templates/email/feature-request";
+import { Canvas, Meta } from "@storybook/blocks";
+import { createMailtoLink } from "../../app/templates/email";
+import * as HomepageStories from "./homepage.stories";
 
 <Meta of={HomepageStories} />
 
 > The Homepage is the main page you see when you enter the Visualize app.
 
-It consists of 4 different components: Intro, Tutorial, Examples and Contribute. In order to compose a complete Homepage, you have to use them all in the correct order.
+It consists of 7 different components: Intro, Tutorial, Examples, Newsletter,
+Bug Reporting, Feature Requesting and Contribute. In order to compose a complete
+Homepage, you have to use them all in the correct order.
 
-You can either import them directly to JSX files or create a separate MDX file and use a MDXProvider to render the page (see ContentMDXProvider component).
+You can either import them directly to JSX files or create a separate MDX file
+and use a MDXProvider to render the page (see ContentMDXProvider component).
 
 <Canvas of={HomepageStories.Homepage} />
 
-
 ## How to use
 
 ```jsx
-import { Contribute, Examples, Intro, Tutorial } from "../homepage";
+import { Contribute, Examples, Intro, Tutorial, Newsletter, BugReport, FeatureRequest } from "../homepage";
 
 <Intro
   title="Visualize Swiss Open Government Data"
@@ -38,11 +50,41 @@ import { Contribute, Examples, Intro, Tutorial } from "../homepage";
   example1Description="Choose from a wide range of chart types and configure them according to your needs."
   example2Headline="Use powerful customizations"
   example2Description="With the help of custom filters and data segmentation, even complex issues can be visualized."
+/>
+ <Newsletter
+  headline="Stay up to date"
+  description="Subscribe to our newsletter by adding your email below."
+  buttonLabel="Subscribe"
+  buttonUrl="mailto:[email protected]"
+/>
+<FeatureRequest
+  headline="New feature request"
+  description="Submit your feature requests today and help shape the future of our platform!"
+  buttonLabel="Submit"
+ buttonUrl={createMailtoLink("en", {
+  recipients: {
+    to: "[email protected]",
+    cc: "[email protected]",
+  },
+  template: featureRequestTemplates,
+})}
+/>
+ <BugReport
+  headline="Found a bug?"
+  description="Please report it to us, so we can fix it as soon as possible."
+  buttonLabel="Report a bug"
+  buttonUrl={createMailtoLink("en", {
+    recipients: {
+      to: "[email protected]",
+      cc: "[email protected]",
+    },
+    template: bugReportTemplates,
+  })}
 />
 <Contribute
   headline="Would you like to visualize your own data?"
   description="Find out how you can integrate your data into the LINDAS Linked Data Service."
   buttonLabel="Learn how"
   buttonUrl="https://lindas.admin.ch/?lang=en"
 />
-```
+```

app/docs/homepage.stories.tsx

@@ -1,7 +1,20 @@
 import { Box } from "@mui/material";
 import { Meta } from "@storybook/react";
 
-import { Contribute, Examples, Intro, Tutorial } from "@/homepage";
+import {
+  BugReport,
+  Contribute,
+  Examples,
+  Intro,
+  Newsletter,
+  Tutorial,
+} from "@/homepage";
+import { FeatureRequest } from "@/homepage/feature-request";
+import { Section } from "@/homepage/section";
+import { bugReportTemplates } from "@/templates/email/bug-report";
+import { featureRequestTemplates } from "@/templates/email/feature-request";
+
+import { createMailtoLink } from "../../app/templates/email";
 
 import { ReactSpecimen } from "./catalog";
 
@@ -33,12 +46,53 @@ const HomepageStory = {
           example2Headline="Use powerful customizations"
           example2Description="With the help of custom filters and data segmentation, even complex issues can be visualized."
         />
-        <Contribute
-          headline="Would you like to visualize your own data?"
-          description="Find out how you can integrate your data into the LINDAS Linked Data Service."
-          buttonLabel="Learn how"
-          buttonUrl="https://lindas.admin.ch/?lang=en"
-        />
+        <Section>
+          <Contribute
+            headline="Would you like to visualize your own data?"
+            description="Find out how you can integrate your data into the LINDAS Linked Data Service."
+            buttonLabel="Learn how"
+            buttonUrl="https://lindas.admin.ch/?lang=en"
+          />
+          <div style={{ width: "1px", backgroundColor: "#e5e5e5" }}></div>
+          <Newsletter
+            headline="Subscribe to our Newsletter"
+            description="Stay up to day and subscribe to our newsletter by adding your email address below."
+            buttonLabel="Subscribe"
+            buttonUrl="mailto:[email protected]"
+          />
+        </Section>
+
+        <Section
+          sx={{
+            color: "gray.800",
+          }}
+        >
+          <BugReport
+            headline="Found a bug?"
+            description="Please report the bug, so can fix it as soon as possible"
+            buttonLabel="Report a bug"
+            buttonUrl={createMailtoLink("en", {
+              recipients: {
+                to: "[email protected]",
+                cc: "[email protected]",
+              },
+              template: bugReportTemplates,
+            })}
+          />
+          <div style={{ width: "1px", backgroundColor: "#cccccc" }}></div>
+          <FeatureRequest
+            headline="New feature request"
+            description="Submit your feature requests today and help shape the future of our platform!"
+            buttonLabel="Submit"
+            buttonUrl={createMailtoLink("en", {
+              recipients: {
+                to: "[email protected]",
+                cc: "[email protected]",
+              },
+              template: featureRequestTemplates,
+            })}
+          />
+        </Section>
       </Box>
     </ReactSpecimen>
   ),

app/homepage/bug-report.tsx

@@ -0,0 +1,70 @@
+import { Button, Link, Typography } from "@mui/material";
+
+import Flex from "@/components/flex";
+
+export const BugReport = ({
+  headline,
+  description,
+  buttonLabel,
+  buttonUrl,
+}: {
+  headline: string;
+  description: string;
+  buttonLabel: string;
+  buttonUrl: string;
+}) => {
+  return (
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "48px",
+        width: "100%",
+      }}
+    >
+      <Flex
+        sx={{
+          width: ["100%", "100%", "70%"],
+          flexDirection: "column",
+          gap: 4,
+          maxWidth: ["100%", "330px"],
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: ["1.5rem", "1.5rem", "2rem"],
+            lineHeight: ["2.5rem", "2.5rem", "3rem"],
+          }}
+        >
+          {headline}
+        </Typography>
+        <Typography component="div" variant="body1">
+          {description}
+        </Typography>
+      </Flex>
+      <Flex
+        sx={{
+          width: ["100%", "100%", "70%"],
+          maxWidth: ["100%", "330px"],
+          paddingBottom: ["72px", "0px"],
+          borderBottom: ["1px solid #e5e5e5", "none"],
+        }}
+      >
+        <Button
+          component={Link}
+          href={buttonUrl}
+          target="_blank"
+          variant="contained"
+          rel="noopener noreferrer"
+          color="primary"
+          sx={{
+            textDecoration: "none",
+            textAlign: "center",
+          }}
+        >
+          {buttonLabel}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

app/homepage/contribute.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, Link, Typography } from "@mui/material";
-import * as React from "react";
+import { Button, Link, Typography } from "@mui/material";
 
 import Flex from "@/components/flex";
 
@@ -15,50 +14,57 @@ export const Contribute = ({
   buttonUrl: string;
 }) => {
   return (
-    <Box sx={{ backgroundColor: "primary.main", color: "grey.100" }}>
-      <Box sx={{ maxWidth: 1024, margin: "0 auto" }}>
-        <Flex sx={{ flexDirection: ["column", "row"], px: 4, py: [6, 6, 7] }}>
-          <Box sx={{ width: ["100%", "100%", "70%"], mb: [6, 6, 0] }}>
-            <Typography
-              sx={{
-                fontSize: ["1.5rem", "1.5rem", "2rem"],
-                lineHeight: 1.25,
-
-                mb: 3,
-              }}
-            >
-              {headline}
-            </Typography>
-            <Typography component="div" variant="body1">
-              {description}
-            </Typography>
-          </Box>
-          <Flex
-            sx={{
-              justifyContent: "flex-end",
-              alignItems: "center",
-              width: ["100%", "50%", "30%"],
-            }}
-          >
-            <Button
-              component={Link}
-              href={buttonUrl}
-              target="_blank"
-              variant="inverted"
-              rel="noopener noreferrer"
-              sx={{
-                flexGrow: [1, 0, 0],
-                textDecoration: "none",
-                textAlign: "center",
-                bgcolor: (theme) => theme.palette.primary.contrastText,
-                color: (theme) => theme.palette.primary.main,
-              }}
-            >
-              {buttonLabel}
-            </Button>
-          </Flex>
-        </Flex>
-      </Box>
-    </Box>
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "48px",
+        width: "100%",
+      }}
+    >
+      <Flex
+        sx={{
+          width: ["100%", "100%", "70%"],
+          flexDirection: "column",
+          gap: 4,
+          maxWidth: ["100%", "330px"],
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: ["1.5rem", "1.5rem", "2rem"],
+            lineHeight: ["2.5rem", "2.5rem", "3rem"],
+          }}
+        >
+          {headline}
+        </Typography>
+        <Typography component="div" variant="body1">
+          {description}
+        </Typography>
+      </Flex>
+      <Flex
+        sx={{
+          width: ["100%", "100%", "70%"],
+          maxWidth: ["100%", "330px"],
+          paddingBottom: ["72px", "0px"],
+          borderBottom: ["1px solid #e5e5e5", "none"],
+        }}
+      >
+        <Button
+          component={Link}
+          href={buttonUrl}
+          target="_blank"
+          variant="outlined"
+          color="inherit"
+          rel="noopener noreferrer"
+          sx={{
+            textDecoration: "none",
+            textAlign: "center",
+          }}
+        >
+          {buttonLabel}
+        </Button>
+      </Flex>
+    </Flex>
   );
 };