web2.0-frontend/src/views/GuildPage/GuildPageView.tsx

import React from "react";
import styled from "styled-components";
import PageLink from "@components/PageLink";
import TextAnchor from "@components/TextAnchor";
import Anchor from "@components/Anchor";
import { SossoSection, TextSection, InfoBox, Accordion } from "@components/index";
import GuildPageHero from "./GuildPageHero";
import FullWidthSection from "@components/Sections/FullWidthSection";

const Column = styled.div`
  display: flex;
  flex-direction: row;

  ul {
    list-style: none;
  }
`;

const GuildPageView: React.FC = () => (
  <>
    <GuildPageHero />

    <TextSection>
      <h3 id="tehtavat">Killan tehtävät ja tarina</h3>
      <div>
        <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>

        <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita, saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa uusista avoimista työpaikoista. Killalla on Otaniemen mukavin <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>

        <h6>Takana lähes satavuotinen historia</h6>

        <p>Vaikka kilta onkin ajan hermolla, on sillä takana lähes satavuotinen historia.
      Sähköinsinööriklubin tuore puheenjohtaja lausahti klubin ensimmäisessä
      varsinaisessa kokouksessa 16. helmikuuta 1921: “Koska klubi nyt ensi kerran
      kokoontuu, niin pyydän lausua toivomuksena, että klubin jäsenillä aina tulisi
      olemaan hauskaa, että toverielämä kukoistaisi ja että myös sähkötekniikkaa
      klubissa harrastettaisiin.”.</p>

        <p>Vaikka ajat ovat muuttuneet, klubi on muuttunut killaksi ja jäsenmäärä kasvanut
      alkuajoista valtavasti, ohjaavat nämä kolme asiaa edelleen killan toimintaa. Vaikka
      pitkästä historiasta kannattaa olla ylpeä, ei sitä tarvitse kokea taakkana. Uutta
      historiaa luodaan koko ajan ja tässä on meillä kaikilla mahdollista olla mukana. Ole
      aktiivinen, ota asioista selvää ja osallistu kaikkeen mahdolliseen. Tulet varmasti
      yllättymään kaikesta siitä mitä täältä keskuudestamme löytyy.</p>

        <h6>Meitä teekkareita on todella moneen lähtöön</h6>

        <p>Minkäänlaista perus- tai ihanneteekkaria ei ole olemassa, vaan paras teekkariuden
      määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
      meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
      Aalto-yliopistossa.
      Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
      yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä kiinnostavaa.</p>

        <p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
      tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
      meillä täällä opinahjossamme vallitsee ja on vallinnut koko sen historian ajan.
      Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
      tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
      </div>

      <aside>
        <div>
          <PageLink to="#jasenedut" desc="vuonna 2018&nbsp;›">
                  Yliopiston jäsenedut
          </PageLink>
          <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
                  Liity jäseneksi
          </PageLink>
        </div>
        <div>
          <InfoBox>
                  Herrasmies- tai herrasnaisuus kuuluu olennaisena osana teekkariuteen. Hyvät <TextAnchor to="https://issuu.com/studentunionayy/docs/tavoistaan_teekkari_tunnetaan/25">käytöstavat</TextAnchor> on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
          </InfoBox>
        </div>
      </aside>
    </TextSection>

    <SossoSection>
      <p>Killan hallinto koostuu XXX henkilöstä.</p>
    </SossoSection>

    <TextSection>
      <h3 id="organisaatio">Organisaatio</h3>
      <div>
        <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>

        <h6>Valtuuston toimintaa</h6>

        <p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://static.sika.sik.party">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>

        <h6>Hallituksen toimintaa</h6>
        <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
      </div>

      <aside>
        <div>
          <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">Vuoden 2019 hallinto</PageLink>
          <PageLink to="/saannot/" desc="säännöt&nbsp;›">Dolor sit amet</PageLink>
        </div>
      </aside>
    </TextSection>

    <SossoSection>
      <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
    </SossoSection>

    <Column>
      <FullWidthSection>
        <div>
          <h6>Miksi alkaa kilta-aktiiviksi?</h6>
          <p>Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!</p>
          <ul>
            <li>» Uusia ystäviä, samanhenkistä seuraa</li>
            <li>» Loistava mahdollisuus kokeilla omia kykyjään</li>
            <li>» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt</li>
          </ul>
        </div>
      </FullWidthSection>
      <FullWidthSection>
        <div>
          <h6>Runsaasti erilaisia tehtäviä</h6>
          <p>Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.</p>
          <ul>
            <li>» Haluatko <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?</li>
            <li>» <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja</li>
            <li>» Lorem ipsum</li>
          </ul>
        </div>
      </FullWidthSection>
    </Column>

    <TextSection>
      <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
      <div>
        <p>
          Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa.
        </p>
        <Accordion
          title="Akateeminen komitea">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada.
                  Suspendisse porta diam in massa suscipit congue. Nulla facilisi. Nulla egestas tempus arcu, vitae ultrices risus rhoncus ac. Ut porta orci neque, vel fermentum turpis fermentum in. Curabitur condimentum, mi in tristique pulvinar, mauris nibh bibendum neque, quis tincidunt purus eros quis dolor. Aliquam imperdiet nibh ac quam iaculis, at ullamcorper diam ultricies. Vestibulum egestas consequat justo non vehicula. Nam non egestas tellus.
                  Praesent vel auctor ligula. Phasellus faucibus vulputate erat, non fringilla sem ultrices non. In vitae elit sit amet nisl interdum ultrices nec in ligula. Ut et turpis risus. Sed mattis varius nisl, in euismod diam fringilla ac. Nunc sed eros augue. Donec sit amet quam ex. Integer luctus nulla at est rutrum, a commodo est dapibus. Maecenas sagittis scelerisque blandit. Morbi congue tortor eros, sit amet vestibulum dolor tempor vitae. In pretium tellus at velit porttitor, vitae rutrum lacus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies metus, nec placerat urna efficitur auctor. Morbi non purus magna. Ut at ex nec nunc dictum ultricies.
                  Mauris volutpat nec sem sed malesuada. Sed eu scelerisque libero. Phasellus at mauris in ligula congue interdum et sit amet ante. Sed vestibulum, sem non congue molestie, quam massa euismod sem, non porta sem mauris vitae justo. Donec et fringilla tortor. Cras sed purus eget ante elementum mattis. Nunc elit nunc, volutpat sed congue ac, varius a ligula. Aenean sit amet laoreet dolor. Aenean finibus iaculis diam, quis lacinia nisi semper id. Phasellus eu nulla sed risus accumsan finibus. Nulla vel ante id mi vulputate ultrices. Cras finibus elementum tortor, at fringilla arcu facilisis ut. Cras vitae lectus pretium, posuere risus venenatis, congue metus. Phasellus vel dapibus felis.
                  Maecenas tincidunt orci nulla. Sed maximus tellus nec lorem dignissim aliquet. Maecenas tincidunt dolor sed est laoreet, nec suscipit augue dictum. Vivamus venenatis rutrum molestie. Vestibulum in maximus leo. Duis a euismod nulla. Aenean luctus sodales quam, ut fringilla elit bibendum in. Ut in purus sit amet libero hendrerit hendrerit ac eget nisl. In ac mauris at felis suscipit scelerisque eu eget erat. Fusce accumsan tempus mauris, porta sagittis odio venenatis ac. Integer mollis nulla in velit dignissim imperdiet. Nunc ac magna ullamcorper, pretium mauris et, semper enim. Morbi aliquet accumsan turpis id rutrum. Donec purus tellus, pellentesque non nunc ac, ornare scelerisque ex.
        </Accordion>
        <Accordion title="Lorem" />
        <Accordion title="Ipsum" />
        <Accordion title="Lorem" />
        <Accordion title="Ipsum" />
      </div>
    </TextSection>
    <TextSection>
      <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
      <p>
        Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen.
      </p>
    </TextSection>

    <SossoSection>
      <p id="jasenedut">Jäsenedut vuonna 2019</p>
    </SossoSection>

    <TextSection>
      <h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
      <div>
        <p>Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.</p>
        <p>» <Anchor to={"https://download.aalto.fi"}>Download.aalto.fi</Anchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.</p>
      </div>
      <aside>
        <InfoBox>
          <Anchor to={""}>Jäseneksi liittyminen</Anchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
        </InfoBox>
      </aside>
    </TextSection>
  </>
);

export default GuildPageView;