Laba bizi atala sortzen du (#17)

* feat: laba bizi backenda sortzen du

* chore: Strapi bertsioa igotzen du

* chore: gatsbyn tipo berriak sortzen ditu

* feat: izena aldatzen du

* refactor: extract interface

* feat: ekintzaren bista sortzen du

* feat: zikloa Gatsbyn sortzen du

* chore: erabiltzaile izena aldatzen du

* feat: bizi atala sortzen du

* feat: bizi atalean ekintza eta zikloak erakusten ditu

* fix: focus visible erabiltzen du

* chore: ekintzak sartzen ditu

* feat: semantika hobetzen du

* feat: titularra erakusten du

* feat: colorea aldaten du

* feat: izenbururako hoverra konpontzen du

* feat: dastatu laba fonteak aldatzen ditu

* feat: partially active sartzen du esteketan

* refactor: cubic bezier kentzen du

* database

* chore: irudiak databasetik ezabatzen ditu

* feat: Strapi bertsioa igotzen du

* feat: cloudinary konfiguratzen du

* feat: kartelak erakusten ditu

* chore: ziklo antiespezista sortzen du

* chore: zikloa aldatzen du

* chore: tortura ekintza sortzen du

* feat: ekintza layout sortzen du

* feat: maketazioa konpontzen du

* chore: Strapi bertsioa eguneratzen du

* refactor: naming

* feat: gainburua sortzen du

* feat: maketazio dohikuntzak

* feat: ekintza zerrenda sortzen du

* feat: maketazioa hobetzen du (agian)

* feat: blur kentzen du

* fix: preview-a konpontzen du

* feat: hitzordua sartzen du

* fix: datak konpontzen ditu

* feat: irudiak handitzen ditu

* feat: draft and publish kentzen du

* feat: strapi bertsioa igotzen du

* chore: querya aldatzen du

* feat: zikloa maketatzen du

* feat: zikloak bizin erakusten ditu

* feat: maketazioa aldatzen du

* refactor: fragmentuak sortzen ditu

* refactor: fragmentua erabilten du

* feat: zikloa erakusten du

* chore: edukiak sartzen ditu

* feat: gainburua dohitzen du

* feat: strapi bertsioa igotzen du

* feat: liburutegiak igotzen ditu

* fix: build-a konpontzen du

* fix: mugikor maketazioa konpontzen du

* fix: mugikor maketazioa hobetzen du

* chore: start sript-a aldatzen du

* chore: konfigurazioa aldatzen du

* chore: Strapi bertsioa igotzen du

* chore: netlify deployments kentzen du

* chore: browserslist eguneratzen du

* Revert "chore: netlify deployments kentzen du"

This reverts commit 166fb859036ad311d1e49430d7222999071d5cb2.

* chore: warning-ak ekiditen ditu

* feat: focus-a konpontzen du

* feat: kartela konpontzen du

* feat: pasa diren zikloak ezkutatzen ditu

* feat: ekintzak ezkutatzen ditu produkzioan

front/src/domain/AtalaName.ts

@@ -0,0 +1 @@
+export type AtalaName = 'hasiera' | 'kafetegia' | 'bizi';

front/src/domain/_valueObjects/Irudia.ts

@@ -0,0 +1,15 @@
+interface Format {
+  url: string;
+  width: number;
+  height: number;
+}
+
+export interface Irudia {
+  alternativeText?: string;
+  formats: {
+    thumbnail: Format;
+    small: Format;
+    medium: Format;
+    large: Format;
+  };
+}

front/src/domain/_valueObjects/IsoDate.ts

@@ -0,0 +1 @@
+type IsoDate = string;

front/src/domain/_valueObjects/Markdown.ts

@@ -0,0 +1 @@
+export type Markdown = string;

front/src/domain/bizi/BiziContent.ts

@@ -0,0 +1,4 @@
+export interface BiziContent {
+  izenburua: string;
+  deskribapena: string;
+}

front/src/domain/ekintza/EkintzaContent.ts

@@ -0,0 +1,13 @@
+import { Irudia } from '../_valueObjects/Irudia';
+import { Markdown } from '../_valueObjects/Markdown';
+import { ZikloaContent } from '../zikloa/ZikloaContent';
+
+export interface EkintzaContent {
+  slug: string;
+  izenburua: string;
+  hitzordua: IsoDate;
+  titularra?: string;
+  deskribapena?: Markdown;
+  kartela?: Irudia;
+  zikloa?: Pick<ZikloaContent, 'izena' | 'slug'>;
+}

front/src/domain/zikloa/ZikloaContent.ts

@@ -0,0 +1,15 @@
+import { Markdown } from '../_valueObjects/Markdown';
+import { EkintzaContent } from '../ekintza/EkintzaContent';
+
+export interface ZikloaContent {
+  slug: string;
+  izena: string;
+  deskribapena?: Markdown;
+  ekintzak: EkintzaContent[];
+}
+
+export function getLastEkintza(zikloa: ZikloaContent) {
+  return zikloa.ekintzak
+    .sort((a, b) => (a.hitzordua > b.hitzordua ? 1 : -1))
+    .slice(-1)[0].hitzordua;
+}

front/src/pages/bizi/ekintzak/{strapiEkintza.slug}.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { graphql, PageProps } from 'gatsby';
+
+import { SEO } from '../../../components/SEO';
+import { EkintzaContent } from '../../../domain/ekintza/EkintzaContent';
+import { Ekintza } from '../../../views/Ekintza/Ekintza';
+import { NotFound } from '../../../views/NotFound';
+
+interface QueryData {
+  strapiEkintza: EkintzaContent;
+}
+
+const EkintzaPage: React.FC<PageProps<QueryData>> = ({ location, data }) => {
+  const content = data.strapiEkintza;
+
+  // TODO testeatu eta produkzioan jarri
+  if (process.env.NODE_ENV === 'production') {
+    return <NotFound />;
+  }
+
+  return (
+    <>
+      <SEO title={content.izenburua} location={location} />
+
+      <Ekintza content={content} />
+    </>
+  );
+};
+
+export const query = graphql`
+  fragment Ekintza on StrapiEkintza {
+    slug
+    izenburua
+    titularra
+    deskribapena
+    hitzordua
+    zikloa {
+      slug
+      izena
+    }
+    kartela {
+      alternativeText
+      formats
+    }
+  }
+
+  query ($slug: String) {
+    strapiEkintza(slug: { eq: $slug }) {
+      ...Ekintza
+    }
+  }
+`;
+
+export default EkintzaPage;

front/src/pages/bizi/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { graphql, PageProps } from 'gatsby';
+
+import { SEO } from '../../components/SEO';
+import { BiziContent } from '../../domain/bizi/BiziContent';
+import { EkintzaContent } from '../../domain/ekintza/EkintzaContent';
+import { ZikloaContent } from '../../domain/zikloa/ZikloaContent';
+import { Bizi } from '../../views/Bizi';
+import { NotFound } from '../../views/NotFound';
+
+interface QueryData {
+  strapiBizi: BiziContent;
+  allStrapiEkintza: { nodes: EkintzaContent[] };
+  allStrapiZikloa: { nodes: ZikloaContent[] };
+}
+
+const BiziPage: React.FC<PageProps<QueryData>> = ({ location, data }) => {
+  const content = data.strapiBizi;
+  const ekintzak = data.allStrapiEkintza.nodes;
+  const zikloak = data.allStrapiZikloa.nodes;
+
+  // TODO testeatu eta produkzioan jarri
+  if (process.env.NODE_ENV === 'production') {
+    return <NotFound />;
+  }
+
+  return (
+    <>
+      <SEO title={content.izenburua} location={location} />
+
+      <Bizi content={content} ekintzak={ekintzak} zikloak={zikloak} />
+    </>
+  );
+};
+
+export const query = graphql`
+  {
+    strapiBizi {
+      deskribapena
+      izenburua
+    }
+    allStrapiEkintza(sort: { hitzordua: ASC }) {
+      nodes {
+        ...Ekintza
+      }
+    }
+    allStrapiZikloa {
+      nodes {
+        ...Zikloa
+      }
+    }
+  }
+`;
+
+export default BiziPage;

front/src/pages/bizi/zikloak/{strapiZikloa.slug}.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { graphql, PageProps } from 'gatsby';
+
+import { SEO } from '../../../components/SEO';
+import { ZikloaContent } from '../../../domain/zikloa/ZikloaContent';
+import { NotFound } from '../../../views/NotFound';
+import { Zikloa } from '../../../views/Zikloa/Zikloa';
+
+interface QueryData {
+  strapiZikloa: ZikloaContent;
+}
+
+const ZikloaPage: React.FC<PageProps<QueryData>> = ({ location, data }) => {
+  const content = data.strapiZikloa;
+
+  // TODO testeatu eta produkzioan jarri
+  if (process.env.NODE_ENV === 'production') {
+    return <NotFound />;
+  }
+
+  return (
+    <>
+      <SEO title={content.izena} location={location} />
+
+      <Zikloa content={content} />
+    </>
+  );
+};
+
+export const query = graphql`
+  fragment Zikloa on StrapiZikloa {
+    slug
+    izena
+    deskribapena
+    ekintzak {
+      ...Ekintza
+    }
+  }
+
+  query ($slug: String) {
+    strapiZikloa(slug: { eq: $slug }) {
+      ...Zikloa
+    }
+  }
+`;
+
+export default ZikloaPage;

front/src/styles/settings/colors.scss

@@ -5,4 +5,9 @@
   --color-horia: #fdb201;
   --color-gorria: #fd3647;
   --color-zuria: #ffffff;
+
+  --color-grisa-1: #474747;
+  --color-grisa-2: #707070;
+  --color-grisa-3: #999999;
+  --color-grisa-4: #c2c2c2;
 }

