Feature/sf agenda sortzen du (#6)

* feat: laba-gara atala sortzen du

* feat: Strapi bertsioa igotzen du eta sf-ekitaldia sortzen du

* feat: ekitaldi nagusiak erakusten ditu

* feat: beste hitzorduak erakusten ditu

* feat: ordena aldatzen du

* fix: nabigazioa konpontzen du

* fix: font-weight aldatzen du

* refactor: datu modeloak aldatzen ditu

* feat: hoverrak aldatzen ditu

* feat: estilo hobekuntzak sartzen ditu

* feat: favicon aldatzen du

* mugikor nabigazioa konpontzen du

front/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
@@ -16,7 +16,7 @@ interface DataProps {
   strapiHasiera: {
     deskribapena: string;
     izenburua: string;
-    bazkidetza: string;
+    edukia: string;
   };
 }
 
@@ -26,7 +26,7 @@ const IndexPage: React.VFC<PageProps> = () => {
       strapiHasiera {
         deskribapena
         izenburua
-        bazkidetza
+        edukia
       }
     }
   `);
@@ -47,13 +47,13 @@ const IndexPage: React.VFC<PageProps> = () => {
         izenburua={strapiHasiera.izenburua}
         deskribapena={strapiHasiera.deskribapena}
         onClick={() => {
-          window.location.replace('/#labazkidetza');
+          navigate('/#edukia');
         }}
       />
 
-      <ContentWrapper id="labazkidetza">
+      <ContentWrapper id="edukia">
         <Container>
-          <Deskribapena>{strapiHasiera.bazkidetza}</Deskribapena>
+          <Deskribapena>{strapiHasiera.edukia}</Deskribapena>
 
           <IzanLabaWrapper>
             <Botoia href="https://forms.gle/wV41CVkRX1JtHsAu9">
@@ -92,7 +92,7 @@ const Botoia = styled.a`
   display: flex;
   align-items: center;
 
-  transition: color 500ms ease-out 100ms;
+  transition: color 0.4s ease;
   &:hover {
     color: ${colors.morea};
   }

front/src/pages/kafetegia.tsx

@@ -1,4 +1,4 @@
-import { PageProps } from 'gatsby';
+import { PageProps, navigate } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
@@ -43,11 +43,11 @@ const Kafetegia: React.VFC<PageProps> = () => {
         izenburua={izenburua}
         deskribapena={deskribapena}
         onClick={() => {
-          window.location.replace('/kafetegia/#kafetegia');
+          navigate('/kafetegia#edukia');
         }}
       />
 
-      <ContentWrapper id="kafetegia">
+      <ContentWrapper id="edukia">
         <Container>
           <TaldeWrapper>
             <IzenburuWrapper>

front/src/pages/sanferminak.tsx

@@ -0,0 +1,145 @@
+import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+import { Helmet } from 'react-helmet';
+import { Gainburua } from '../components/Gainburua';
+import styled from 'styled-components';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
+import { Container } from '../components/Container';
+import { rem } from 'polished';
+import ReactMarkdown from 'react-markdown';
+import { Oina } from '../components/Oina';
+import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
+
+export interface SFEguna {
+  id: string;
+  eguna: string;
+  ekitaldi_nagusia: {
+    id: string;
+    hitzordua: string;
+    izenburua: string;
+  };
+}
+
+interface DataProps {
+  strapiSanferminak: {
+    datu_orokorrak: {
+      deskribapena: string;
+      izenburua: string;
+    };
+    edukia?: string;
+    sf_egunak?: SFEguna[];
+  };
+}
+
+const IndexPage: React.VFC<PageProps> = () => {
+  const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiSanferminak {
+        datu_orokorrak {
+          izenburua
+          deskribapena
+        }
+        edukia
+        sf_egunak {
+          eguna
+          id
+          ekitaldi_nagusia {
+            id
+            hitzordua
+            izenburua
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiSanferminak.datu_orokorrak.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      >
+        <meta
+          name="description"
+          content={strapiSanferminak.datu_orokorrak.deskribapena}
+        />
+      </Helmet>
+
+      <GlobalStyles />
+
+      <Gainburua
+        atala="sanferminak"
+        izenburua={strapiSanferminak.datu_orokorrak.izenburua}
+        deskribapena={strapiSanferminak.datu_orokorrak.deskribapena}
+        onClick={() => {
+          navigate('/sanferminak#edukia');
+        }}
+      />
+
+      <ContentWrapper id="edukia">
+        <Container>
+          {strapiSanferminak.edukia && (
+            <Deskribapena>{strapiSanferminak.edukia}</Deskribapena>
+          )}
+
+          {strapiSanferminak.sf_egunak &&
+            strapiSanferminak.sf_egunak.length > 0 && (
+              <SFEgunZerrenda>
+                {strapiSanferminak.sf_egunak.map(sfeguna => (
+                  <SFEgunaElementua key={sfeguna.id}>
+                    <SFEgunaEdukia sfeguna={sfeguna} />
+                  </SFEgunaElementua>
+                ))}
+              </SFEgunZerrenda>
+            )}
+        </Container>
+      </ContentWrapper>
+
+      <Oina />
+    </>
+  );
+};
+
+const SFEgunaElementua = styled.li`
+  padding: ${rem(size.small)};
+
+  width: 100%;
+  background-color: ${colors.beltza};
+
+  ${media.tablet`
+    aspect-ratio: 1/1;
+    margin-bottom: 0;
+  `}
+`;
+
+const SFEgunZerrenda = styled.ul`
+  display: grid;
+  grid-column-gap: ${rem(size.mini)};
+  grid-row-gap: ${rem(size.mini)};
+
+  ${media.tablet`
+    grid-template-columns: repeat(2, 1fr);
+  `}
+
+  ${media.desktop`
+    grid-template-columns: repeat(3, 1fr);
+  `}
+`;
+
+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()};
+`;
+
+export default IndexPage;