Gainburua CSS modules-era pasatzen du (#11)

* chore: CSS modules sartzen du * refactor: alergeno legenda CSS modules * refactor: css modules erabiltzen du * chore: datubasea berreskuratzen du * chore: kontaktu datuak aldatzen ditu * ignore: saltoa * feat: mugikor nabigazioa erakusten du * chore: mugikor nabigazioa pasatzen du * refactor: kontaktu datuak batzen ditu * fix: gezia konpontzen du * refactor: move component * refactor: move component * refactor: move component * fix: builda konpontzen du * chore: erabiltzen ez zen konponentea kentzen du * fix: hasiera eta kafetegia ez diren atalak konpontzen ditu * chore: react-responsive dependentzia kentzen du * chore: yarn.lock eguneratzen du * fix: kontsolako erroreak kentzen ditu
2023-12-24 14:21:49 +01:00
parent cbdfd68d67
commit 6f7293db93
52 changed files with 21086 additions and 27925 deletions
--- a/front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss
+++ b/front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss
@@ -0,0 +1,53 @@
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  width: 100%;
+  display: grid;
+  grid-column-gap: var(--size-tiny);
+  grid-row-gap: var(--size-base);
+
+  grid-template-columns: repeat(3, 1fr);
+
+  @media #{$fromTablet} {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.izena {
+  margin-bottom: var(--size-tiny);
+  font-weight: 700;
+  text-align: center;
+}
+
+.zenbakia {
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-morea);
+}
+
+.alergenoWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.logoWrapper {
+  margin-bottom: var(--size-mini);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  height: var(--size-medium);
+
+  @media #{$fromDesktop} {
+    height: var(--size-huge);
+  }
+}
+
+.logo {
+  height: var(--size-medium);
+
+  @media #{$fromDesktop} {
+    height: var(--size-huge);
+  }
+}
--- a/front/src/components/AlergenoLegenda/AlergenoLegenda.tsx
+++ b/front/src/components/AlergenoLegenda/AlergenoLegenda.tsx
@@ -1,26 +1,10 @@
 import React from 'react';

-import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
-import Esnekiak from './assets/alergenoak/esnekiak.svg';
-import Arrautzak from './assets/alergenoak/arrautzak.svg';
-import Glutena from './assets/alergenoak/glutena.svg';
-import Moluskuak from './assets/alergenoak/moluskuak.svg';
-import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
-import Arraina from './assets/alergenoak/arraina.svg';
-import Lupinuak from './assets/alergenoak/lupinuak.svg';
-import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
-import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
-import Sesamoa from './assets/alergenoak/sesamoa.svg';
-import Soja from './assets/alergenoak/soja.svg';
-import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
-import Apioa from './assets/alergenoak/apioa.svg';
-import Ziapea from './assets/alergenoak/ziapea.svg';
-import styled from 'styled-components';
-import { rem } from 'polished';
-import { breakpoints, colors, fontWeight, media, size } from '../../ui/theme';
 import { mapAlergenoIdentifikadoreaToIzena } from '../../domain/mappers/mapAlergenoIdentifikadoreaToIzena';
 import { mapAlergenoIdentifikadoreaToZenbakia } from '../../domain/mappers/mapAlergenoIdentifikadoreaToZenbakia';
-import { useMediaQuery } from 'react-responsive';
+import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
+import * as styles from './AlergenoLegenda.module.scss';
+import { AlergenoLogoa } from './AlergenoLogoa';

 const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
  'esnekiak',
@@ -39,82 +23,23 @@ const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
  'ziapea',
 ];