front/src/utilities/dateUtils.ts

@@ -0,0 +1,19 @@
+import 'dayjs/locale/eu';
+
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(localizedFormat);
+dayjs.locale('eu');
+
+export function formatAbbreviatedDate(date: IsoDate) {
+  return dayjs(date).format('MMM D, dddd, LT[etan]');
+}
+
+export function formatLargeDate(date: IsoDate) {
+  return dayjs(date).format('LL, dddd, LT[etan]');
+}
+
+export function formatAbbreviatedDay(date: IsoDate) {
+  return dayjs(date).format('MMM D');
+}

front/src/views/Bizi/Bizi.module.scss

@@ -0,0 +1,89 @@
+@import '../../styles/tools/mixins/font.scss';
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  padding-left: var(--size-small);
+  padding-right: var(--size-small);
+  padding-top: var(--size-huge);
+  margin-bottom: var(--size-huge);
+
+  @media #{$fromDesktop} {
+    display: grid;
+    grid-template-columns: 4fr 2fr;
+    gap: var(--size-huge);
+
+    padding-left: var(--size-huge);
+    padding-right: var(--size-huge);
+  }
+}
+
+.section {
+  @media #{$fromDesktop} {
+    position: relative;
+
+    &:hover {
+      & > .title {
+        transform: translateY(-200%);
+        filter: none;
+      }
+    }
+  }
+}
+
+.title {
+  font-family: 'Abril Fatface', sans-serif;
+  font-size: clamp(2rem, 4.2dvw, 5rem);
+  color: var(--color-grisa-3);
+
+  z-index: 10;
+  mix-blend-mode: difference;
+
+  @media #{$fromDesktop} {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    transition: transform 0.3s ease-in-out;
+    transform: translateX(-50%) rotate(-90deg) translateX(-50%)
+      translateY(-120%);
+  }
+}
+
+.zikloaCardList {
+  padding: var(--size-base);
+  display: grid;
+  gap: var(--size-large);
+}
+
+.card {
+  position: relative;
+}
+
+.cardLink {
+  font-family: 'Abril Fatface', sans-serif;
+  @include largeFont;
+
+  transition: color 0.4s ease;
+
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.deskribapena {
+  @include baseFont;
+  font-weight: var(--font-weight-regular);
+}
+
+.cardHitzordua {
+  @include baseFont;
+}

front/src/views/Bizi/Bizi.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { Link } from 'gatsby';
+
+import { BiziContent } from '../../domain/bizi/BiziContent';
+import { EkintzaContent } from '../../domain/ekintza/EkintzaContent';
+import {
+  getLastEkintza,
+  ZikloaContent,
+} from '../../domain/zikloa/ZikloaContent';
+import { formatAbbreviatedDay } from '../../utilities/dateUtils';
+import { EkintzaSnippetList } from '../components/EkintzaSnippetList/EkintzaSnippetList';
+import { Hero } from '../components/Hero';
+import { Layout } from '../components/Layout';
+import { Oina } from '../components/Oina';
+import * as styles from './Bizi.module.scss';
+
+interface Props {
+  content: BiziContent;
+  ekintzak: EkintzaContent[];
+  zikloak: ZikloaContent[];
+}
+
+export const Bizi: React.FC<Props> = ({ content, ekintzak, zikloak }) => {
+  const { izenburua, deskribapena } = content;
+
+  const ekintzakToShow = ekintzak.filter(
+    ekintza => new Date(ekintza.hitzordua) >= new Date(),
+  );
+  const zikloakToShow = zikloak.filter(
+    zikloa => new Date(getLastEkintza(zikloa)) >= new Date(),
+  );
+
+  return (
+    <Layout>
+      <Hero izenburua={izenburua} deskribapena={deskribapena} atala="bizi" />
+
+      <main className={styles.wrapper} id="edukia">
+        <section className={styles.section}>
+          <h2 className={styles.title}>ekintzak</h2>
+          <EkintzaSnippetList ekintzak={ekintzakToShow} />
+        </section>
+
+        {zikloakToShow.length > 0 && (
+          <section className={styles.section}>
+            <h2 className={styles.title}>zikloak</h2>
+            <ul className={styles.zikloaCardList}>
+              {zikloakToShow.map(zikloa => (
+                <li className={styles.card} key={zikloa.slug}>
+                  <p className={styles.cardHitzordua}>
+                    {formatAbbreviatedDay(getLastEkintza(zikloa))} arte
+                  </p>
+
+                  <Link
+                    className={styles.cardLink}
+                    to={`/bizi/zikloak/${zikloa.slug}`}
+                  >
+                    {zikloa.izena}
+                  </Link>
+
+                  {zikloa.deskribapena && (
+                    <ReactMarkdown className={styles.deskribapena}>
+                      {zikloa.deskribapena}
+                    </ReactMarkdown>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </main>
+
+      <Oina />
+    </Layout>
+  );
+};

front/src/views/Bizi/index.ts

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

front/src/views/Ekintza/Ekintza.module.scss

@@ -0,0 +1,103 @@
+@import '../../styles/tools/mixins/font.scss';
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: var(--size-base) var(--size-small) var(--size-base) var(--size-small);
+
+  @media #{$fromTablet} {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: var(--size-base);
+    padding: var(--size-huge) var(--size-base) var(--size-base) var(--size-base);
+  }
+}
+
+.kartela {
+  width: 56%;
+  height: auto;
+  margin-bottom: var(--size-base);
+
+  @media #{$fromTablet} {
+    width: 100%;
+    min-width: 360px;
+    height: auto;
+  }
+}
+
+.izenburuWrapper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--size-base);
+}
+
+.hitzordua {
+  margin-bottom: var(--size-base);
+
+  @include largeFont;
+  color: var(--color-grisa-1);
+}
+
+.izenburua {
+  margin-bottom: var(--size-base);
+
+  font-family: 'Abril Fatface', sans-serif;
+  font-size: clamp(2rem, 4.2dvw, 5rem);
+  line-height: 125%;
+}
+
+.titularra {
+  @include hugeFont;
+
+  &:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}
+
+.deskribapena {
+  padding-top: var(--size-base);
+
+  @include largeFont;
+  font-weight: var(--font-weight-regular);
+
+  border-top: 3px solid var(--color-grisa-3);
+
+  p:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}
+
+.zikloa {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--size-small);
+  width: fit-content;
+
+  @include baseFont;
+  text-decoration: underline;
+
+  transition: color 0.3s ease;
+
+  .gezia {
+    transition: transform 0.3s ease;
+  }
+
+  &:hover {
+    color: var(--color-morea);
+
+    .gezia {
+      transform: translateX(var(--size-small));
+    }
+  }
+
+  &:visited,
+  &:link {
+    text-decoration: underline;
+  }
+}
+
+.gezia {
+  height: 1rem;
+}

front/src/views/Ekintza/Ekintza.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { Link } from 'gatsby';
+
+import Gezia from '../../assets/gezia.svg';
+import { EkintzaContent } from '../../domain/ekintza/EkintzaContent';
+import { formatLargeDate } from '../../utilities/dateUtils';
+import { Gainburua } from '../components/Gainburua/Gainburua';
+import { Layout } from '../components/Layout';
+import { Oina } from '../components/Oina';
+import * as styles from './Ekintza.module.scss';
+
+interface Props {
+  content: EkintzaContent;
+}
+
+export const Ekintza: React.FC<Props> = ({ content }) => {
+  const { izenburua, kartela, titularra, hitzordua, deskribapena, zikloa } =
+    content;
+
+  return (
+    <Layout>
+      <Gainburua atala="bizi" />
+
+      <div className={styles.wrapper}>
+        <section className={styles.izenburuWrapper}>
+          {zikloa && (
+            <Link to={`/bizi/zikloak/${zikloa.slug}`} className={styles.zikloa}>
+              {zikloa.izena}{' '}
+              <Gezia aria-hidden={true} className={styles.gezia} />
+            </Link>
+          )}
+          <p className={styles.hitzordua}>{formatLargeDate(hitzordua)}</p>
+          <h1 className={styles.izenburua}>{izenburua}</h1>
+          <p className={styles.titularra}>{titularra}</p>
+
+          {deskribapena && (
+            <ReactMarkdown className={styles.deskribapena}>
+              {deskribapena}
+            </ReactMarkdown>
+          )}
+        </section>
+
+        {kartela && (
+          <aside>
+            <img
+              className={styles.kartela}
+              src={
+                kartela.formats.medium
+                  ? kartela.formats.medium.url
+                  : kartela.formats.small.url
+              }
+              alt={kartela.alternativeText}
+              height={
+                kartela.formats.medium
+                  ? kartela.formats.medium.height
+                  : kartela.formats.small.height
+              }
+              width={
+                kartela.formats.medium
+                  ? kartela.formats.medium.width
+                  : kartela.formats.small.width
+              }
+            ></img>
+          </aside>
+        )}
+      </div>
+
+      <Oina />
+    </Layout>
+  );
+};

front/src/views/Hasiera/Hasiera.tsx

@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import Gezia from '../../assets/gezia.svg';
 import { HasieraContent } from '../../domain/hasiera/HasieraContent';
 import { Container } from '../components/Container';
-import { Gainburua } from '../components/Gainburua';
+import { Hero } from '../components/Hero';
 import { Oina } from '../components/Oina';
 import * as styles from './Hasiera.module.scss';
 
@@ -16,11 +16,7 @@ export const Hasiera: React.FC<Props> = ({ content }) => {
   const { izenburua, deskribapena, edukia } = content;
   return (
     <>
-      <Gainburua
-        atala="hasiera"
-        izenburua={izenburua}
-        deskribapena={deskribapena}
-      />
+      <Hero atala="hasiera" izenburua={izenburua} deskribapena={deskribapena} />
 
       <div className={styles.contentWrapper} id="edukia">
         <Container>

front/src/views/Kafetegia/Kafetegia.module.scss

@@ -32,6 +32,7 @@
   text-align: right;
   vertical-align: bottom;
 
+  font-family: 'Abril Fatface', serif;
   @include gargantuanFont;
 
   &:after {

front/src/views/Kafetegia/Kafetegia.tsx

@@ -3,23 +3,26 @@ import React from 'react';
 import { produktuaFactory } from '../../domain/kafetegia/factories/produktuaFactory';
 import { KafetegiaContent } from '../../domain/kafetegia/KafetegiaContent';
 import { Container } from '../components/Container';
-import { Gainburua } from '../components/Gainburua';
+import { Hero } from '../components/Hero';
 import { Oina } from '../components/Oina';
 import { ProduktuZerrenda } from './components/ProduktuZerrenda';
 import * as styles from './Kafetegia.module.scss';
 
-export const Kafetegia: React.FC<{ content: KafetegiaContent }> = ({
-  content,
-}) => {
+interface Props {
+  content: KafetegiaContent;
+}
+
+export const Kafetegia: React.FC<Props> = ({ content }) => {
   const { izenburua, deskribapena, menua } = content;
 
-  // oraingoz menuak alergenorik ez duenez, alergeno legenda ezkutatuko dugu.
-  // AlergenoLegenda konponentea sortuta dago, baina ez dugu erabiltzen
-  // performance arrazoiengatik
-
+  /**
+   * oraingoz menuak alergenorik ez duenez, alergeno legenda ezkutatuko dugu.
+   * AlergenoLegenda konponentea sortuta dago, baina ez dugu erabiltzen
+   * performance arrazoiengatik
+   */
   return (
     <>
-      <Gainburua
+      <Hero
         atala="kafetegia"
         izenburua={izenburua}
         deskribapena={deskribapena}

front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss

@@ -45,6 +45,7 @@
   padding-left: 52px;
   margin-bottom: var(--size-mini);
 
+  font-family: 'Abril Fatface', serif;
   @include largeFont;
 
   &::after {

front/src/views/NotFound/NotFound.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 
 import { Container } from '../components/Container';
-import { Gainburua } from '../components/Gainburua';
+import { Gainburua } from '../components/Gainburua/Gainburua';
 
 export const NotFound: React.FC = () => (
   <>

front/src/views/RegularPage/RegularPage.tsx

@@ -5,7 +5,7 @@ import remarkGfm from 'remark-gfm';
 
 import { RegularPageContent } from '../../domain/basicPage/RegularPageContent';
 import { Container } from '../components/Container';
-import { Gainburua } from '../components/Gainburua';
+import { Gainburua } from '../components/Gainburua/Gainburua';
 import { Oina } from '../components/Oina';
 import * as styles from './RegularPage.module.scss';
 

front/src/views/Zikloa/Zikloa.module.scss

@@ -0,0 +1,22 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.wrapper {
+  padding: var(--size-huge) var(--size-base) var(--size-base) var(--size-base);
+}
+
+.izenburua {
+  margin-bottom: var(--size-base);
+
+  font-family: 'Abril Fatface', sans-serif;
+  font-size: clamp(2rem, 4.2dvw, 5rem);
+  line-height: 125%;
+}
+
+.deskribapena {
+  @include hugeFont;
+  font-weight: var(--font-weight-regular);
+
+  &:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}

front/src/views/Zikloa/Zikloa.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { ZikloaContent } from '../../domain/zikloa/ZikloaContent';
+import { EkintzaSnippetList } from '../components/EkintzaSnippetList';
+import { Gainburua } from '../components/Gainburua/Gainburua';
+import { Layout } from '../components/Layout';
+import { Oina } from '../components/Oina';
+import * as styles from './Zikloa.module.scss';
+
+interface Props {
+  content: ZikloaContent;
+}
+
+export const Zikloa: React.FC<Props> = ({ content }) => {
+  const { izena, ekintzak, deskribapena } = content;
+
+  return (
+    <Layout>
+      <Gainburua atala="bizi" />
+
+      <div className={styles.wrapper}>
+        <h1 className={styles.izenburua}>{izena}</h1>
+
+        {deskribapena && (
+          <ReactMarkdown className={styles.deskribapena}>
+            {deskribapena}
+          </ReactMarkdown>
+        )}
+
+        <EkintzaSnippetList ekintzak={ekintzak} />
+      </div>
+
+      <Oina />
+    </Layout>
+  );
+};

front/src/views/components/Container/Container.tsx

@@ -2,6 +2,15 @@ import React, { PropsWithChildren } from 'react';
 
 import * as styles from './Container.module.scss';
 
-export const Container: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className={styles.wrapper}>{children}</div>
+interface Props {
+  id?: string;
+}
+
+export const Container: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  id,
+}) => (
+  <div className={styles.wrapper} id={id}>
+    {children}
+  </div>
 );

front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.module.scss

@@ -0,0 +1,73 @@
+@import '../../../styles/tools/mixins/font.scss';
+@import '../../../styles/tools/mediaQueries.scss';
+
+.card {
+  position: relative;
+
+  @media #{$fromTablet} {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    gap: var(--size-base);
+  }
+}
+
+.ekintzaInformation {
+  display: flex;
+  flex-direction: column;
+}
+
+.ekintzaCardList {
+  padding-top: var(--size-base);
+  padding-bottom: var(--size-base);
+  display: grid;
+  gap: var(--size-large);
+}
+
+.cardHeadline {
+  @include largeFont;
+  font-weight: var(--font-weight-regular);
+
+  order: 3;
+}
+
+.kartela {
+  height: 9rem;
+  width: auto;
+  justify-self: end;
+}
+
+.cardLink {
+  margin-bottom: var(--size-base);
+
+  font-family: 'Abril Fatface', sans-serif;
+  @include gargantuanFont;
+
+  order: 2;
+  transition: color 0.4s ease;
+
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &:focus-visible {
+    &::after {
+      outline: 2px solid var(--color-morea);
+    }
+  }
+}
+
+.cardHitzordua {
+  @include largeFont;
+
+  order: 1;
+}

front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { Link } from 'gatsby';
+
+import { EkintzaContent } from '../../../domain/ekintza/EkintzaContent';
+import { formatAbbreviatedDate } from '../../../utilities/dateUtils';
+import * as styles from './EkintzaSnippetList.module.scss';
+
+interface Props {
+  ekintzak: EkintzaContent[];
+}
+
+export const EkintzaSnippetList: React.FC<Props> = ({ ekintzak }) => {
+  return (
+    <ul className={styles.ekintzaCardList}>
+      {ekintzak.map(ekintza => (
+        <li className={styles.card} key={ekintza.slug}>
+          <div className={styles.ekintzaInformation}>
+            <Link
+              to={`/bizi/ekintzak/${ekintza.slug}`}
+              className={styles.cardLink}
+            >
+              {ekintza.izenburua}
+            </Link>
+
+            {ekintza.titularra && (
+              <ReactMarkdown className={styles.cardHeadline}>
+                {ekintza.titularra}
+              </ReactMarkdown>
+            )}
+
+            <p className={styles.cardHitzordua}>
+              {formatAbbreviatedDate(ekintza.hitzordua)}
+            </p>
+          </div>
+
+          {ekintza.kartela && (
+            <img
+              className={styles.kartela}
+              src={ekintza.kartela.formats.small.url}
+              alt={ekintza.kartela.alternativeText}
+              height={ekintza.kartela.formats.small.height}
+              width={ekintza.kartela.formats.small.width}
+            ></img>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};

front/src/views/components/EkintzaSnippetList/index.ts

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

front/src/views/components/Gainburua/AtalaName.ts

@@ -1 +0,0 @@
-export type AtalaName = 'hasiera' | 'kafetegia';

front/src/views/components/Gainburua/Gainburua.module.scss

@@ -2,39 +2,6 @@
 @import '../../../styles/tools/mixins/font.scss';
 @import '../../../styles/tools/mixins/container.scss';
 
-.geziaWrapper {
-  display: none;
-
-  @media #{$fromDesktop} {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-.geziaLogo {
-  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);
-    }
-  }
-}
-
-.nagusia {
-  flex-grow: 1;
-  @include container;
-}
-
 .mugikorWrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -89,11 +56,23 @@
   }
 }
 
+.bizi {
+  --color: var(--color-beltza);
+  --hover-color: var(--color-gorria);
+  --background-color: var(--color-urdina);
+
+  @media #{$fromDesktop} {
+    min-height: 100dvh;
+  }
+}
+
 .logoWrapper {
   width: var(--size-huge);
 }
 
 .logo {
+  display: block;
+
   path {
     transition: fill 0.4s ease;
     fill: var(--color);
@@ -113,7 +92,7 @@
   justify-content: center;
 
   @media #{$fromTablet} {
-    padding: var(--size-large);
+    padding: var(--size-mini) var(--size-large);
   }
 
   @media #{$fromDesktop} {
@@ -139,17 +118,11 @@
   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;
+  font-family: 'Abril Fatface', serif;
+  letter-spacing: 0.1rem;
 
   &:after {
     content: '.';
@@ -175,7 +148,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 3px solid var(--hover-color);
   }
 
@@ -193,6 +166,7 @@
 
 .desktopNavigazioaWrapper {
   display: none;
+  align-self: flex-end;
 
   @media #{$fromDesktop} {
     display: initial;

front/src/views/components/Gainburua/Gainburua.tsx

@@ -1,32 +1,19 @@
 import React from 'react';
 
-import Gezia from '../../../assets/gezia.svg';
-import { classNames } from '../../../utilities/classnames';
+import { AtalaName } from '../../../domain/AtalaName';
 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;
 }
 
-const atalaClassname: { [key in AtalaName]: string } = {
-  hasiera: styles.hasiera,
-  kafetegia: styles.kafetegia,
-};
-
-export const Gainburua: React.FC<Props> = ({
-  izenburua,
-  deskribapena,
-  atala,
-}) => {
+export const Gainburua: React.FC<Props> = ({ atala }) => {
   return (
-    <div className={classNames(styles.wrapper, atala && atalaClassname[atala])}>
+    <div className={styles.wrapper}>
       <header className={styles.gainburuWrapper}>
         <a className={styles.gainburuLink} href="/">
           <div className={styles.logoWrapper}>
@@ -34,36 +21,17 @@ export const Gainburua: React.FC<Props> = ({
           </div>
         </a>
 
+        <div className={styles.desktopNavigazioaWrapper}>
+          <DesktopNabigazioa atala={atala} />
+        </div>
+        <div className={styles.mobileNabigazioaWrapper}>
+          <MugikorNabigazioa />
+        </div>
+
         <div className={styles.kontaktuDatuakWrapper}>
           <KontaktuDatuak />
         </div>
       </header>
-
-      {deskribapena && (
-        <main className={styles.nagusia}>
-          <p className={styles.deskribapena}>{deskribapena}</p>
-
-          <div className={styles.izenburuWrapper}>
-            <div className={styles.marra} />
-            <h1 className={styles.izenburua}>{izenburua}</h1>
-          </div>
-
-          <div className={styles.geziaWrapper}>
-            <a className={styles.gainburuLink} href="#edukia">
-              JAITSI
-              <Gezia className={styles.geziaLogo} />
-            </a>
-          </div>
-        </main>
-      )}
-
-      <div className={styles.desktopNavigazioaWrapper}>
-        <DesktopNabigazioa atala={atala} />
-      </div>
-
-      <div className={styles.mobileNabigazioaWrapper}>
-        <MugikorNabigazioa />
-      </div>
     </div>
   );
 };

front/src/views/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.module.scss

@@ -1,7 +1,6 @@
 .nabigazioa {
   display: flex;
   justify-content: center;
-  padding-bottom: var(--size-tiny);
 }
 
 .estekaZerrenda {
@@ -10,7 +9,9 @@
   list-style-type: none;
 }
 
-.esteka {
+.gainburuLink {
+  display: inline-block;
+  position: relative;
   padding: var(--size-small);
 
   color: var(--color);
@@ -20,13 +21,12 @@
   &:hover {
     color: var(--hover-color);
   }
+
+  &:focus-visible {
+    outline: 3px solid var(--hover-color);
+  }
 }
 
 .active {
   border-bottom: 3px solid var(--color);
 }
-.gainburuLink {
-  &:focus {
-    outline: 3px solid var(--hover-color);
-  }
-}

front/src/views/components/Gainburua/components/DesktopNabigazioa/DesktopNabigazioa.tsx

@@ -5,7 +5,7 @@ import { Link } from 'gatsby';
 import { classNames } from '../../../../../utilities/classnames';
 import * as styles from './DesktopNabigazioa.module.scss';
 
-import type { AtalaName } from '../../AtalaName';
+import type { AtalaName } from '../../../../../domain/AtalaName';
 interface Props {
   atala?: AtalaName;
 }
@@ -14,24 +14,34 @@ 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="/">
+        <li>
+          <Link
+            className={styles.gainburuLink}
+            to="/"
+            activeClassName={styles.active}
+          >
             Laba gara
           </Link>
         </li>
 
-        <li
-          className={classNames(
-            styles.esteka,
-            atala === 'kafetegia' && styles.active,
-          )}
-        >
-          <Link className={styles.gainburuLink} to="/kafetegia">
+        <li>
+          <Link
+            className={styles.gainburuLink}
+            to="/bizi"
+            activeClassName={styles.active}
+            partiallyActive
+          >
+            Bizi Laba
+          </Link>
+        </li>
+
+        <li>
+          <Link
+            className={styles.gainburuLink}
+            to="/kafetegia"
+            activeClassName={styles.active}
+            partiallyActive
+          >
             Dastatu Laba
           </Link>
         </li>

front/src/views/components/Gainburua/components/MugikorNabigazioa/MugikorNabigazioa.tsx

@@ -23,6 +23,9 @@ export const MugikorNabigazioa: React.FC = () => {
               <li className={styles.esteka}>
                 <Link to="/">Laba gara</Link>
               </li>
+              <li className={styles.esteka}>
+                <Link to="/bizi">Bizi Laba</Link>
+              </li>
               <li className={styles.esteka}>
                 <Link to="/kafetegia">Dastatu Laba</Link>
               </li>

front/src/views/components/Gainburua/index.ts

@@ -1 +1 @@
-export { Gainburua } from './Gainburua';
+export { Gainburua as Hero } from './Gainburua';

front/src/views/components/Hero/Hero.module.scss

@@ -0,0 +1,230 @@
+@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 {
+  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);
+    }
+  }
+}
+
+.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;
+  }
+}
+
+.bizi {
+  --color: var(--color-beltza);
+  --hover-color: var(--color-gorria);
+  --background-color: var(--color-urdina);
+
+  @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);
+    }
+  }
+}
+
+.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;
+  font-family: 'Abril Fatface', serif;
+  letter-spacing: 0.1rem;
+
+  &:after {
+    content: '.';
+  }
+
+  @include gargantuanFont;
+}
+
+.gainburuLink {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-tiny);
+
+  @include smallFont;
+
+  transition: color 0.4s ease;
+
+  svg {
+    path {
+      transition: fill 0.4s ease;
+      fill: var(--color);
+    }
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--hover-color);
+  }
+
+  &:hover {
+    color: var(--hover-color);
+
+    svg {
+      path {
+        transition: fill 0.4s ease;
+        fill: 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;
+  }
+}

front/src/views/components/Hero/Hero.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import Gezia from '../../../assets/gezia.svg';
+import { AtalaName } from '../../../domain/AtalaName';
+import { classNames } from '../../../utilities/classnames';
+import Logo from './assets/logo.svg';
+import { DesktopNabigazioa } from './components/DesktopNabigazioa';
+import { KontaktuDatuak } from './components/KontaktuDatuak';
+import { MugikorNabigazioa } from './components/MugikorNabigazioa';
+import * as styles from './Hero.module.scss';
+
+interface Props {
+  izenburua?: string;
+  deskribapena?: string;
+  atala?: AtalaName;
+}
+
+const atalaClassname: { [key in AtalaName]: string } = {
+  hasiera: styles.hasiera,
+  kafetegia: styles.kafetegia,
+  bizi: styles.bizi,
+};
+
+export const Hero: React.FC<Props> = ({ izenburua, deskribapena, atala }) => {
+  return (
+    <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 />
+        </div>
+      </header>
+
+      {deskribapena && (
+        <div className={styles.nagusia}>
+          <p className={styles.deskribapena}>{deskribapena}</p>
+
+          <div className={styles.izenburuWrapper}>
+            <div className={styles.marra} />
+            <h1 className={styles.izenburua}>{izenburua}</h1>
+          </div>
+
+          <div className={styles.geziaWrapper}>
+            <a className={styles.gainburuLink} href="#edukia">
+              JAITSI
+              <Gezia className={styles.geziaLogo} />
+            </a>
+          </div>
+        </div>
+      )}
+
+      <div className={styles.desktopNavigazioaWrapper}>
+        <DesktopNabigazioa atala={atala} />
+      </div>
+
+      <div className={styles.mobileNabigazioaWrapper}>
+        <MugikorNabigazioa />
+      </div>
+    </div>
+  );
+};

front/src/views/components/Hero/assets/hamburguer.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 60 43" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M59.46 0H0V6H59.46V0Z" fill="#191919"/>
+    <path d="M59.46 18.16H0V24.16H59.46V18.16Z" fill="#191919"/>
+    <path d="M59.46 36.31H0V42.31H59.46V36.31Z" fill="#191919"/>
+</svg>

front/src/views/components/Hero/assets/itxi.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 47 47" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M46.29 4.24L42.05 0L23.14 18.9L4.24 0L0 4.24L18.9 23.14L0 42.05L4.24 46.29L23.14 27.39L42.05 46.29L46.29 42.05L27.39 23.14L46.29 4.24Z" fill="white"/>
+</svg>

front/src/views/components/Hero/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>

front/src/views/components/Hero/components/DesktopNabigazioa/DesktopNabigazioa.module.scss

@@ -0,0 +1,33 @@
+.nabigazioa {
+  display: flex;
+  justify-content: center;
+  padding-bottom: var(--size-tiny);
+}
+
+.estekaZerrenda {
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+
+.gainburuLink {
+  display: inline-block;
+  position: relative;
+  padding: var(--size-small);
+
+  color: var(--color);
+
+  transition: color 0.4s ease;
+
+  &:hover {
+    color: var(--hover-color);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--hover-color);
+  }
+}
+
+.active {
+  border-bottom: 3px solid var(--color);
+}

front/src/views/components/Hero/components/DesktopNabigazioa/DesktopNabigazioa.tsx

@@ -0,0 +1,51 @@
+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>
+          <Link
+            className={styles.gainburuLink}
+            to="/"
+            activeClassName={styles.active}
+          >
+            Laba gara
+          </Link>
+        </li>
+
+        <li>
+          <Link
+            className={styles.gainburuLink}
+            to="/bizi"
+            activeClassName={styles.active}
+            partiallyActive
+          >
+            Bizi Laba
+          </Link>
+        </li>
+
+        <li>
+          <Link
+            className={styles.gainburuLink}
+            to="/kafetegia"
+            activeClassName={styles.active}
+            partiallyActive
+          >
+            Dastatu Laba
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};

front/src/views/components/Hero/components/DesktopNabigazioa/index.ts

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

front/src/views/components/Hero/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);
+  }
+}

