From 5daead6696cb51e64fd8c6df72fd1826819aeec4 Mon Sep 17 00:00:00 2001
From: Aitor Urrutia Aranburu <aitorcurrutia@gmail.com>
Date: Thu, 28 Dec 2023 18:47:05 +0100
Subject: [PATCH] feat: geziak argitzen ditu

---
 .../Gainburua/Gainburua.module.scss           | 52 ++++++++--------
 .../views/components/Gainburua/Gainburua.tsx  |  3 +-
 .../components/Gainburua/assets/gezia.svg     |  5 --
 .../views/components/Oina/Oina.module.scss    | 62 +++++++++++++++++++
 front/src/views/components/Oina/Oina.tsx      | 26 +++++---
 5 files changed, 109 insertions(+), 39 deletions(-)
 delete mode 100644 front/src/views/components/Gainburua/assets/gezia.svg

diff --git a/front/src/views/components/Gainburua/Gainburua.module.scss b/front/src/views/components/Gainburua/Gainburua.module.scss
index b112b8f..32360b6 100644
--- a/front/src/views/components/Gainburua/Gainburua.module.scss
+++ b/front/src/views/components/Gainburua/Gainburua.module.scss
@@ -12,12 +12,6 @@
 }
 
 .geziaLogo {
-  cursor: pointer;
-  path {
-    transition: fill 0.4s ease;
-    fill: var(--color);
-  }
-
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-name: bounce-2;
@@ -34,12 +28,6 @@
       transform: rotate(90deg) translateX(0);
     }
   }
-
-  &:hover {
-    path {
-      fill: var(--hover-color);
-    }
-  }
 }
 
 .nagusia {
@@ -118,19 +106,6 @@
   }
 }
 
-.logo {
-  path {
-    transition: fill 0.4s ease;
-    fill: var(--color);
-  }
-
-  &:hover {
-    path {
-      fill: var(--hover-color);
-    }
-  }
-}
-
 .gainburuWrapper {
   padding: var(--size-base);
   display: flex;
@@ -184,9 +159,36 @@
 }
 
 .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 {
     outline: 3px solid var(--hover-color);
   }
+
+  &:hover {
+    color: var(--hover-color);
+
+    svg {
+      path {
+        transition: fill 0.4s ease;
+        fill: var(--hover-color);
+      }
+    }
+  }
 }
 
 .desktopNavigazioaWrapper {
diff --git a/front/src/views/components/Gainburua/Gainburua.tsx b/front/src/views/components/Gainburua/Gainburua.tsx
index 414b76e..a2bf778 100644
--- a/front/src/views/components/Gainburua/Gainburua.tsx
+++ b/front/src/views/components/Gainburua/Gainburua.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
+import Gezia from '../../../assets/gezia.svg';
 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';
@@ -50,6 +50,7 @@ export const Gainburua: React.FC<Props> = ({
 
           <div className={styles.geziaWrapper}>
             <a className={styles.gainburuLink} href="#edukia">
+              JAITSI
               <Gezia className={styles.geziaLogo} />
             </a>
           </div>
diff --git a/front/src/views/components/Gainburua/assets/gezia.svg b/front/src/views/components/Gainburua/assets/gezia.svg
deleted file mode 100644
index 0ff16a1..0000000
--- a/front/src/views/components/Gainburua/assets/gezia.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/front/src/views/components/Oina/Oina.module.scss b/front/src/views/components/Oina/Oina.module.scss
index 7533f8d..7d5ce05 100644
--- a/front/src/views/components/Oina/Oina.module.scss
+++ b/front/src/views/components/Oina/Oina.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/tools/mixins/font.scss';
+
 .wrapper {
   display: flex;
   justify-content: center;
@@ -18,3 +20,63 @@
     outline: 2px solid var(--color-morea);
   }
 }
+
+.geziaLogo {
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: bounce-2;
+  animation-timing-function: ease;
+
+  height: var(--size-base);
+  width: auto;
+
+  @keyframes bounce-2 {
+    0% {
+      transform: rotate(270deg) translateX(0);
+    }
+    50% {
+      transform: rotate(270deg) translateX(var(--size-tiny));
+    }
+    100% {
+      transform: rotate(270deg) translateX(0);
+    }
+  }
+}
+
+.oinaLink {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-tiny);
+
+  @include tinyFont;
+
+  transition: color 0.4s ease;
+
+  svg {
+    path {
+      transition: fill 0.4s ease;
+      fill: var(--color-beltza);
+    }
+  }
+
+  &:focus {
+    outline: 3px solid var(--color-morea);
+  }
+
+  &:hover {
+    color: var(--color-morea);
+
+    svg {
+      path {
+        transition: fill 0.4s ease;
+        fill: var(--color-morea);
+      }
+    }
+  }
+}
+
+.igoWrapper {
+  display: flex;
+  justify-content: center;
+}
diff --git a/front/src/views/components/Oina/Oina.tsx b/front/src/views/components/Oina/Oina.tsx
index b14518e..43cfdf5 100644
--- a/front/src/views/components/Oina/Oina.tsx
+++ b/front/src/views/components/Oina/Oina.tsx
@@ -2,15 +2,25 @@ import React from 'react';
 
 import { Link } from 'gatsby';
 
+import Gezia from '../../../assets/gezia.svg';
 import * as styles from './Oina.module.scss';
 
 export const Oina: React.FC = () => (
-  <footer className={styles.wrapper}>
-    <Link className={styles.esteka} to="/lege-oharra">
-      Lege oharra
-    </Link>
-    <Link className={styles.esteka} to="/pribatutasun-politika">
-      Pribatutasun politika
-    </Link>
-  </footer>
+  <>
+    <div className={styles.igoWrapper}>
+      <a className={styles.oinaLink} href="#top">
+        <Gezia className={styles.geziaLogo} />
+        IGO
+      </a>
+    </div>
+
+    <footer className={styles.wrapper}>
+      <Link className={styles.esteka} to="/lege-oharra">
+        Lege oharra
+      </Link>
+      <Link className={styles.esteka} to="/pribatutasun-politika">
+        Pribatutasun politika
+      </Link>
+    </footer>
+  </>
 );