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
2023-07-01 17:27:30 +02:00
parent 51a07d2052
commit b7a7424b5a
30 changed files with 1021 additions and 88 deletions
--- a/front/src/assets/favicon.svg
+++ b/front/src/assets/favicon.svg
@@ -0,0 +1,20 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.87 89.87">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #FD3647;
+            }
+        </style>
+    </defs>
+    <path class="cls-1"
+        d="M3.75,89.87A3.76,3.76,0,0,1,0,86.73,8.61,8.61,0,0,1,0,84.9c.14-2.52.3-5,.46-7.56q.33-5.52.68-11c.14-2.29.27-4.59.41-6.89l.57-9.2c.13-2.28.27-4.56.4-6.83l.57-9.27c.14-2.2.27-4.39.4-6.59q.3-4.78.58-9.57c.14-2.3.27-4.59.41-6.89C4.64,8.52,4.78,6,5,3.44A3.74,3.74,0,0,1,9,0c1.36.13,2.7.37,4,.57L22.39,2l9.29,1.41,9.24,1.39,9.35,1.42L58.6,7.5a7.29,7.29,0,0,1,1.3.33L97.12,21.2a3.8,3.8,0,0,1,2.73,3.34,4.21,4.21,0,0,1-.09,1.27q-2.15,10.71-4.32,21.42T91.1,68.77c-.29,1.46-.59,2.91-.88,4.37a4.07,4.07,0,0,0-.07.85q.21,4.29.44,8.6c0,1,.12,2,.15,3a3.81,3.81,0,0,1-4,4.09C82.34,89.74,6,89.88,3.75,89.87Zm83.17-4c-.06-1.26-.13-2.42-.18-3.57-.14-2.85-.29-5.7-.42-8.54a4.43,4.43,0,0,1,.07-1q1.94-9.69,3.91-19.39Q93,39.92,95.74,26.45c.1-.51.19-1,.29-1.54l-.62-.25L58.66,11.45a4.35,4.35,0,0,0-.71-.18l-5.67-.86-13.34-2L24.82,6.25,10.7,4.1,8.76,3.82Q6.26,45,3.76,86.05Z" />
+    <path class="cls-1"
+        d="M47.26,78.56v1.37H43.32c-.13-.41-.19-19.51,0-20.63h4v6.93a3.17,3.17,0,0,0,.31-.24,5.43,5.43,0,0,1,4.37-1.47,6,6,0,0,1,5.42,4,9.85,9.85,0,0,1,0,7.79,6,6,0,0,1-4.39,3.8,5.63,5.63,0,0,1-5.47-1.44A1.51,1.51,0,0,0,47.26,78.56Zm6.75-6A6.18,6.18,0,0,0,53.6,70a3.16,3.16,0,0,0-3.3-2,3.07,3.07,0,0,0-2.86,2.28,7.31,7.31,0,0,0,0,4.27,3.08,3.08,0,0,0,2.93,2.27,3.15,3.15,0,0,0,3.22-2A5.65,5.65,0,0,0,54,72.53Z" />
+    <path class="cls-1"
+        d="M69.12,78.62A5.53,5.53,0,0,1,66.49,80a7.41,7.41,0,0,1-3.74,0,4.33,4.33,0,0,1-3.16-5.29,4,4,0,0,1,1.94-2.62,9.78,9.78,0,0,1,3.27-1.13l3.42-.65c.16,0,.31-.08.45-.12A1.75,1.75,0,0,0,67.19,68a4.78,4.78,0,0,0-1.51,0A2.06,2.06,0,0,0,64,69.34c-.06.14-.12.29-.21.53L60,69.16a2.58,2.58,0,0,1,.12-.48,6.12,6.12,0,0,1,4.54-4,8.8,8.8,0,0,1,4.47.1,4.55,4.55,0,0,1,3.57,4.53c0,2,0,4.07,0,6.11,0,.18,0,.36,0,.55,0,.68.24.88.93.93l.27,0v2.92A4.39,4.39,0,0,1,69.12,78.62ZM68.72,73l-3,.61a3.33,3.33,0,0,0-.64.16,4.74,4.74,0,0,0-1,.47,1.57,1.57,0,0,0,.28,2.67,3.54,3.54,0,0,0,4-1.06,2.43,2.43,0,0,0,.38-1C68.76,74.29,68.72,73.7,68.72,73Z" />
+    <path class="cls-1"
+        d="M40.9,77a3.07,3.07,0,0,1,.05.38c0,.85,0,1.71,0,2.62-1.82.21-3.54.35-4.82-1.33A5.52,5.52,0,0,1,33.51,80a7.21,7.21,0,0,1-4.09-.16,4.32,4.32,0,0,1-2.78-5.35,4,4,0,0,1,2-2.48,9.63,9.63,0,0,1,3.21-1.1l3.42-.65.45-.11A1.75,1.75,0,0,0,34.2,68a4.78,4.78,0,0,0-1.51,0A2.06,2.06,0,0,0,31,69.34c-.06.14-.12.29-.21.53L27,69.17a3.91,3.91,0,0,1,.12-.49,6.12,6.12,0,0,1,4.54-4,8.68,8.68,0,0,1,4.41.09,4.57,4.57,0,0,1,3.64,4.67c0,2,0,3.91,0,5.86v.43C39.71,76.72,39.88,76.9,40.9,77ZM35.73,73c-1.28.27-2.47.51-3.65.79a2.68,2.68,0,0,0-1,.46,1.57,1.57,0,0,0,.33,2.7,3.59,3.59,0,0,0,3.83-1,2.56,2.56,0,0,0,.45-1.11A14.07,14.07,0,0,0,35.73,73Z" />
+    <path class="cls-1" d="M11.5,59.3h4.18v17h9.49v3.66H11.54C11.41,79.52,11.37,60.16,11.5,59.3Z" />
+    <path class="cls-1"
+        d="M80.59,80H76a3.06,3.06,0,0,1-.07-.4c0-1.42,0-2.85,0-4.27a2.35,2.35,0,0,1,4.69-.07c0,1.48,0,3,0,4.45A1.35,1.35,0,0,1,80.59,80Z" />
+</svg>
--- a/front/src/assets/gezia.svg
+++ b/front/src/assets/gezia.svg
@@ -1,4 +1,5 @@
-<svg width="37" height="31" viewBox="0 0 37 31" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.249298 18.36L25.3407 18.36L17.0741 26.58L21.1571 30.64L32.32 19.54L36.3829 15.48L32.32 11.42L21.1571 0.320013L17.0741 4.39001L25.3407 12.61L0.249298 12.61L0.249298 18.36Z" fill="#191919"/>
-</svg>
+<svg width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0.249298 18.36L25.3407 18.36L17.0741 26.58L21.1571 30.64L32.32 19.54L36.3829 15.48L32.32 11.42L21.1571 0.320013L17.0741 4.39001L25.3407 12.61L0.249298 12.61L0.249298 18.36Z"
+        fill="currentColor" />
+</svg>
--- a/front/src/components/Gainburua/DesktopNabigazioa.tsx
+++ b/front/src/components/Gainburua/DesktopNabigazioa.tsx
@@ -1,18 +1,24 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { size } from '../../ui/theme';
+import { AtalaName } from './Gainburua';

