improve header, make borad email optional

components/boardMemberCard.jsx

@@ -27,22 +27,25 @@ export default function BoardMemberCard({ entry }) {
           {entry.name}
         </Text>
         <Text ta="center" c="dimmed" fz="sm">
-          {entry.mail} • {entry.role[locale || "en"]}
+          {entry.mail ? entry.mail + " • " : ""}
+          {entry.role[locale || "en"]}
         </Text>
       </div>
 
-      <div>
-        <a href={"mailto:" + entry.mail} style={{ textDecoration: "none" }}>
-          <Button
-            leftIcon={<Icon icon={ICONS.EMAIL} color="black" />}
-            variant="default"
-            fullWidth
-            mt="md"
-          >
-            Send message
-          </Button>
-        </a>
-      </div>
+      {entry.mail && (
+        <div>
+          <a href={"mailto:" + entry.mail} style={{ textDecoration: "none" }}>
+            <Button
+              leftIcon={<Icon icon={ICONS.EMAIL} color="black" />}
+              variant="default"
+              fullWidth
+              mt="md"
+            >
+              Send message
+            </Button>
+          </a>
+        </div>
+      )}
     </Paper>
   );
 }

components/header.jsx

 import { useRouter } from "next/router";
 import Image from "next/image";
 
-import { Grid, MediaQuery, Space } from "@mantine/core";
+import { ActionIcon, Grid, MediaQuery, Space } from "@mantine/core";
+
+import { Icon, ICONS } from "vseth-canine-ui";
 
 import parse from "html-react-parser";
 
+import { getAccentColor } from "../utilities/colors";
+
 import content from "../content/texts.json";
 import tux from "../public/images/tux.png";
 
@@ -12,30 +16,56 @@ export default function Header() {
   const { locale } = useRouter();
 
   return (
-    <Grid style={{ display: "flex", alignItems: "center" }}>
-      <Grid.Col xs={12} md={6}>
-        <div>
-          <h1>TheAlternative</h1>
-          {content.topSection.map((entry, i) => (
-            <div key={i}>
-              <p>{parse(entry[locale || "en"])}</p>
-              <Space h="xs" />
-            </div>
-          ))}
-        </div>
-      </Grid.Col>
-      <MediaQuery smallerThan="md" styles={{ display: "none" }}>
-        <Grid.Col md={6}>
-          <Image
-            src={tux}
-            width={0}
-            height={0}
-            sizes="100vw"
-            style={{ width: "100%", height: "auto" }}
-            alt="Tux, the Linux Mascot"
-          />
+    <div
+      style={{
+        height: "calc(100vh - 112px)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-evenly",
+      }}
+    >
+      <Grid style={{ display: "flex", alignItems: "center" }}>
+        <Grid.Col xs={12} md={6}>
+          <div>
+            <Image
+              src="/images/logo.svg"
+              width={0}
+              height={0}
+              sizes="100vw"
+              style={{ width: "30rem", maxWidth: "100%", height: "auto" }}
+              alt="TheAlternative Logo  "
+            />
+            <Space h="xl" />
+            <Space h="xl" />
+            {content.topSection.map((entry, i) => (
+              <div key={i}>
+                <p>{parse(entry[locale || "en"])}</p>
+                <Space h="xs" />
+              </div>
+            ))}
+          </div>
         </Grid.Col>
-      </MediaQuery>
-    </Grid>
+        <MediaQuery smallerThan="md" styles={{ display: "none" }}>
+          <Grid.Col md={6}>
+            <Image
+              src={tux}
+              width={0}
+              height={0}
+              sizes="100vw"
+              style={{ width: "100%", height: "auto" }}
+              alt="Tux, the Linux Mascot"
+            />
+          </Grid.Col>
+        </MediaQuery>
+      </Grid>
+      <a href="#events">
+        <ActionIcon
+          style={{ marginLeft: "auto", marginRight: "auto" }}
+          size="3rem"
+        >
+          <Icon icon={ICONS.DOWN} color={getAccentColor()} size="2rem" />
+        </ActionIcon>
+      </a>
+    </div>
   );
 }

content/board.json

@@ -50,8 +50,7 @@
       "de": "GNU/Linux Enjoyer",
       "en": "GNU/Linux Enjoyer"
     },
-    "image": "/images/board/jindra.png",
-    "mail": "kommunikation@thealternative.ch"
+    "image": "/images/board/jindra.png"
   },
   {
     "name": "Corinne Furrer",

pages/index.jsx

@@ -10,7 +10,7 @@ import Philosophy from "../components/philosophy";
 export default function Home() {
   return (
     <>
-      <section className="light">
+      <section className="light" style={{ paddingTop: 0 }}>
         <Container size="xl">
           <Header />
         </Container>

sip.yml

@@ -14,7 +14,7 @@ auth:
   accessType: confidential
   clientProtocol: openid-connect
   validRedirectURIs:
-   - https://www.alt.staging-sip.ethz.ch/*
+   - https://www.thealt.staging-sip.ethz.ch/*
    - https://thealternative.ethz.ch/*
    - http://localhost/*
   scopes:

thealternative.config.js

 const config = {
   subject: "TheAlternative Contact Request by NAME",
-  address: "schochal@student.ethz.ch"
+  address: "board@thealternative.ch"
 };
 
 export default config;

utilities/colors.js

+export function getAccentColor() {
+  return "#244471";
+}