import React from "react";
import { Link } from "@components/index";
import {
  Hero, HeroPrimarySection, HeroAside, HeroAsideItem,
} from "@components/Hero";

const GuildPageHero: React.FC = () => (
  <Hero>
    <HeroPrimarySection header="Kilta koostuu Aalto-yliopiston opiskelijoista, joita yhdistää erilaiset sähkötekniikkaan liittyvät alat">
      <p>
        Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta <Link to="/opinnot_ja_ura">opetusta</Link>, ja että heistä valmistuu alansa huippuosaajia.
        Uusille opiskelijoille kilta järjestää <Link to="/kilta/fuksi">fuksikasvatusta</Link>, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa.
        Kilta tarjoaa vastapainoa opiskelulle erilaisten <Link to="/kilta/toiminta">tapahtumien</Link> muodossa ja välittää jäsenilleen tietoa alan <Link to="/yritysyhteistyo">työpaikoista ja yrityksistä</Link>.
      </p>
      <p>Kilta toimii opiskelijoiden voimin. Killan <Link to="#toimintaan">vapaaehtoisena</Link> pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.</p>
    </HeroPrimarySection>

    <HeroAside bgColor="lightTurquoise">
      <HeroAsideItem
        header="Kuka vastaa killan toiminnasta?"
        link="#organisaatio"
        linkText="Killan hallinnosta&nbsp;›"
      />
      <HeroAsideItem
        header="Miksi lähteä kiltatoimintaan?"
        link="#toimintaan"
        linkText="Kiltatoiminnasta&nbsp;›"
      />
      <HeroAsideItem
        header="Kilta tarjoaa erilaisia palveluita"
        link="#palvelut"
        linkText="Kiltahuone ja muut palvelut&nbsp;›"
      />
    </HeroAside>
  </Hero>
);

export default GuildPageHero;
