Bazkidetza sortzen du (#4)

* feat: back-en propietatea sortzen du

* feat: bazkidetzarako testua sartzen du

* feat: maketazioa konpontzen du

* feat: gezia sartzen du

* fix: consola zuzenketak egiten ditu

* feat: margina konpontzen du

* fix: html-a konpontzen du

* feat: izena aldatzen du

* feat: lege oharra sortzen du

* feat: pribatutasun politika sortzen du

front/src/components/Gainburua/DesktopNabigazioa.tsx

@@ -5,7 +5,7 @@ import { rem } from 'polished';
 import { size } from '../../ui/theme';
 
 export const DesktopNabigazioa: React.FC<{
-  atala: 'hasiera' | 'kafetegia';
+  atala?: 'hasiera' | 'kafetegia';
 }> = ({ atala }) => {
   return (
     <Nabigazioa>
@@ -24,6 +24,7 @@ export const DesktopNabigazioa: React.FC<{
 export const Nabigazioa = styled.nav`
   display: flex;
   justify-content: center;
+  padding-bottom: ${rem(size.tiny)};
 `;
 
 export const EstekaZerrenda = styled.ul`

front/src/components/Gainburua/Gainburua.tsx

@@ -12,17 +12,20 @@ import { DesktopNabigazioa } from './DesktopNabigazioa';
 import { MugikorNabigazioa } from './MugikorNabigazioa';
 import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
+import Gezia from '../../assets/gezia.svg';
 
 interface Props {
-  izenburua: string;
-  deskribapena: string;
-  atala: 'hasiera' | 'kafetegia';
+  izenburua?: string;
+  deskribapena?: string;
+  atala?: 'hasiera' | 'kafetegia';
+  onClick?: () => void;
 }
 
 export const Gainburua: React.FC<Props> = ({
   izenburua,
   deskribapena,
   atala,
+  onClick,
 }) => {
   return (
     <Wrapper atala={atala}>
@@ -55,16 +58,22 @@ export const Gainburua: React.FC<Props> = ({
         </GainburuWrapper>
       </MediaQuery>
 
-      <Nagusia>
-        <Container>
-          <Deskribapena>{deskribapena}</Deskribapena>
+      {deskribapena && (
+        <Nagusia>
+          <Container>
+            <Deskribapena>{deskribapena}</Deskribapena>
 
-          <IzenburuWrapper>
-            <Marra />
-            <Izenburua>{izenburua}</Izenburua>
-          </IzenburuWrapper>
-        </Container>
-      </Nagusia>
+            <IzenburuWrapper>
+              <Marra />
+              <Izenburua>{izenburua}</Izenburua>
+            </IzenburuWrapper>
+
+            <GeziaWrapper>
+              <GeziaLogo atala={atala} onClick={onClick} />
+            </GeziaWrapper>
+          </Container>
+        </Nagusia>
+      )}
 
       <MediaQuery minWidth={breakpoints.tablet}>
         <DesktopNabigazioa atala={atala} />
@@ -73,6 +82,36 @@ export const Gainburua: React.FC<Props> = ({
   );
 };
 
+const GeziaWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
+  cursor: pointer;
+  path {
+    fill: ${({ atala }) =>
+      atala === 'hasiera' ? colors.zuria : colors.beltza};
+  }
+
+  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);
+    }
+  }
+`;
+
 const Nagusia = styled.main`
   flex-grow: 1;
 `;
@@ -99,7 +138,7 @@ const MugikorLogoWrapper = styled.div`
   justify-content: center;
 `;
 
-const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
+const Wrapper = styled.div<{ atala?: 'hasiera' | 'kafetegia' }>`
   --color: ${({ atala }) =>
     atala === 'hasiera' ? colors.zuria : colors.beltza};
 
@@ -110,13 +149,12 @@ const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
     atala === 'hasiera' ? colors.gorria : colors.horia};
   color: var(--color);
 
-  padding-bottom: ${rem(size.tiny)};
-
   /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
   min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
 
   ${media.desktop`
-    min-height: 100vh;  
+    min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
+      Boolean(atala) ? '100vh' : '0'};  
   `}
 `;
 
@@ -135,7 +173,6 @@ const GainburuWrapper = styled.header`
   display: flex;
   align-items: start;
   justify-content: space-between;
-  margin-bottom: ${rem(size.base)};
 
   ${media.tablet`
     padding: ${rem(size.large)};
@@ -157,6 +194,7 @@ const IzenburuWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-bottom: ${rem(size.large)};
 `;
 
 const Marra = styled.div`

front/src/components/Gainburua/KontaktuDatuak.tsx

@@ -27,7 +27,7 @@ export const KontaktuDatuak: React.FC = () => {
             aria-label="Laba Twitterren"
             href="https://twitter.com/labasarea/"
           >
-            <Twitter aria-role="link" title="Laba Twitterren" />
+            <Twitter title="Laba Twitterren" />
           </a>
         </SareSoziala>
 

front/src/components/Gainburua/MugikorNabigazioa.tsx

@@ -132,7 +132,7 @@ const KontaktuDatuak: React.FC = () => {
             aria-label="Laba Twitterren"
             href="https://twitter.com/labasarea/"
           >
-            <Twitter aria-role="link" title="Laba Twitterren" />
+            <Twitter title="Laba Twitterren" />
           </a>
         </SareSoziala>
 

front/src/components/Oina.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'gatsby';
+import { rem } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import { size } from '../ui/theme';
+
+export const Oina: React.VFC = () => (
+  <Wrapper>
+    <Link to="/lege-oharra">Lege-oharra</Link>
+  </Wrapper>
+);
+
+const Wrapper = styled.footer`
+  display: flex;
+  justify-content: center;
+  padding: ${rem(size.base)};
+`;