-export const AlergenoLegenda: React.VFC = () => {
+export const AlergenoLegenda: React.FC = () => {
  return (
-    <Wrapper>
+    <div className={styles.wrapper}>
      {alergenoakOrdenaturik.map(alergenoa => (
-        <AlergenoWrapper>
-          <LogoWrapper>
+        <div className={styles.alergenoWrapper}>
+          <div className={styles.logoWrapper}>
            <AlergenoLogoa alergenoId={alergenoa} />
-          </LogoWrapper>
+          </div>

-          <Izena>{mapAlergenoIdentifikadoreaToIzena(alergenoa)}</Izena>
-          <Zenbakia>{mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}</Zenbakia>
-        </AlergenoWrapper>
+          <div className={styles.izena}>
+            {mapAlergenoIdentifikadoreaToIzena(alergenoa)}
+          </div>
+          <div className={styles.zenbakia}>
+            {mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}
+          </div>
+        </div>
      ))}
-    </Wrapper>
+    </div>
  );
 };
-
-const Izena = styled.div`
-  margin-bottom: ${rem(size.tiny)};
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-`;
-
-const Zenbakia = styled.div`
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-  color: ${colors.morea};
-`;
-
-const AlergenoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Wrapper = styled.div`
-  width: 100%;
-  display: grid;
-  grid-column-gap: ${rem(size.tiny)};
-  grid-row-gap: ${rem(size.base)};
-
-  grid-template-columns: repeat(3, 1fr);
-  ${media.tablet`
-    grid-template-columns: repeat(5, 1fr);
-  `};
-`;
-
-const LogoWrapper = styled.div`
-  margin-bottom: ${rem(size.mini)};
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-`;
-
-const AlergenoLogoa: React.VFC<{ alergenoId: AlergenoIdentifikadorea }> = ({
-  alergenoId,
-}) => {
-  const isAboveDesktop = useMediaQuery({ minWidth: breakpoints.desktop });
-  const height = rem(isAboveDesktop ? size.huge : size.medium);
-
-  const alergenoIdToLogo: { [id in AlergenoIdentifikadorea]: React.ReactNode } =
-    {
-      esnekiak: <Esnekiak height={height} />,
-      arrautzak: <Arrautzak height={height} />,
-      glutena: <Glutena height={height} />,
-      moluskuak: <Moluskuak height={height} />,
-      krustazeoak: <Krustazeoak height={height} />,
-      arraina: <Arraina height={height} />,
-      lupinuak: <Lupinuak height={height} />,
-      fruituLehorrak: <FruituLehorrak height={height} />,
-      kakahueteak: <Kakahueteak height={height} />,
-      sesamoa: <Sesamoa height={height} />,
-      soja: <Soja height={height} />,
-      sulfitoak: <Sulfitoak height={height} />,
-      apioa: <Apioa height={height} />,
-      ziapea: <Ziapea height={height} />,
-    };
-  return <>{alergenoIdToLogo[alergenoId]}</>;
-};
--- a/front/src/components/AlergenoLegenda/AlergenoLogoa.tsx
+++ b/front/src/components/AlergenoLegenda/AlergenoLogoa.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
+import Apioa from './assets/alergenoak/apioa.svg';
+import Arraina from './assets/alergenoak/arraina.svg';
+import Arrautzak from './assets/alergenoak/arrautzak.svg';
+import Esnekiak from './assets/alergenoak/esnekiak.svg';
+import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
+import Glutena from './assets/alergenoak/glutena.svg';
+import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
+import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
+import Lupinuak from './assets/alergenoak/lupinuak.svg';
+import Moluskuak from './assets/alergenoak/moluskuak.svg';
+import Sesamoa from './assets/alergenoak/sesamoa.svg';
+import Soja from './assets/alergenoak/soja.svg';
+import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
+import Ziapea from './assets/alergenoak/ziapea.svg';
+
+interface Props {
+  alergenoId: AlergenoIdentifikadorea;
+}
+
+export const AlergenoLogoa: React.FC<Props> = ({ alergenoId }) => {
+  const alergenoIdToLogo: {
+    [id in AlergenoIdentifikadorea]: React.ReactNode;
+  } = {
+    esnekiak: <Esnekiak height="100%" />,
+    arrautzak: <Arrautzak height="100%" />,
+    glutena: <Glutena height="100%" />,
+    moluskuak: <Moluskuak height="100%" />,
+    krustazeoak: <Krustazeoak height="100%" />,
+    arraina: <Arraina height="100%" />,
+    lupinuak: <Lupinuak height="100%" />,
+    fruituLehorrak: <FruituLehorrak height="100%" />,
+    kakahueteak: <Kakahueteak height="100%" />,
+    sesamoa: <Sesamoa height="100%" />,
+    soja: <Soja height="100%" />,
+    sulfitoak: <Sulfitoak height="100%" />,
+    apioa: <Apioa height="100%" />,
+    ziapea: <Ziapea height="100%" />,
+  };
+  return <>{alergenoIdToLogo[alergenoId]}</>;
+};
--- a/front/src/components/Gainburua/AtalaName.ts
+++ b/front/src/components/Gainburua/AtalaName.ts
@@ -0,0 +1 @@
+export type AtalaName = 'hasiera' | 'kafetegia';
--- a/front/src/components/Gainburua/DesktopNabigazioa.tsx
+++ b/front/src/components/Gainburua/DesktopNabigazioa.tsx
@@ -1,56 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { rem } from 'polished';
-import { size } from '../../ui/theme';
-import { AtalaName } from './Gainburua';
-import { GainburuLink } from './GainburuLink';
-
-interface Props {
-  atala?: AtalaName;
-}
-
-export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
-  return (
-    <Nabigazioa>
-      <EstekaZerrenda>
-        <Esteka aktiboa={atala === 'hasiera'}>
-          <GainburuLink to="/">Laba gara</GainburuLink>
-        </Esteka>
-        <Esteka aktiboa={atala === 'kafetegia'}>
-          <GainburuLink to="/kafetegia">Dastatu Laba</GainburuLink>
-        </Esteka>
-      </EstekaZerrenda>
-    </Nabigazioa>
-  );
-};
-
-export const Nabigazioa = styled.nav`
-  display: flex;
-  justify-content: center;
-  padding-bottom: ${rem(size.tiny)};
-`;
-
-export const EstekaZerrenda = styled.ul`
-  display: flex;
-  justify-content: center;
-  list-style-type: none;
-`;
-
-export const Esteka = styled.li<{ aktiboa?: boolean }>`
-  padding: ${rem(size.small)};
-
-  color: var(--color);
-
-  ${({ aktiboa }) =>
-    aktiboa
-      ? css`
-          border-bottom: 3px solid var(--color);
-        `
-      : css`
-          transition: color 0.4s ease;
-
-          &:hover {
-            color: var(--hover-color);
-          }
-        `}
-`;
--- a/front/src/components/Gainburua/GainburuLink.tsx
+++ b/front/src/components/Gainburua/GainburuLink.tsx
@@ -1,8 +0,0 @@
-import { Link } from 'gatsby';
-import styled from 'styled-components';
-
-export const GainburuLink = styled(Link)`
-  &:focus {
-    outline: 3px solid var(--hover-color);
-  }
-`;
--- a/front/src/components/Gainburua/Gainburua.module.scss
+++ b/front/src/components/Gainburua/Gainburua.module.scss
@@ -0,0 +1,216 @@
+@import '../../styles/tools/mediaQueries.scss';
+@import '../../styles/tools/mixins/font.scss';
+@import '../../styles/tools/mixins/container.scss';
+
+.geziaWrapper {
+  display: none;
+
+  @media #{$fromDesktop} {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.geziaLogo {
+  cursor: pointer;
+  path {
+    transition: fill 0.4s ease;
+    fill: var(--color);
+  }
+
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: bounce-2;
+  animation-timing-function: ease;
+
+  @keyframes bounce-2 {
+    0% {
+      transform: rotate(90deg) translateX(0);
+    }
+    50% {
+      transform: rotate(90deg) translateX(var(--size-base));
+    }
+    100% {
+      transform: rotate(90deg) translateX(0);
+    }
+  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
+}
+
+.nagusia {
+  flex-grow: 1;
+  @include container;
+}
+
+.mugikorWrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding-top: var(--size-base);
+
+  margin-bottom: var(--size-medium);
+}
+
+.menuWrapper {
+  grid-column: 3;
+  grid-row: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mugikorLogoWrapper {
+  grid-row: 1;
+  grid-column: 2;
+  display: flex;
+  justify-content: center;
+}
+
+.wrapper {
+  --color: var(--color-zuria);
+  --hover-color: var(--color-gorria);
+  --background-color: var(--color-beltza);
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: var(--background-color);
+  color: var(--color);
+}
+
+.hasiera {
+  --color: var(--color-zuria);
+  --hover-color: var(--color-horia);
+  --background-color: var(--color-morea);
+
+  @media #{$fromDesktop} {
+    min-height: 100dvh;
+  }
+}
+
+.kafetegia {
+  --color: var(--color-beltza);
+  --hover-color: var(--color-gorria);
+  --background-color: var(--color-horia);
+
+  @media #{$fromDesktop} {
+    min-height: 100dvh;
+  }
+}
+
+.logoWrapper {
+  width: var(--size-huge);
+}
+
+.logo {
+  path {
+    transition: fill 0.4s ease;
+    fill: var(--color);
+  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
+}
+
+.logo {
+  path {
+    transition: fill 0.4s ease;
+    fill: var(--color);
+  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
+}
+
+.gainburuWrapper {
+  padding: var(--size-base);
+  display: flex;
+  align-items: start;
+  justify-content: center;
+
+  @media #{$fromTablet} {
+    padding: var(--size-large);
+  }
+
+  @media #{$fromDesktop} {
+    justify-content: space-between;
+  }
+}
+
+.deskribapena {
+  margin-bottom: var(--size-xlarge);
+  hyphens: auto;
+
+  @include baseFont;
+
+  @media #{$fromTablet} {
+    @include largeFont;
+  }
+}
+
+.izenburuWrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: var(--size-large);
+}
+
+.marra {
+  /* altuera erabiliko den letraren berdina da */
+  height: #{toRem(41.83)};
+  flex-grow: 1;
+  box-shadow: inset 0px -3px 0px 0px var(--color);
+  margin-right: var(--size-tiny);
+}
+
+.izenburua {
+  text-align: right;
+  vertical-align: bottom;
+
+  &:after {
+    content: '.';
+  }
+
+  @include gargantuanFont;
+}
+
+.gainburuLink {
+  &:focus {
+    outline: 3px solid var(--hover-color);
+  }
+}
+
+.desktopNavigazioaWrapper {
+  display: none;
+
+  @media #{$fromDesktop} {
+    display: initial;
+  }
+}
+
+.mobileNabigazioaWrapper {
+  position: absolute;
+  top: var(--size-base);
+  right: var(--size-base);
+
+  @media #{$fromDesktop} {
+    display: none;
+  }
+}
+
+.kontaktuDatuakWrapper {
+  display: none;
+
+  @media #{$fromDesktop} {
+    display: initial;
+  }
+}
--- a/front/src/components/Gainburua/Gainburua.tsx
+++ b/front/src/components/Gainburua/Gainburua.tsx
@@ -1,265 +1,68 @@
 import React from 'react';