-export const DesktopNabigazioa: React.FC<{
-  atala?: 'hasiera' | 'kafetegia';
-}> = ({ atala }) => {
+interface Props {
+  atala?: AtalaName;
+}
+
+export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
  return (
    <Nabigazioa>
      <EstekaZerrenda>
        <Esteka aktiboa={atala === 'hasiera'}>
          <Link to="/">Laba gara</Link>
        </Esteka>
+        <Esteka aktiboa={atala === 'sanferminak'}>
+          <Link to="/sanferminak">Sanferminak</Link>
+        </Esteka>
        <Esteka aktiboa={atala === 'kafetegia'}>
          <Link to="/kafetegia">Dastatu Laba</Link>
        </Esteka>
@@ -36,9 +42,18 @@ export const EstekaZerrenda = styled.ul`
 export const Esteka = styled.li<{ aktiboa?: boolean }>`
  padding: ${rem(size.small)};

+  color: var(--color);
+
  ${({ aktiboa }) =>
-    aktiboa &&
-    `
-    border-bottom: 3px solid var(--color);
-  `}
+    aktiboa
+      ? css`
+          border-bottom: 3px solid var(--color);
+        `
+      : css`
+          transition: color 0.4s ease;
+
+          &:hover {
+            color: var(--hover-color);
+          }
+        `}
 `;
--- a/front/src/components/Gainburua/Gainburua.tsx
+++ b/front/src/components/Gainburua/Gainburua.tsx
@@ -14,10 +14,12 @@ import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
 import Gezia from '../../assets/gezia.svg';

+export type AtalaName = 'hasiera' | 'kafetegia' | 'sanferminak';
+
 interface Props {
  izenburua?: string;
  deskribapena?: string;
-  atala?: 'hasiera' | 'kafetegia';
+  atala?: AtalaName;
  onClick?: () => void;
 }

@@ -38,7 +40,7 @@ export const Gainburua: React.FC<Props> = ({
            <MugikorLogoWrapper>
              <Link to="/">
                <LogoWrapper>
-                  <Logo title="Laba gara" />
+                  <Logo title="Laba gara" atala={atala} />
                </LogoWrapper>
              </Link>
            </MugikorLogoWrapper>
@@ -50,7 +52,7 @@ export const Gainburua: React.FC<Props> = ({
        <GainburuWrapper>
          <Link to="/">
            <LogoWrapper>
-              <Logo title="Laba gara" />
+              <Logo title="Laba gara" atala={atala} />
            </LogoWrapper>
          </Link>

@@ -83,15 +85,19 @@ export const Gainburua: React.FC<Props> = ({
 };

 const GeziaWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
+  display: none;
+
+  ${media.desktop`
+    display: flex;
+    justify-content: flex-end;
+  `}
 `;

 const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
  cursor: pointer;
  path {
-    fill: ${({ atala }) =>
-      atala === 'hasiera' ? colors.zuria : colors.beltza};
+    transition: fill 0.4s ease;
+    fill: var(--color);
  }

  animation-duration: 2s;
@@ -110,6 +116,12 @@ const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
      transform: rotate(90deg) translateX(0);
    }
  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;

 const Nagusia = styled.main`
@@ -138,20 +150,16 @@ const MugikorLogoWrapper = styled.div`
  justify-content: center;
 `;

-const Wrapper = styled.div<{ atala?: 'hasiera' | 'kafetegia' }>`
-  --color: ${({ atala }) =>
-    atala === 'hasiera' ? colors.zuria : colors.beltza};
+const Wrapper = styled.div<{ atala?: AtalaName }>`
+  --color: ${({ atala }) => getAtalaColor(atala)};
+  --hover-color: ${({ atala }) => getAtalaHoverColor(atala)};

  display: flex;
  flex-direction: column;

-  background-color: ${({ atala }) =>
-    atala === 'hasiera' ? colors.gorria : colors.horia};
+  background-color: ${({ atala }) => getAtalaBackground(atala)};
  color: var(--color);

-  /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
-  min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
-
  ${media.desktop`
    min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
      Boolean(atala) ? '100vh' : '0'};  
