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/pages/index.tsx

@@ -1,26 +1,17 @@
-import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Gainburua } from '../components/Gainburua';
-import styled from 'styled-components';
-import { colors, font, fontWeight, size } from '../ui/theme';
-import { Container } from '../components/Container';
-import { rem } from 'polished';
-import Gezia from '../assets/gezia.svg';
-import ReactMarkdown from 'react-markdown';
-import { Oina } from '../components/Oina';
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+
 import { SEO } from '../components/SEO';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { Hasiera } from '../views/Hasiera/Hasiera';
+import { HasieraContent } from '../views/Hasiera/HasieraContent';
 
 interface DataProps {
-  strapiHasiera: {
-    deskribapena: string;
-    izenburua: string;
-    edukia: string;
-  };
+  strapiHasiera: HasieraContent;
 }
 
-const IndexPage: React.VFC<PageProps> = ({ location }) => {
+const IndexPage: React.FC<PageProps> = ({ location }) => {
   const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
     {
       strapiHasiera {
@@ -41,74 +32,9 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
 
       <GlobalStyles />
 
-      <Gainburua
-        atala="hasiera"
-        izenburua={strapiHasiera.izenburua}
-        deskribapena={strapiHasiera.deskribapena}
-        onClick={() => {
-          navigate('/#edukia');
-        }}
-      />
-
-      <ContentWrapper id="edukia">
-        <Container>
-          <Deskribapena>{strapiHasiera.edukia}</Deskribapena>
-
-          <IzanLabaWrapper>
-            <Botoia href="https://forms.gle/wV41CVkRX1JtHsAu9">
-              <GeziaLogo /> Labazkidetu.
-            </Botoia>
-          </IzanLabaWrapper>
-        </Container>
-      </ContentWrapper>
-
-      <Oina />
+      <Hasiera content={strapiHasiera} />
     </>
   );
 };
 
-const Deskribapena = styled(ReactMarkdown)`
-  margin-bottom: ${rem(size.large)};
-
-  p:not(-last-child) {
-    margin-bottom: ${rem(size.base)};
-  }
-`;
-
-const ContentWrapper = styled.div`
-  padding: ${size.huge}px 0;
-  font-weight: ${fontWeight.regular};
-  ${font.large()};
-`;
-
-const Botoia = styled.a`
-  border: 2px solid ${colors.beltza};
-  ${font.large()};
-  padding: ${rem(size.base)};
-  background: ${colors.zuria};
-  font-weight: ${fontWeight.bold};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  transition: color 0.4s ease;
-  &:hover {
-    color: ${colors.morea};
-  }
-
-  &:focus {
-    border: 2px solid ${colors.zuria};
-    outline: 3px solid ${colors.morea};
-  }
-`;
-
-const GeziaLogo = styled(Gezia)`
-  margin-right: ${rem(size.tiny)};
-`;
-
-const IzanLabaWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
 export default IndexPage;