-import { rem } from 'polished';
-import styled from 'styled-components';
-import { Container } from '../../components/Container';
-import { breakpoints, font, media, size } from '../../ui/theme';
-import LabaLogo from '../../assets/logo.svg';
-
-import { colors } from '../../ui/theme/colors';
-import { DesktopNabigazioa } from './DesktopNabigazioa';
-import { MugikorNabigazioa } from './MugikorNabigazioa';
-import MediaQuery from 'react-responsive';
-import { KontaktuDatuak } from './KontaktuDatuak';
-import Gezia from '../../assets/gezia.svg';
-import { GainburuLink } from './GainburuLink';
-
-export type AtalaName = 'hasiera' | 'kafetegia';
+import { classNames } from '../../utilities/classnames';
+import Gezia from './assets/gezia.svg';
+import Logo from './assets/logo.svg';
+import { AtalaName } from './AtalaName';
+import { DesktopNabigazioa } from './components/DesktopNabigazioa';
+import { KontaktuDatuak } from './components/KontaktuDatuak';
+import { MugikorNabigazioa } from './components/MugikorNabigazioa';
+import * as styles from './Gainburua.module.scss';

 interface Props {
  izenburua?: string;
  deskribapena?: string;
  atala?: AtalaName;
-  onClick?: () => void;
 }

+const atalaClassname: { [key in AtalaName]: string } = {
+  hasiera: styles.hasiera,
+  kafetegia: styles.kafetegia,
+};
+
 export const Gainburua: React.FC<Props> = ({
  izenburua,
  deskribapena,
  atala,
 }) => {
  return (
-    <Wrapper atala={atala}>
-      <MediaQuery maxWidth={breakpoints.tablet}>
-        <Container>
-          <MugikorWrapper>
-            <MenuWrapper>
-              <MugikorNabigazioa />
-            </MenuWrapper>
-            <MugikorLogoWrapper>
-              <GainburuLink to="/">
-                <LogoWrapper>
-                  <Logo title="Laba gara" atala={atala} />
-                </LogoWrapper>
-              </GainburuLink>
-            </MugikorLogoWrapper>
-          </MugikorWrapper>
-        </Container>
-      </MediaQuery>
-
-      <MediaQuery minWidth={breakpoints.tablet}>
-        <GainburuWrapper>
-          <GainburuLink to="/">
-            <LogoWrapper>
-              <Logo title="Laba gara" atala={atala} />
-            </LogoWrapper>
-          </GainburuLink>
+    <div className={classNames(styles.wrapper, atala && atalaClassname[atala])}>
+      <header className={styles.gainburuWrapper}>
+        <a className={styles.gainburuLink} href="/">
+          <div className={styles.logoWrapper}>
+            <Logo className={styles.logo} title="Laba gara" />
+          </div>
+        </a>

+        <div className={styles.kontaktuDatuakWrapper}>
          <KontaktuDatuak />
-        </GainburuWrapper>
-      </MediaQuery>
+        </div>
+      </header>

      {deskribapena && (
-        <Nagusia>
-          <Container>
-            <Deskribapena>{deskribapena}</Deskribapena>
+        <main className={styles.nagusia}>
+          <p className={styles.deskribapena}>{deskribapena}</p>

-            <IzenburuWrapper>
-              <Marra />
-              <Izenburua>{izenburua}</Izenburua>
-            </IzenburuWrapper>
+          <div className={styles.izenburuWrapper}>
+            <div className={styles.marra} />
+            <h1 className={styles.izenburua}>{izenburua}</h1>
+          </div>

-            <GeziaWrapper>
-              <GainburuLink to="#edukia">
-                <GeziaLogo atala={atala} />
-              </GainburuLink>
-            </GeziaWrapper>
-          </Container>
-        </Nagusia>
+          <div className={styles.geziaWrapper}>
+            <a className={styles.gainburuLink} href="#edukia">
+              <Gezia className={styles.geziaLogo} />
+            </a>
+          </div>
+        </main>
      )}

-      <MediaQuery minWidth={breakpoints.tablet}>
+      <div className={styles.desktopNavigazioaWrapper}>
        <DesktopNabigazioa atala={atala} />
-      </MediaQuery>
-    </Wrapper>
+      </div>
+
+      <div className={styles.mobileNabigazioaWrapper}>
+        <MugikorNabigazioa />
+      </div>
+    </div>
  );
 };
