Hasiera css modulesera pasatzen du (#12)

* refactor: extract component

* hasiera CSS modules-era pasatzen du

* refactor: Container css modulesera pasatzen du

* fix: maketazioa

front/src/views/Hasiera/Hasiera.module.scss

@@ -0,0 +1,44 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.contentWrapper {
+  padding: var(--size-huge) 0;
+  font-weight: 300;
+  @include largeFont;
+}
+
+.edukia {
+  margin-bottom: var(--size-large);
+
+  p:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}
+
+.izanLabaWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.callToAction {
+  border: 2px solid var(--color-beltza);
+  @include largeFont;
+  padding: var(--size-base);
+  background: var(--color-zuria);
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  transition: color 0.4s ease;
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &:focus {
+    outline: 3px solid var(--color-morea);
+  }
+}
+
+.gezia {
+  margin-right: var(--size-tiny);
+}

front/src/views/Hasiera/Hasiera.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import Gezia from '../../assets/gezia.svg';
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+import { Oina } from '../../components/Oina';
+import * as styles from './Hasiera.module.scss';
+import { HasieraContent } from './HasieraContent';
+
+interface Props {
+  content: HasieraContent;
+}
+
+export const Hasiera: React.FC<Props> = ({ content }) => {
+  const { izenburua, deskribapena, edukia } = content;
+  return (
+    <>
+      <Gainburua
+        atala="hasiera"
+        izenburua={izenburua}
+        deskribapena={deskribapena}
+      />
+
+      <div className={styles.contentWrapper} id="edukia">
+        <Container>
+          <ReactMarkdown className={styles.edukia}>{edukia}</ReactMarkdown>
+
+          <div className={styles.izanLabaWrapper}>
+            <a
+              className={styles.callToAction}
+              href="https://forms.gle/wV41CVkRX1JtHsAu9"
+            >
+              <Gezia className={styles.gezia} /> Labazkidetu.
+            </a>
+          </div>
+        </Container>
+      </div>
+
+      <Oina />
+    </>
+  );
+};

front/src/views/Hasiera/HasieraContent.ts

@@ -0,0 +1,5 @@
+export interface HasieraContent {
+  deskribapena: string;
+  izenburua: string;
+  edukia: string;
+}

front/src/views/Hasiera/index.ts

@@ -0,0 +1 @@
+export { Hasiera } from './Hasiera';