@@ -162,10 +170,17 @@ const LogoWrapper = styled.div`
  width: ${rem(size.huge)};
 `;

-const Logo = styled(LabaLogo)`
+const Logo = styled(LabaLogo)<{ atala?: AtalaName }>`
  path {
+    transition: fill 0.4s ease;
    fill: var(--color);
  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;

 const GainburuWrapper = styled.header`
@@ -215,3 +230,39 @@ const Izenburua = styled.h1`

  ${font.gargantuan()};
 `;
+
+function getAtalaBackground(atala?: AtalaName) {
+  if (atala === 'sanferminak') {
+    return colors.morea;
+  }
+
+  if (atala === 'hasiera') {
+    return colors.gorria;
+  }
+
+  if (atala === 'kafetegia') {
+    return colors.horia;
+  }
+
+  return colors.beltza;
+}
+
+function getAtalaColor(atala?: AtalaName) {
+  if (atala === 'hasiera' || atala === 'sanferminak') {
+    return colors.zuria;
+  }
+
+  if (atala === 'kafetegia') {
+    return colors.beltza;
+  }
+
+  return colors.zuria;
+}
+
+function getAtalaHoverColor(atala?: AtalaName) {
+  if (atala === 'sanferminak' || atala === 'hasiera') {
+    return colors.horia;
+  }
+
+  return colors.gorria;
+}
--- a/front/src/components/Gainburua/KontaktuDatuak.tsx
+++ b/front/src/components/Gainburua/KontaktuDatuak.tsx
@@ -16,7 +16,7 @@ export const KontaktuDatuak: React.FC = () => {
  return (
    <Kontaktua>
      <Helbidea>
-        <p>Gazteluko plaza 2</p>
+        <p>Gazteluko plaza, 2</p>
        <p>Iruñea</p>
      </Helbidea>

@@ -61,16 +61,30 @@ export const Instagram = styled(InstagramLogo)`
  width: ${rem(size.base)};
  height: ${rem(size.base)};
  path {
+    transition: fill 0.4s ease;
    fill: var(--color);
  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;

 export const Twitter = styled(TwitterLogo)`
  width: ${rem(size.base)};
  height: ${rem(size.base)};
  path {
+    transition: fill 0.4s ease;
    fill: var(--color);
  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;

 export const SareSozialak = styled.ul`
--- a/front/src/components/Gainburua/MugikorNabigazioa.tsx
+++ b/front/src/components/Gainburua/MugikorNabigazioa.tsx
@@ -25,6 +25,9 @@ export const MugikorNabigazioa: React.FC = () => {
              <Esteka>
                <Link to="/">Laba gara</Link>
              </Esteka>
+              <Esteka>
+                <Link to="/sanferminak">Sanferminak</Link>
+              </Esteka>
              <Esteka>
                <Link to="/kafetegia">Dastatu Laba</Link>
              </Esteka>
@@ -85,7 +88,7 @@ const OpenClose = styled.div`
 const NabigazioaWrapper = styled.div`
  @keyframes sartu {
    from {
-      right: -300px;
+      right: -100vw;
    }
    to {
      right: 0;
@@ -104,7 +107,7 @@ const NabigazioaWrapper = styled.div`
  position: fixed;
  top: 0;
  right: 0;
-  min-width: 300px;
+  width: 100vw;
  background-color: ${colors.beltza};
  color: ${colors.zuria};
  height: 100vh;
@@ -121,7 +124,7 @@ const KontaktuDatuak: React.FC = () => {
  return (
    <Kontaktua>
      <Helbidea>
-        <p>Gazteluko plaza 2</p>
+        <p>Gazteluko plaza, 2</p>
        <p>Iruñea</p>
      </Helbidea>

--- a/front/src/components/SFEgunaEdukia.tsx
+++ b/front/src/components/SFEgunaEdukia.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { datesUtils } from '../utils/dateUtils';
+import { SFEguna } from '../pages/sanferminak';
+import styled from 'styled-components';
+import { rem } from 'polished';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { graphql, useStaticQuery } from 'gatsby';
+
+interface DataProps {
+  allStrapiSfEkitaldia: {
+    nodes: {
+      id: string;
+      hitzordua: string;
+      izenburua: string;
+    }[];
+  };
+}
+
+export const SFEgunaEdukia: React.FC<{ sfeguna: SFEguna }> = ({ sfeguna }) => {
+  const { eguna, ekitaldi_nagusia } = sfeguna;
+
+  const {
+    allStrapiSfEkitaldia: { nodes: egunak },
+  } = useStaticQuery<DataProps>(graphql`
+    {
+      allStrapiSfEkitaldia {
+        nodes {
+          hitzordua
+          id
+          izenburua
+        }
+      }
+    }
+  `);
+
+  const besteEgunak = egunak.filter(
+    ekitaldia =>
+      datesUtils.areSameDay(new Date(ekitaldia.hitzordua), new Date(eguna)) &&
+      ekitaldi_nagusia.id !== ekitaldia.id,
+  );
+
+  return (
+    <SFEgunWrapper>
+      <SFEgunaEguna>Uztailak {new Date(eguna).getDate()}.</SFEgunaEguna>
+
+      <SFEgunaNagusiaOrdua>
+        {datesUtils.getHour(new Date(ekitaldi_nagusia.hitzordua))}
+      </SFEgunaNagusiaOrdua>
+
+      <SFEgunaNagusiaIzenburua>
+        {ekitaldi_nagusia.izenburua}
+      </SFEgunaNagusiaIzenburua>
+
+      {besteEgunak.map(eguna => (
+        <BesteHitzordua>
+          {datesUtils.getHour(new Date(eguna.hitzordua))} {eguna.izenburua}
+        </BesteHitzordua>
+      ))}
+    </SFEgunWrapper>
+  );
+};
+
+const BesteHitzordua = styled.p`
+  color: ${colors.zuria};
+  ${font.base()};
+  font-weight: ${fontWeight.bold};
+
+  margin-top: ${rem(size.base)};
+`;
+
+const SFEgunaEguna = styled.p`
+  margin-bottom: ${rem(size.base)};
+
+  ${font.large()};
+  color: ${colors.zuria};
+`;
+
+const SFEgunaNagusiaIzenburua = styled.h2`
+  flex-grow: 1;
+
+  ${font.large()};
+  color: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+
+const SFEgunaNagusiaOrdua = styled.p`
+  ${font.base()};
+  color: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+
+const SFEgunWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
--- a/front/src/pages/index.tsx
+++ b/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};
  }
--- a/front/src/pages/kafetegia.tsx
+++ b/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>
--- a/front/src/pages/sanferminak.tsx
+++ b/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;
--- a/front/src/ui/GlobalStyles.tsx
+++ b/front/src/ui/GlobalStyles.tsx
@@ -202,7 +202,7 @@ export const GlobalStyles = createGlobalStyle`
  }

  body {
-      font-family: 'Almarai', sans-serif;
+      font-family: 'Martel Sans', sans-serif;

      ${font.base()}
      font-weight: ${fontWeight.bold};
--- a/front/src/ui/theme/fontWeight.ts
+++ b/front/src/ui/theme/fontWeight.ts
@@ -1,4 +1,4 @@
 export const fontWeight = {
  regular: 300,
-  bold: 800,
+  bold: 700,
 };
--- a/front/src/ui/theme/index.ts
+++ b/front/src/ui/theme/index.ts
@@ -2,5 +2,6 @@ export { breakpoints } from './breakpoints';
 export { font } from './font';
 export { media } from './media';
 export { size } from './size';
-export { colors, Color } from './colors';
+export { colors } from './colors';
+export type { Color } from './colors';
 export { fontWeight } from './fontWeight';
--- a/front/src/utils/dateUtils.ts
+++ b/front/src/utils/dateUtils.ts
@@ -0,0 +1,22 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+
+export const datesUtils = {
+  getDate,
+  getHour,
+  areSameDay,
+};
+
+function getDate(rawDate: string): Date {
+  return dayjs(rawDate).toDate();
+}
+
+function getHour(date: Date): string {
+  return dayjs(date).format('H:mm');
+}
+
+function areSameDay(date: Date, reference: Date): boolean {
+  return dayjs(date).isSame(reference, 'day');
+}