-
-const GeziaWrapper = styled.div`
-  display: none;
-
-  ${media.desktop`
-    display: flex;
-    justify-content: flex-end;
-  `}
-`;
-
-const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
-  cursor: pointer;
-  path {
-    transition: fill 0.4s ease;
-    fill: var(--color);
-  }
-
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-name: bounce-2;
-  animation-timing-function: ease;
-
-  @keyframes bounce-2 {
-    0% {
-      transform: rotate(90deg) translateX(0);
-    }
-    50% {
-      transform: rotate(90deg) translateX(-${size.base}px);
-    }
-    100% {
-      transform: rotate(90deg) translateX(0);
-    }
-  }
-
-  &:hover {
-    path {
-      fill: var(--hover-color);
-    }
-  }
-`;
-
-const Nagusia = styled.main`
-  flex-grow: 1;
-`;
-
-const MugikorWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  padding-top: ${rem(size.base)};
-
-  margin-bottom: ${rem(size.medium)};
-`;
-
-const MenuWrapper = styled.div`
-  grid-column: 3;
-  grid-row: 1;
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const MugikorLogoWrapper = styled.div`
-  grid-row: 1;
-  grid-column: 2;
-  display: flex;
-  justify-content: center;
-`;
-
-const Wrapper = styled.div<{ atala?: AtalaName }>`
-  --color: ${({ atala }) => getAtalaColor(atala)};
-  --hover-color: ${({ atala }) => getAtalaHoverColor(atala)};
-
-  display: flex;
-  flex-direction: column;
-
-  background-color: ${({ atala }) => getAtalaBackground(atala)};
-  color: var(--color);
-
-  ${media.desktop`
-    min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
-      Boolean(atala) ? '100vh' : '0'};  
-  `}
-`;
-
-const LogoWrapper = styled.div`
-  width: ${rem(size.huge)};
-`;
-
-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`
-  padding: ${rem(size.tiny)};
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-
-  ${media.tablet`
-    padding: ${rem(size.large)};
-  `};
-`;
-
-const Deskribapena = styled.p`
-  margin-bottom: ${rem(size.xlarge)};
-  hyphens: auto;
-
-  ${font.base()};
-
-  ${media.tablet`
-    ${font.large()};
-  `};
-`;
-
-const IzenburuWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-bottom: ${rem(size.large)};
-`;
-
-const Marra = styled.div`
-  /* altuera erabiliko den letraren berdina da */
-  height: ${rem(41.83)};
-  flex-grow: 1;
-  box-shadow: inset 0px -3px 0px 0px var(--color);
-  margin-right: ${rem(size.tiny)};
-`;
-
-const Izenburua = styled.h1`
-  text-align: right;
-  vertical-align: bottom;
-
-  &:after {
-    content: '.';
-  }
-
-  ${font.gargantuan()};
-`;
-
-function getAtalaBackground(atala?: AtalaName) {
-  if (atala === 'hasiera') {
-    return colors.morea;
-  }
-
-  if (atala === 'kafetegia') {
-    return colors.horia;
-  }
-
-  return colors.beltza;
-}
-
-function getAtalaColor(atala?: AtalaName) {
-  if (atala === 'hasiera' ) {
-    return colors.zuria;
-  }
-
-  if (atala === 'kafetegia') {
-    return colors.beltza;
-  }
-
-  return colors.zuria;
-}
-
-function getAtalaHoverColor(atala?: AtalaName) {
-  if (atala === 'hasiera') {
-    return colors.horia;
-  }
-
-  return colors.gorria;
-}
--- a/front/src/components/Gainburua/KontaktuDatuak.tsx
+++ b/front/src/components/Gainburua/KontaktuDatuak.tsx
@@ -1,103 +0,0 @@
-import { rem } from 'polished';
-import React from 'react';
-import styled from 'styled-components';
-import { font, size } from '../../ui/theme';
-import InstagramLogo from '../../assets/instagram.svg';
-import TwitterLogo from '../../assets/twitter.svg';
-import { GainburuLink } from './GainburuLink';
-
-/**
- * ERREPIKATUA
- * KontaktuDatuak konponentea MugikorNabigazioan errepikatzen da, honek
- * logoaren fill-erako kokapenaren araberako CSS aldagaia erabiltzen duelako
- * TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
- */
-
-export const KontaktuDatuak: React.FC = () => {
-  return (
-    <Kontaktua>
-      <Helbidea>
-        <p>Gazteluko plaza, 2</p>
-        <p>Iruñea</p>
-      </Helbidea>
-
-      <SareSozialak>
-        <SareSoziala>
-          <GainburuLink
-            tabIndex={0}
-            aria-label="Laba Twitterren"
-            to="https://twitter.com/labasarea/"
-          >
-            <Twitter title="Laba Twitterren" />
-          </GainburuLink>
-        </SareSoziala>
-
-        <SareSoziala>
-          <GainburuLink
-            tabIndex={0}
-            aria-label="Laba Instagramen"
-            to="https://www.instagram.com/labasarea/"
-          >
-            <Instagram role="link" title="Laba Instagramen" />
-          </GainburuLink>
-        </SareSoziala>
-      </SareSozialak>
-    </Kontaktua>
-  );
-};
-
-export const Kontaktua = styled.div`
-  display: flex;
-`;
-
-export const SareSoziala = styled.li`
-  width: ${rem(size.base)};
-  height: ${rem(size.base)};
-
-  &:not(:last-child) {
-    margin-right: ${rem(size.small)};
-  }
-`;
-
-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`
-  display: flex;
-  align-items: center;
-  list-style-type: none;
-`;
-
-export const Helbidea = styled.address`
-  border-right: 3px solid var(--color);
-  padding-right: ${rem(size.small)};
-  margin-right: ${rem(size.small)};
-  ${font.tiny()};
-`;
--- a/front/src/components/Gainburua/MugikorNabigazioa.tsx
+++ b/front/src/components/Gainburua/MugikorNabigazioa.tsx
@@ -1,192 +0,0 @@
-import { Link } from 'gatsby';
-import { rem } from 'polished';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { font, size } from '../../ui/theme';
-import { colors } from '../../ui/theme/colors';
-import HamburgerIcon from './assets/hamburguer.svg';
-import Itxi from './assets/itxi.svg';
-import InstagramLogo from '../../assets/instagram.svg';
-import TwitterLogo from '../../assets/twitter.svg';
-
-export const MugikorNabigazioa: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      {isOpen && (
-        <NabigazioaWrapper>
-          <OpenClose onClick={() => setIsOpen(false)}>
-            <Itxi />
-          </OpenClose>
-
-          <nav>
-            <ul>
-              <Esteka>
-                <Link to="/">Laba gara</Link>
-              </Esteka>
-              <Esteka>
-                <Link to="/kafetegia">Dastatu Laba</Link>
-              </Esteka>
-            </ul>
-          </nav>
-
-          <KontaktuaWrapper>
-            <KontaktuDatuak />
-          </KontaktuaWrapper>
-        </NabigazioaWrapper>
-      )}
-
-      <OpenClose
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        <Hamburger />
-      </OpenClose>
-    </>
-  );
-};
-
-const KontaktuaWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  flex-grow: 1;
-  width: 100%;
-`;
-
-const Esteka = styled.li`
-  color: ${colors.zuria};
-  ${font.large()};
-  text-align: right;
-
-  &:not(:last-child) {
-    margin-bottom: ${rem(size.base)};
-  }
-
-  &:after {
-    content: '.';
-  }
-`;
-
-const Hamburger = styled(HamburgerIcon)`
-  path {
-    fill: var(--color);
-  }
-`;
-
-const OpenClose = styled.div`
-  cursor: pointer;
-  width: ${rem(size.medium)};
-  margin-bottom: ${rem(size.base)};
-`;
-
-const NabigazioaWrapper = styled.div`
-  @keyframes sartu {
-    from {
-      right: -100vw;
-    }
-    to {
-      right: 0;
-    }
-  }
-  animation-name: sartu;
-  animation-duration: 0.25s;
-
-  /* Containerrak sartzen duen padding berdina */
-  padding: ${rem(size.base)};
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 100vw;
-  background-color: ${colors.beltza};
-  color: ${colors.zuria};
-  height: 100vh;
-`;
-
-/**
- * ERREPIKATUA
- * KontaktuDatuak konponentea errepikatzen da, besteak logoaren fill-erako kokapenaren
- * araberako CSS aldagaia erabiltzen duelako eta hemen testu eta irudi guztiak zuriak izan
- * behar direlako
- * TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
- */
-const KontaktuDatuak: React.FC = () => {
-  return (
-    <Kontaktua>
-      <Helbidea>
-        <p>Gazteluko plaza, 2</p>
-        <p>Iruñea</p>
-      </Helbidea>
-
-      <SareSozialak>
-        <SareSoziala>
-          <a
-            tabIndex={0}
-            aria-label="Laba Twitterren"
-            href="https://twitter.com/labasarea/"
-          >
-            <Twitter title="Laba Twitterren" />
-          </a>
-        </SareSoziala>
-
-        <SareSoziala>
-          <a
-            tabIndex={0}
-            aria-label="Laba Instagramen"
-            href="https://www.instagram.com/labasarea/"
-          >
-            <Instagram role="link" title="Laba Instagramen" />
-          </a>
-        </SareSoziala>
-      </SareSozialak>
-    </Kontaktua>
-  );
-};
-
-export const Kontaktua = styled.div`
-  display: flex;
-`;
-
-export const SareSoziala = styled.li`
-  width: ${rem(size.base)};
-  height: ${rem(size.base)};
-  :not(:last-child) {
-    margin-right: ${rem(size.small)};
-  }
-`;
-
-export const Instagram = styled(InstagramLogo)`
-  width: ${rem(size.base)};
-  height: ${rem(size.base)};
-  path {
-    fill: ${colors.zuria};
-  }
-`;
-
-export const Twitter = styled(TwitterLogo)`
-  width: ${rem(size.base)};
-  height: ${rem(size.base)};
-  path {
-    fill: ${colors.zuria};
-  }
-`;
-
-export const SareSozialak = styled.ul`
-  display: flex;
-  align-items: center;
-  list-style-type: none;
-`;
-
-export const Helbidea = styled.address`
-  border-right: 3px solid ${colors.zuria};
-  padding-right: ${rem(size.small)};
-  margin-right: ${rem(size.small)};
-  ${font.tiny()};
-`;
--- a/front/src/components/Gainburua/assets/gezia.svg
+++ b/front/src/components/Gainburua/assets/gezia.svg
@@ -0,0 +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="#ffffff" />
+</svg>
--- a/front/src/components/Gainburua/assets/logo.svg
+++ b/front/src/components/Gainburua/assets/logo.svg
@@ -0,0 +1 @@
+<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:#ffffff;}</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/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.module.scss
+++ b/front/src/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.module.scss
@@ -0,0 +1,32 @@
+.nabigazioa {
+  display: flex;
+  justify-content: center;
+  padding-bottom: var(--size-tiny);
+}
+
+.estekaZerrenda {
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+
+.esteka {
+  padding: var(--size-small);
+
+  color: var(--color);
+
+  transition: color 0.4s ease;
+
+  &:hover {
+    color: var(--hover-color);
+  }
+}
+
+.active {
+  border-bottom: 3px solid var(--color);
+}
+.gainburuLink {
+  &:focus {
+    outline: 3px solid var(--hover-color);
+  }
+}
--- a/front/src/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.tsx
+++ b/front/src/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from 'gatsby';
+
+import { classNames } from '../../../../utilities/classnames';
+import * as styles from './DesktopNabigazioa.module.scss';
+
+import type { AtalaName } from '../../AtalaName';
+interface Props {
+  atala?: AtalaName;
+}
+
+export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
+  return (
+    <nav className={styles.nabigazioa}>
+      <ul className={styles.estekaZerrenda}>
+        <li
+          className={classNames(
+            styles.esteka,
+            atala === 'hasiera' && styles.active,
+          )}
+        >
+          <Link className={styles.gainburuLink} to="/">
+            Laba gara
+          </Link>
+        </li>
+
+        <li
+          className={classNames(
+            styles.esteka,
+            atala === 'kafetegia' && styles.active,
+          )}
+        >
+          <Link className={styles.gainburuLink} to="/kafetegia">
+            Dastatu Laba
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
--- a/front/src/components/Gainburua/components/DesktopNabigazioa/index.ts
+++ b/front/src/components/Gainburua/components/DesktopNabigazioa/index.ts
@@ -0,0 +1 @@
+export { DesktopNabigazioa } from './DesktopNabigazioa';
--- a/front/src/components/Gainburua/components/KontaktuDatuak/KontaktuDatuak.module.scss
+++ b/front/src/components/Gainburua/components/KontaktuDatuak/KontaktuDatuak.module.scss
@@ -0,0 +1,78 @@
+@import '../../../../styles/tools/mixins/font.scss';
+
+.wrapper {
+  display: flex;
+}
+
+.sareSozialak {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+}
+
+.sareSoziala {
+  width: var(--size-base);
+  height: var(--size-base);
+
+  &:not(:last-child) {
+    margin-right: var(--size-small);
+  }
+}
+
+.sareSozialLogo {
+  width: var(--size-base);
+  height: var(--size-base);
+}
+
+.helbidea {
+  padding-right: var(--size-small);
+  margin-right: var(--size-small);
+
+  @include tinyFont;
+}
+
+.themeBorder {
+  border-right: 3px solid var(--color);
+}
+
+.zuriBorder {
+  border-right: 3px solid var(--color-zuria);
+}
+
+.themeLogo {
+  path {
+    transition: fill 0.4s ease;
+    fill: var(--color);
+  }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
+}
+
+.zuriLogo {
+  path {
+    transition: fill 0.4s ease;
+    fill: var(--color-zuria);
+  }
+
+  &:hover {
+    path {
+      fill: var(--color-gorria);
+    }
+  }
+}
+
+.themeLink {
+  &:focus {
+    outline: 3px solid var(--hover-color);
+  }
+}
+
+.zuriLink {
+  &:focus {
+    outline: 3px solid var(--color-gorria);
+  }
+}
--- a/front/src/components/Gainburua/components/KontaktuDatuak/KontaktuDatuak.tsx
+++ b/front/src/components/Gainburua/components/KontaktuDatuak/KontaktuDatuak.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import InstagramLogo from '../../../../assets/instagram.svg';
+import TwitterLogo from '../../../../assets/twitter.svg';
+import { classNames } from '../../../../utilities/classnames';
+import * as styles from './KontaktuDatuak.module.scss';
+
+interface Props {
+  kolorea?: KontaktuaColor;
+}
+
+type KontaktuaColor = 'theme' | 'zuria';
+type ColorToStyleDictionary = {
+  [color in KontaktuaColor]: string;
+};
+
+const colorToLogoStyle: ColorToStyleDictionary = {
+  theme: styles.themeLogo,
+  zuria: styles.zuriLogo,
+};
+
+const colorToBorderStyle: ColorToStyleDictionary = {
+  theme: styles.themeBorder,
+  zuria: styles.zuriBorder,
+};
+
+const colorToLinkStyle: ColorToStyleDictionary = {
+  theme: styles.themeLink,
+  zuria: styles.zuriLink,
+};
+
+export const KontaktuDatuak: React.FC<Props> = ({ kolorea = 'theme' }) => {
+  return (
+    <div className={styles.wrapper}>
+      <address
+        className={classNames(styles.helbidea, colorToBorderStyle[kolorea])}
+      >
+        <p>Gazteluko plaza, 2</p>
+        <p>Iruñea</p>
+      </address>
+
+      <ul className={styles.sareSozialak}>
+        <li className={styles.sareSoziala}>
+          <a
+            className={colorToLinkStyle[kolorea]}
+            tabIndex={0}
+            aria-label="Laba Twitterren"
+            href="https://twitter.com/labasarea/"
+          >
+            <TwitterLogo
+              className={classNames(
+                styles.sareSozialLogo,
+                colorToLogoStyle[kolorea],
+              )}
+              title="Laba Twitterren"
+            />
+          </a>
+        </li>
+
+        <li className={styles.sareSoziala}>
+          <a
+            className={colorToLinkStyle[kolorea]}
+            tabIndex={0}
+            aria-label="Laba Instagramen"
+            href="https://www.instagram.com/labasarea/"
+          >
+            <InstagramLogo
+              className={classNames(
+                styles.sareSozialLogo,
+                colorToLogoStyle[kolorea],
+              )}
+              title="Laba Instagramen"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};
--- a/front/src/components/Gainburua/components/KontaktuDatuak/index.ts
+++ b/front/src/components/Gainburua/components/KontaktuDatuak/index.ts
@@ -0,0 +1 @@
+export { KontaktuDatuak } from './KontaktuDatuak';
--- a/front/src/components/Gainburua/components/MugikorNabigazioa/MugikorNabigazioa.module.scss
+++ b/front/src/components/Gainburua/components/MugikorNabigazioa/MugikorNabigazioa.module.scss
@@ -0,0 +1,63 @@
+@import '../../../../styles/tools/mixins/font.scss';
+
+.kontaktuaWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.hamburguer {
+  path {
+    fill: var(--color);
+  }
+}
+
+.esteka {
+  color: var(--color-zuria);
+  @include largeFont;
+  text-align: right;
+
+  &:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+
+  &:after {
+    content: '.';
+  }
+}
+
+.openClose {
+  cursor: pointer;
+  width: var(--size-medium);
+  margin-bottom: var(--size-base);
+}
+
+.nabigazioaWrapper {
+  @keyframes sartu {
+    from {
+      right: -100vw;
+    }
+    to {
+      right: 0;
+    }
+  }
+  animation-name: sartu;
+  animation-duration: 0.25s;
+
+  /* Containerrak sartzen duen padding berdina */
+  padding: var(--size-base);
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100dvw;
+  background-color: var(--color-beltza);
+  color: var(--color-zuria);
+  height: 100dvh;
+}
--- a/front/src/components/Gainburua/components/MugikorNabigazioa/MugikorNabigazioa.tsx
+++ b/front/src/components/Gainburua/components/MugikorNabigazioa/MugikorNabigazioa.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+import { Link } from 'gatsby';
+
+import HamburgerIcon from '../../assets/hamburguer.svg';
+import Itxi from '../../assets/itxi.svg';
+import { KontaktuDatuak } from '../KontaktuDatuak';
+import * as styles from './MugikorNabigazioa.module.scss';
+
+export const MugikorNabigazioa: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {isOpen && (
+        <div className={styles.nabigazioaWrapper}>
+          <div className={styles.openClose} onClick={() => setIsOpen(false)}>
+            <Itxi />
+          </div>
+
+          <nav>
+            <ul>
+              <li className={styles.esteka}>
+                <Link to="/">Laba gara</Link>
+              </li>
+              <li className={styles.esteka}>
+                <Link to="/kafetegia">Dastatu Laba</Link>
+              </li>
+            </ul>
+          </nav>
+
+          <div className={styles.kontaktuaWrapper}>
+            <KontaktuDatuak kolorea="zuria" />
+          </div>
+        </div>
+      )}
+
+      <div
+        className={styles.openClose}
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        <HamburgerIcon className={styles.hamburguer} />
+      </div>
+    </>
+  );
+};
--- a/front/src/components/Gainburua/components/MugikorNabigazioa/index.ts
+++ b/front/src/components/Gainburua/components/MugikorNabigazioa/index.ts
@@ -0,0 +1 @@
+export { MugikorNabigazioa } from './MugikorNabigazioa';
--- a/front/src/pages/404.tsx
+++ b/front/src/pages/404.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Link } from 'gatsby';
-import { GlobalStyles } from '../ui/GlobalStyles';
-import { Gainburua } from '../components/Gainburua';
-import { Container } from '../components/Container';
 import { Helmet } from 'react-helmet';

-const NotFoundPage: React.VFC = () => {
+import { Link } from 'gatsby';
+
+import { Container } from '../components/Container';
+import { Gainburua } from '../components/Gainburua';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+const NotFoundPage: React.FC = () => {
  return (
    <>
      <Helmet
--- a/front/src/pages/kafetegia.tsx
+++ b/front/src/pages/kafetegia.tsx
@@ -1,23 +1,23 @@
-import { PageProps, navigate } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';

-import { Gainburua } from '../components/Gainburua';
-import { Container } from '../components/Container';
+import { PageProps } from 'gatsby';
+import { rem } from 'polished';
 import styled from 'styled-components';
-import { colors, font, fontWeight, media, size } from '../ui/theme';

 import BeganoaLogo from '../assets/beganoa.svg';
 import EkologikoaLogo from '../assets/ekologikoa.svg';
-import { rem } from 'polished';
-import { Produktua } from '../domain/models/Produktua';
-import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
+import { Container } from '../components/Container';
+import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
 import { SEO } from '../components/SEO';
 import { produktuaFactory } from '../domain/factories/produktuaFactory';
+import { Produktua } from '../domain/models/Produktua';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
+import { useKafetegiaData } from '../viewQueries/useKafetegiaData';

-const Kafetegia: React.VFC<PageProps> = ({ location }) => {
+const Kafetegia: React.FC<PageProps> = ({ location }) => {
  const { izenburua, deskribapena, menua } = useKafetegiaData();

  // oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
@@ -34,9 +34,6 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
        atala="kafetegia"
        izenburua={izenburua}
        deskribapena={deskribapena}
-        onClick={() => {
-          navigate('/kafetegia#edukia');
-        }}
      />

      <ContentWrapper id="edukia">
@@ -47,16 +44,14 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
              'StrapiComponentKafetegiaProduktuTaldea'
            ) {
              return (
-                <>
-                  <ZerrendaWrapper>
-                    <ProduktuZerrenda
-                      izena={konponentea.izenburua}
-                      produktuZerrenda={konponentea.produktuak.map(
-                        produktuaFactory,
-                      )}
-                    />
-                  </ZerrendaWrapper>
-                </>
+                <ZerrendaWrapper key={konponentea.id}>
+                  <ProduktuZerrenda
+                    izena={konponentea.izenburua}
+                    produktuZerrenda={konponentea.produktuak.map(
+                      produktuaFactory,
+                    )}
+                  />
+                </ZerrendaWrapper>
              );
            }

@@ -64,7 +59,7 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
              konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
            ) {
              return (
-                <IzenburuWrapper>
+                <IzenburuWrapper key={konponentea.id}>
                  <Marra />
                  <Izenburua>{konponentea.izenburuBalioa}</Izenburua>
                </IzenburuWrapper>
@@ -120,30 +115,32 @@ const ProduktuZerrenda: React.FC<{
  <ProduktuTaula>
    {izena && <ProduktuMota>{izena}</ProduktuMota>}

-    {produktuZerrenda.map(produktua => (
-      <tr key={produktua.id}>
-        <Ezaugarria>
-          {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
-        </Ezaugarria>
-        <Ezaugarria>
-          {produktua.ekologikoa && (
-            <EkologikoaLogo title="Produktu ekologikoa" />
-          )}
-        </Ezaugarria>
-        <Izena scope="row">
-          {produktua.izena}{' '}
-          {produktua.alergenoak.map(alergenoa => (
-            <Alergenoa>{alergenoa.zenbakia}</Alergenoa>
-          ))}
-        </Izena>
-        <Prezioa>
-          {new Intl.NumberFormat('eu-ES', {
-            style: 'currency',
-            currency: 'EUR',
-          }).format(produktua.prezioa)}
-        </Prezioa>
-      </tr>
-    ))}
+    <tbody>
+      {produktuZerrenda.map(produktua => (
+        <tr key={produktua.id}>
+          <Ezaugarria>
+            {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
+          </Ezaugarria>
+          <Ezaugarria>
+            {produktua.ekologikoa && (
+              <EkologikoaLogo title="Produktu ekologikoa" />
+            )}
+          </Ezaugarria>
+          <Izena scope="row">
+            {produktua.izena}{' '}
+            {produktua.alergenoak.map(alergenoa => (
+              <Alergenoa>{alergenoa.zenbakia}</Alergenoa>
+            ))}
+          </Izena>
+          <Prezioa>
+            {new Intl.NumberFormat('eu-ES', {
+              style: 'currency',
+              currency: 'EUR',
+            }).format(produktua.prezioa)}
+          </Prezioa>
+        </tr>
+      ))}
+    </tbody>
  </ProduktuTaula>
 );

--- a/front/src/styles/cssConfig.scss
+++ b/front/src/styles/cssConfig.scss
@@ -0,0 +1,4 @@
+@import 'settings';
+@import 'generic';
+@import 'tools';
+@import 'utilities';
--- a/front/src/styles/generic/index.scss
+++ b/front/src/styles/generic/index.scss
@@ -0,0 +1,2 @@
+@import 'reset';
+@import 'reboot';
--- a/front/src/styles/generic/reboot.scss
+++ b/front/src/styles/generic/reboot.scss
@@ -0,0 +1,35 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* 1 */
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  /* 4 */
+  /* stylelint-disable-line */
+  -ms-text-size-adjust: 100%;
+  /* 4 */
+  /* stylelint-disable-line */
+  -ms-overflow-style: scrollbar;
+  /* 5 */
+  -webkit-tap-highlight-color: rgba(#000, 0);
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Martel Sans', sans-serif;
+  min-height: 100vh;
+}
+
+/* stylelint-disable-next-line */
+-ms-viewport {
+  width: device-width;
+}
+
+strong {
+  font-weight: 700;
+}
--- a/front/src/styles/generic/reset.scss
+++ b/front/src/styles/generic/reset.scss
@@ -0,0 +1,146 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+u,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit; /* stylelint-disable-line */
+  vertical-align: baseline;
+}
+em,
+i,
+b {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+*:focus,
+:active {
+  outline: 0;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: inherit;
+}
--- a/front/src/styles/settings/colors.scss
+++ b/front/src/styles/settings/colors.scss
@@ -0,0 +1,8 @@
+:root {
+  --color-beltza: #191919;
+  --color-urdina: #8fbbfd;
+  --color-morea: #510dfb;
+  --color-horia: #fdb201;
+  --color-gorria: #fd3647;
+  --color-zuria: #ffffff;
+}
--- a/front/src/styles/settings/index.scss
+++ b/front/src/styles/settings/index.scss
@@ -0,0 +1,2 @@
+@import 'colors';
+@import 'sizes';
--- a/front/src/styles/settings/sizes.scss
+++ b/front/src/styles/settings/sizes.scss
@@ -0,0 +1,14 @@
+@import '../tools/functions.scss';
+
+:root {
+  --size-none: #{toRem(0)};
+  --size-xtiny: #{toRem(4)};
+  --size-tiny: #{toRem(8)};
+  --size-small: #{toRem(12)};
+  --size-mini: #{toRem(16)};
+  --size-base: #{toRem(24)};
+  --size-medium: #{toRem(32)};
+  --size-large: #{toRem(48)};
+  --size-xlarge: #{toRem(64)};
+  --size-huge: #{toRem(96)};
+}
--- a/front/src/styles/tools/functions.scss
+++ b/front/src/styles/tools/functions.scss
@@ -0,0 +1,5 @@
+@function toRem($value) {
+    $remValue: calc($value / 16) + rem;
+
+    @return $remValue;
+}
--- a/front/src/styles/tools/index.scss
+++ b/front/src/styles/tools/index.scss
@@ -0,0 +1,2 @@
+@import 'functions';
+@import 'mediaQueries';
--- a/front/src/styles/tools/mediaQueries.scss
+++ b/front/src/styles/tools/mediaQueries.scss
@@ -0,0 +1,17 @@
+// Hemos visto que .98 es una solución standard para no romper los estilos en las décimas de pixel entre un mediaquerie y otro.
+// OJO! Tienen que ser unidades fraccionarias, .99 no funciona
+// https://stackoverflow.com/questions/70120238/do-i-consider-decimal-point-of-px-in-media-query
+$mobileMax: 767.98px;
+
+$tabletMin: 768px;
+$tabletMax: 1023.98px;
+
+$desktopMin: 1024px;
+
+$onlyMobile: 'only screen and (max-width: ' + $mobileMax + ')';
+$onlyTablet: 'only screen and (min-width: ' + $tabletMin + ') AND (max-width: ' +
+  $tabletMax + ')';
+$onlyDesktop: 'only screen and (min-width: ' + $desktopMin + ')';
+
+$fromTablet: 'only screen and (min-width: ' + $tabletMin + ')';
+$fromDesktop: 'only screen and (min-width: ' + $desktopMin + ')';
--- a/front/src/styles/tools/mixins/container.scss
+++ b/front/src/styles/tools/mixins/container.scss
@@ -0,0 +1,19 @@
+@import '../mediaQueries.scss';
+
+@mixin container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--size-small);
+  padding-right: var(--size-small);
+  width: 100%;
+
+  @media #{$fromTablet} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 744px;
+  }
+
+  @media #{$fromDesktop} {
+    width: 1014px;
+  }
+}
--- a/front/src/styles/tools/mixins/font.scss
+++ b/front/src/styles/tools/mixins/font.scss
@@ -0,0 +1,31 @@
+@import '../functions.scss';
+
+@mixin tinyFont() {
+  font-size: #{toRem(12.64)};
+  line-height: #{toRem(17)};
+}
+
+@mixin smallFont() {
+  font-size: #{toRem(16)};
+  line-height: #{toRem(22)};
+}
+
+@mixin baseFont() {
+  font-size: #{toRem(18)};
+  line-height: #{toRem(24)};
+}
+
+@mixin largeFont() {
+  font-size: #{toRem(25.63)};
+  line-height: #{toRem(35)};
+}
+
+@mixin hugeFont() {
+  font-size: #{toRem(36.41)};
+  line-height: #{toRem(50)};
+}
+
+@mixin gargantuanFont() {
+  font-size: #{toRem(41.83)};
+  line-height: #{toRem(57)};
+}
--- a/front/src/styles/tools/mixins/outline.scss
+++ b/front/src/styles/tools/mixins/outline.scss
@@ -0,0 +1,5 @@
+@import '../functions.scss';
+
+@mixin outline {
+  outline: #{toRem(2)} solid var(--focus-outline);
+}
--- a/front/src/styles/utilities/index.scss
+++ b/front/src/styles/utilities/index.scss
@@ -0,0 +1 @@
+@import 'visuallyHidden';
--- a/front/src/styles/utilities/visuallyHidden.scss
+++ b/front/src/styles/utilities/visuallyHidden.scss
@@ -0,0 +1,14 @@
+.visually-hidden:not(:focus):not(:active) {
+  position: absolute;
+
+  overflow: hidden;
+
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
--- a/front/src/ui/GlobalStyles.tsx
+++ b/front/src/ui/GlobalStyles.tsx
@@ -1,4 +1,5 @@
 import { createGlobalStyle, css } from 'styled-components';
+
 import { font, fontWeight } from './theme';
 import { colors } from './theme/colors';

@@ -202,7 +203,7 @@ export const GlobalStyles = createGlobalStyle`
  }

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

      ${font.base()}
      font-weight: ${fontWeight.bold};
