add hyphens to cards if text needs breaks

Edit board.json

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!195

.env.local.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_DEPLOY_ENV=local
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
+NEXT_MQTT_HOST=mqtt.dev.sahkoinsinoorikilta.fi

package.json

@@ -72,6 +72,7 @@
     "fast-deep-equal": "^3.1.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
+    "mqtt": "^5.14.1",
     "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -89,7 +90,8 @@
     "sharp": "^0.30.3",
     "shortid": "^2.2.16",
     "styled-components": "^5.3.5",
-    "swr": "^1.2.2"
+    "swr": "^1.2.2",
+    "uuid": "^13.0.0"
   },
   "overrides": {
     "react-mde": {

src/components/Card.tsx

@@ -43,6 +43,7 @@ const StyledCard = styled.article`
   }
 
   h3 {
+    hyphens: auto;
     padding: 0.5rem;
     font-size: 1.5rem;
     font-weight: 300;

src/components/DropDownBox.tsx

@@ -12,8 +12,8 @@ interface DropDownBoxProps {
 const Box = styled.div`
   background-color: ${colors.white};
   border: 1px solid ${colors.black};
-  margin-top: 0.8rem;
   position: absolute;
+  /* margin-top: 0.8rem; hides cool onhover effect but fixes a gap problem */
   left: 0;
   top: 2.5rem;
   z-index: 20;

src/components/Footer/FooterContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "@components/index";
+import Icon, { IconType } from "@components/Icon";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -28,6 +29,7 @@ const Content = styled.div`
   h4 {
     color: ${colors.lightBlue};
     padding: 1.5rem 0;
+    text-align: center;
   }
 
   a {
@@ -67,6 +69,27 @@ const Map = styled.div`
   }
 `;
 
+const SomeContainer = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  a {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin-right: 0.5rem;
+
+    color: inherit;
+    text-decoration: none;
+
+  }
+  svg{
+    width: 24px;
+    height: 24px;
+    fill: ${colors.white};
+}
+`;
+
 const FooterContent: React.FC = () => (
   <Content>
     <div>
@@ -90,6 +113,13 @@ const FooterContent: React.FC = () => (
             <Link to="https://sik.kuvat.fi">Kuvagalleria</Link>
             <Link to="https://static.sahkoinsinoorikilta.fi/logot-ja-grafiikka/">Logot ja grafiikka</Link>
           </div>
+          <div>
+            <SomeContainer>
+              <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
+              <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
+              <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+            </SomeContainer>
+          </div>
         </Columns>
       </MarginSpace>
     </div>

src/components/Header.tsx

@@ -26,6 +26,13 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>`
   transition: all 200ms ease-out;
   height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")};
 
+  /* tape to allow mobile dropdown menu scrolling */
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    overflow-y: ${(p) => (p.$mobileMenuOpen ? "auto" : "visible")};
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch; /* apparently some ios optimization for smoother scrolin' */
+  }
+
   ${(p) => (p.$isHidden ? (`
     transition: all 200ms ease-in;
     transform: translateY(-100%);

src/components/Navigation.tsx

@@ -11,7 +11,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
     <NavbarDropdownLink to="/kilta" text="Kilta ›" exploded={mobile}>
       <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
       <NavbarChildLink to="/kilta/jasenyys">Jäsenyys</NavbarChildLink>
-      <NavbarChildLink to="/kilta/fuksi">Fukseille</NavbarChildLink>
       <NavbarChildLink to="/kilta/hallitus">Hallitus</NavbarChildLink>
       <NavbarChildLink to="/kilta/toimihenkilot">Toimihenkilöt</NavbarChildLink>
       <NavbarChildLink to="/kilta/vuokraa">Vuokraa kalustoa</NavbarChildLink>
@@ -20,8 +19,11 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
       <NavbarChildLink to="https://sik.kuvat.fi">Kuvagalleria</NavbarChildLink>
       <NavbarChildLink to="/kilta/kilta-avustus">Kilta-avustus</NavbarChildLink>
     </NavbarDropdownLink>
-    <NavbarDropdownLink to="/fukseille_en" text="For Freshmen" exploded={mobile} />
-    <NavbarDropdownLink to="/forExchangers" text="For Exchange/MSc students" exploded={mobile} />
+    <NavbarDropdownLink to="/" text="New students ›" exploded={mobile}>
+      <NavbarChildLink to="/newStudent/fuksi">Fukseille</NavbarChildLink>
+      <NavbarChildLink to="/newStudent/fukseille_en">For Freshmen</NavbarChildLink>
+      <NavbarChildLink to="/newStudent/forExchangers">For Exchange/MSc students</NavbarChildLink>
+    </NavbarDropdownLink>
     <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded={mobile} />
     <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö" exploded={mobile} />
     <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot" exploded={mobile}>
@@ -31,7 +33,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
     <NavbarDropdownLink to="/in_english" text="In English" exploded={mobile} />
   </>
 );
-
 const Nav = styled.div`
   flex: 1 0 auto;
   display: flex;
@@ -55,6 +56,11 @@ const Nav = styled.div`
   @media screen and (max-width: ${breakpoints.mobile}) {
     justify-content: center;
     margin-left: 0;
+    /* line 59 */
+    border-top: 2px solid ${colors.lightBlue}; /* Add line above */
+    padding-top: 0.5rem; /* Add some spacing */
+    padding-bottom: 0.5rem; /* Add some spacing */
+    cursor: pointer; /* Make entire nav clickable */
   }
 
   svg {
@@ -76,22 +82,12 @@ const DesktopContainer = styled.div`
   }
 `;
 
-const SomeContainer = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-
-  a {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    margin: 1rem;
-  }
-`;
-
 const MobileMenu = styled.div`
   display: flex;
   margin: 0 1rem;
+  align-items: center;
   cursor: pointer;
+  padding: 0 50%; /* Large clickable area horizontally cheeze */
 
   span {
     display: flex;
@@ -101,9 +97,6 @@ const MobileMenu = styled.div`
     display: none;
   }
 
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    margin-left: 3rem;
-  }
 `;
 
 interface NavigationProps {
@@ -117,13 +110,8 @@ const Navigation: React.FC<NavigationProps> = ({ onMobileMenuOpen }) => {
       <DesktopContainer>
         {desktopItems}
       </DesktopContainer>
-      <SomeContainer>
-        <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
-        <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
-        <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
-      </SomeContainer>
-      <MobileMenu>
-        <Icon name={IconType.HamburgerMenu} onClick={onMobileMenuOpen} />
+      <MobileMenu onClick={onMobileMenuOpen}>
+        <Icon name={IconType.HamburgerMenu} />
       </MobileMenu>
     </Nav>
   );

src/components/NavigationMobile.tsx

@@ -4,8 +4,8 @@ import colors from "@theme/colors";
 import { renderNavigationItems } from "./Navigation";
 
 const Nav = styled.nav`
-  padding: 1rem 2rem;
-
+  padding: 1rem 1rem;
+  padding-bottom: 20rem;
   a {
     fill: ${colors.lightBlue};
     color: ${colors.lightBlue};

src/models/Signup.ts

@@ -1,7 +1,8 @@
 import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
-  id?: number;
+  id?: number; // Database id for completed signup
+  submit_id?: string; // Signup request idempotency key
   signupForm_id: number;
   answer: string;
 }

src/pages/kilta/guildroom.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { NextPage } from "next";
+import Head from "next/head";
+import GuildroomPageView from "@views/GuildroomPage/GuildroomPageView";
+import PageWrapper from "@views/common/PageWrapper";
+
+const GuildroomPage: NextPage = () => (
+  <>
+    <Head>
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/guildroom`} />
+    </Head>
+    <PageWrapper>
+      <GuildroomPageView />
+    </PageWrapper>
+  </>
+);
+
+export default GuildroomPage;

src/pages/newStudent/forExchangers.tsx

@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const ForInternationalPage: NextPage = () => (
   <>
     <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/ForFreshmen`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/ForIntl`} />
     </Head>
     <PageWrapper>
       <ForInternationalPageView />

src/pages/newStudent/fukseille_en.tsx

@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const ContactsPage: NextPage = () => (
   <>
     <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/ForFreshmen`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/ForFreshmen`} />
     </Head>
     <PageWrapper>
       <ContactsPageView />

src/pages/newStudent/fuksi.tsx

@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const FreshmenPage: NextPage = () => (
   <>
     <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/fuksi`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/fuksi`} />
     </Head>
     <PageWrapper>
       <FreshmenPageView />

src/pages/signup/[id].tsx

@@ -13,6 +13,7 @@ import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
 import noop from "@utils/noop";
 import NotFoundPage from "@pages/404";
+import { v4 as uuid } from "uuid";
 
 type InitialProps = {
   initialForm: SignupForm;
@@ -23,6 +24,7 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const router = useRouter();
   const id = String(initialForm?.id ?? "");
+  const SUBMIT_ID = uuid(); // Submission key, generated on page refresh
   const URL = `${FORM_URL}${id}/`;
   const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
 
@@ -43,6 +45,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
     const payload: Signup = {
+      submit_id: SUBMIT_ID, // This is for preventing duplicate requests; NOT RELATED TO THE SIGNUP ID IN DATABASE
       signupForm_id: signupForm.id,
       answer: formData,
     };

src/views/BoardPage/board.json

@@ -8,10 +8,10 @@
       "name_en": "Chairman of the Board",
       "representatives": [
         {
-          "name": "Emma Uusküla",
+          "name": "Sauli Hakala",
           "phone_number": null,
-          "email": "emma.uuskula@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Emma.jpg"
+          "email": "sauli.hakala@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -20,10 +20,10 @@
       "name_en": "Vice Chair",
       "representatives": [
         {
-          "name": "Johannes Viirimäki",
+          "name": "Eemeli Hintsanen",
           "phone_number": null,
-          "email": "johannes.viirimaki@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Johannes.jpg"
+          "email": "eemeli.hintsanen@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -32,10 +32,10 @@
       "name_en": "Treasurer",
       "representatives": [
         {
-          "name": "Nelli Liljasto",
+          "name": "Nea Kanerva",
           "phone_number": null,
-          "email": "nelli.liljasto@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Nelli.jpg"
+          "email": "nea.kanerva@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -44,10 +44,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Teemu Heikkinen",
+          "name": "Aura Friman",
           "phone_number": null,
-          "email": "teemu.heikkinen@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Teemu.jpg"
+          "email": "aura.friman@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -56,10 +56,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Henri Aito",
+          "name": "Antti Salpakari",
           "phone_number": null,
-          "email": "henri.aito@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Henri.jpg"
+          "email": "antti.salpakari@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -68,10 +68,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Tuomas Rantamäki",
+          "name": "Aino Saarela",
           "phone_number": null,
-          "email": "tuomas.rantamaki@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/TuomasR.jpg"
+          "email": "aino.saarela@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -80,10 +80,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Matilda Ahonen",
+          "name": "Rosanna Reims",
           "phone_number": null,
-          "email": "matilda.ahonen@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Matilda.jpg"
+          "email": "rosanna.reims@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -92,9 +92,9 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Niklas Ritalahti",
+          "name": "Valentin Juhela",
           "phone_number": null,
-          "email": "niklas.ritalahti@sahkoinsinoorikilta.fi",
+          "email": "valentin.juhela@sahkoinsinoorikilta.fi",
           "image": ""
         }
       ]
@@ -104,10 +104,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Mikael Vatiainen",
+          "name": "Elida Widgren",
           "phone_number": null,
-          "email": "mikael.vatiainen@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Mikael.jpg"
+          "email": "elida.widgren@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -116,10 +116,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Simeon Pursiainen",
+          "name": "Joona Maaranen",
           "phone_number": null,
-          "email": "simeon.pursiainen@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Simeon.jpg"
+          "email": "joona.maaranen@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -128,10 +128,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Markus Aaltio",
+          "name": "Jere Oinonen",
           "phone_number": null,
-          "email": "markus.aaltio@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Markus.jpg"
+          "email": "jere.oinonen@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -140,10 +140,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Tuomas Hintikka",
+          "name": "Into Saarinen",
           "phone_number": null,
-          "email": "tuomas.hintikka@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/TuomasH.jpg"
+          "email": "into.saarinen@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     },
@@ -152,10 +152,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Yassine Ramid",
+          "name": "Aino Svahn",
           "phone_number": null,
-          "email": "yassine.ramid@sahkoinsinoorikilta.fi",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/Yassine.jpg"
+          "email": "aino.svahn@sahkoinsinoorikilta.fi",
+          "image": ""
         }
       ]
     }

src/views/CommitteePage/hvtmk.json

@@ -54,7 +54,7 @@
       "name_en": "Guild Room Representative",
       "representatives": [
         {
-          "name": "Justus Ojala"
+          "name": "Milja Kuusela"
         },
         {
           "name": "Aaro Rasilainen"

src/views/ForInternationalPage/ForIntlPageView.tsx

@@ -28,7 +28,7 @@ const FopasImage = styled.img`
   margin-bottom: 1em;
 `;
 
-const ForFreshmenPageView: React.FC = () => (
+const ForIntlPageView: React.FC = () => (
   <>
     <ForIntlPageHero />
     <TextSection>
@@ -188,4 +188,4 @@ const ForFreshmenPageView: React.FC = () => (
   </>
 );
 
-export default ForFreshmenPageView;
+export default ForIntlPageView;

src/views/FrontPage/FrontPageHero.tsx

@@ -30,7 +30,7 @@ const FrontPageHero: React.FC = () => (
       <HeroAsideItem
         header="Vasta-aloittaneelle opiskelijalle"
         text="Fuksikasvatusta ja ISOtoimintaa"
-        link="/kilta/fuksi"
+        link="/newStudent/fuksi"
         linkText="Fuksit&nbsp; ›"
       />
       <HeroAsideItem

src/views/GuildroomPage/GuildroomPageView.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import mqtt from "mqtt";
+import { TextSection } from "@components/index";
+import styled from "styled-components";
+
+const CoffeeTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 3rem;
+  font-weight: bold;
+`;
+
+const Cups = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 7rem;
+  font-variant-numeric: tabular-nums;
+`;
+
+const Time = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+`;
+
+const GuildroomView = () => {
+  const [brewing, setBrewing] = useState<boolean>(false);
+  const [time, setTime] = useState<number>(0);
+  const [cups, setCups] = useState<number>(0);
+  const [client, setClient] = useState<mqtt.MqttClient | null>(null);
+  const [status, setStatus] = useState<boolean>(false);
+
+  useEffect(() => {
+    setStatus(false);
+    if (process.env.NEXT_PUBLIC_MQTT_HOST) {
+      setClient(mqtt.connect(`wss://${process.env.NEXT_PUBLIC_MQTT_HOST}`));
+    } else {
+      console.error("MQTT host undefined");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (client) {
+      client.on("connect", () => {
+        setStatus(true);
+        client.subscribe("sik/kiltahuone/kahvivaaka/#", (err) => {
+          if (!err) {
+            console.log("Connected to MQTT server!");
+          }
+        });
+      });
+      client.on("error", (err) => {
+        console.error("Connection error: ", err);
+        client.end();
+      });
+      client.on("reconnect", () => {
+        setStatus(false);
+      });
+      client.on("offline", () => {
+        setStatus(false);
+      });
+      client.on("message", (topic, message) => {
+        if (topic === "sik/kiltahuone/kahvivaaka/cups") {
+          setCups(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewtime") {
+          setTime(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewing") {
+          setBrewing(Boolean(message.toString()));
+        }
+      });
+    }
+  }, [client]);
+
+  if (!status) {
+    return (
+      <CoffeeTitle style={{ margin: "10%" }}>NO MQTT CONNECTION</CoffeeTitle>
+    );
+  }
+
+  return (
+    <div style={{ margin: "10%" }}>
+      <CoffeeTitle>{brewing ? "Brewing more..." : "Cups left"}</CoffeeTitle>
+      <Cups>{cups}</Cups>
+      <Time>Brewed {time} min ago</Time>
+    </div>
+  );
+};
+
+export default GuildroomView;

src/views/MembershipPage/MembershipPageView.tsx

@@ -19,6 +19,19 @@ const MembershipPageView: React.FC = () => (
           Killan ulkojäseneksi voidaan hyväksyä jäsenmaksun maksanut henkilö, joita ei voida hyväksyä varsinaiseksi jäseneksi.
           Killan kannatusjäseneksi voidaan hyväksyä henkilö tai yhteisö, joka haluaa tukea killan toimintaa.
         </p>
+        <p>
+          Killan sääntöjen mukaan jäsenmaksuista määrätään seuraavasti:
+          <br />
+        </p>
+        <p>
+          <h5>8 § Jäsenmaksut</h5>
+          <br />
+          Jäsenet ovat velvollisia suorittamaan lukuvuosittain killalle jäsenmaksun.
+          Kunniajäsenet ovat vapautettuja jäsenmaksuista.
+        </p>
+        <p>
+          Jäsenmaksujen suuruudet määrää killan yleinen kokous.
+        </p>
 
         <h6 id="jasenmaksu">Jäsenmaksu</h6>
         <p>
@@ -36,6 +49,11 @@ const MembershipPageView: React.FC = () => (
             Jäsenrekisterin tietosuojaseloste
           </Link>
         </p>
+        <p>
+          <Link to="https://static.sahkoinsinoorikilta.fi/saannot/killansaannot.pdf">
+            Killan säännöt
+          </Link>
+        </p>
       </div>
     </TextSection>
   </>

src/views/RentPage/RentPageView.tsx

@@ -11,6 +11,7 @@ const RentPageView: React.FC = () => (
         <li>Mökämasiina <a href="https://static.sahkoinsinoorikilta.fi/img/equipment/mokamasiina.jpg">kuva</a> 50 €/päivä</li>
         <li>SIK-Teltta <a href="https://sik.kuvat.fi/kuvat/2021/Varaslähtö/Varaslähtö-Suvi-Karanta-16.jpg">kuva</a> 50 €/päivä</li>
         <li>Gongi ilmainen</li>
+        <li>Kyykkäsetti 10 €</li>
         <li>80 kpl kevytpeitteet</li>
         <ul>
           <li>Alle 5 kpl ilmainen</li>