front/src/views/components/Hero/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>
+  );
+};

front/src/views/components/Hero/components/KontaktuDatuak/index.ts

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

front/src/views/components/Hero/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;
+}

front/src/views/components/Hero/components/MugikorNabigazioa/MugikorNabigazioa.tsx

@@ -0,0 +1,51 @@
+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="/bizi">Bizi Laba</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>
+    </>
+  );
+};

front/src/views/components/Hero/components/MugikorNabigazioa/index.ts

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

front/src/views/components/Hero/index.ts

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

front/src/views/components/Layout/Layout.module.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  @media #{$fromDesktop} {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100dvh;
+  }
+}

front/src/views/components/Layout/Layout.tsx

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as styles from './Layout.module.scss';
+
+export const Layout: React.FC<PropsWithChildren> = ({ children }) => (
+  <div className={styles.wrapper}>{children}</div>
+);

front/src/views/components/Layout/index.ts

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

front/src/views/components/Oina/Oina.module.scss

@@ -16,7 +16,7 @@
     color: var(--color-morea);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 2px solid var(--color-morea);
   }
 }
@@ -60,7 +60,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 3px solid var(--color-morea);
   }
 
@@ -79,4 +79,6 @@
 .igoWrapper {
   display: flex;
   justify-content: center;
+  // padding-a jartzen diogu geziaren animazioari lekua uzteko
+  padding-top: var(--size-small);
 }