--- a/front/src/utilities/classnames.ts
+++ b/front/src/utilities/classnames.ts
@@ -0,0 +1,26 @@
+type classNameProp =
+  | string
+  | { [key: string]: boolean }
+  | null
+  | undefined
+  | false
+
+export const classNames = (...classNames: classNameProp[]): string => {
+  const resultClasses: string[] = []
+
+  classNames.forEach(className => {
+    if (!className) return
+
+    if (typeof className === 'string') {
+      return resultClasses.push(className)
+    }
+
+    Object.keys(className).forEach(key => {
+      if (className[key]) {
+        resultClasses.push(key)
+      }
+    })
+  })
+
+  return resultClasses.join(' ')
+}
--- a/front/src/viewQueries/useKafetegiaData.ts
+++ b/front/src/viewQueries/useKafetegiaData.ts
@@ -1,14 +1,17 @@
 import { graphql, useStaticQuery } from 'gatsby';
+
 import { ProduktuaDTO } from '../domain/dtos/ProduktuaDTO';
 import { KafetegiaData } from './KafetegiaData';

 export type MenuKonponentea =
  | {
      konponentea: 'StrapiComponentKafetegiaIzenburua';
+      id: string;
      izenburuBalioa: string;
    }
  | {
      konponentea: 'StrapiComponentKafetegiaProduktuTaldea';
+      id: string;
      izenburua: string;
      produktuak: ProduktuaDTO[];
    };
@@ -36,8 +39,10 @@ export function useKafetegiaData(): KafetegiaData {
            id
          }
          ... on StrapiComponentKafetegiaProduktuTaldea {
+            id
            izenburua
            produktuak {
+              id
              izena
              prezioa
              beganoa
				`@@ -0,0 +1 @@`
				`export type AtalaName = 'hasiera' \| 'kafetegia';`
				`@@ -0,0 +1 @@`
				<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:#ffffff;}</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>
				`@@ -0,0 +1 @@`
				`export { DesktopNabigazioa } from './DesktopNabigazioa';`
				`@@ -0,0 +1 @@`
				`export { KontaktuDatuak } from './KontaktuDatuak';`
				`@@ -0,0 +1 @@`
				`export { MugikorNabigazioa } from './MugikorNabigazioa';`