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/pages/404.tsx

@@ -6,7 +6,7 @@ const NotFoundPage: React.VFC = () => {
     <main>
       <h1>Ez dugu orria topatu</h1>
       <br />
-      <Link to="/">Go home</Link>.
+      <Link to="/">Hasierara bueltatu</Link>
     </main>
   );
 };

front/src/pages/index.tsx

@@ -4,6 +4,13 @@ import { GlobalStyles } from '../ui/GlobalStyles';
 
 import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
+import styled from 'styled-components';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { Container } from '../components/Container';
+import { rem } from 'polished';
+import Gezia from '../assets/gezia.svg';
+import ReactMarkdown from 'react-markdown';
+import { Oina } from '../components/Oina';
 
 interface DataProps {
   strapiHasiera: {
@@ -11,6 +18,7 @@ interface DataProps {
       attributes: {
         deskribapena: string;
         izenburua: string;
+        bazkidetza: string;
       };
     };
   };
@@ -24,6 +32,7 @@ const IndexPage: React.VFC<PageProps> = () => {
           attributes {
             deskribapena
             izenburua
+            bazkidetza
           }
         }
       }
@@ -48,9 +57,62 @@ const IndexPage: React.VFC<PageProps> = () => {
         atala="hasiera"
         izenburua={strapiHasiera.data.attributes.izenburua}
         deskribapena={strapiHasiera.data.attributes.deskribapena}
+        onClick={() => {
+          window.location.replace('/#labazkidetza');
+        }}
       />
+
+      <ContentWrapper id="labazkidetza">
+        <Container>
+          <Deskribapena>
+            {strapiHasiera.data.attributes.bazkidetza}
+          </Deskribapena>
+
+          <IzanLabaWrapper>
+            <Botoia href="https://forms.gle/sRq2ejXqv6q88sQe9">
+              <GeziaLogo /> Labazkidetu.
+            </Botoia>
+          </IzanLabaWrapper>
+        </Container>
+      </ContentWrapper>
+
+      <Oina />
     </>
   );
 };
 
+const Deskribapena = styled(ReactMarkdown)`
+  margin-bottom: ${rem(size.large)};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+`;
+
+const ContentWrapper = styled.div`
+  padding: ${size.huge}px 0;
+  font-weight: ${fontWeight.regular};
+  ${font.large()};
+`;
+
+const Botoia = styled.a`
+  border: 2px solid ${colors.beltza};
+  ${font.large()};
+  padding: ${rem(size.base)};
+  background: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+const GeziaLogo = styled(Gezia)`
+  margin-right: ${rem(size.tiny)};
+`;
+
+const IzanLabaWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export default IndexPage;

front/src/pages/kafetegia.tsx

@@ -14,6 +14,7 @@ import { rem } from 'polished';
 import { Produktua } from '../domain/models/Produktua';
 import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
+import { Oina } from '../components/Oina';
 
 const Kafetegia: React.VFC<PageProps> = () => {
   const {
@@ -41,9 +42,12 @@ const Kafetegia: React.VFC<PageProps> = () => {
         atala="kafetegia"
         izenburua={izenburua}
         deskribapena={deskribapena}
+        onClick={() => {
+          window.location.replace('/kafetegia/#kafetegia');
+        }}
       />
 
-      <ContentWrapper>
+      <ContentWrapper id="kafetegia">
         <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
@@ -125,6 +129,8 @@ const Kafetegia: React.VFC<PageProps> = () => {
           </OnEgin>
         </Container>
       </ContentWrapper>
+
+      <Oina />
     </>
   );
 };

front/src/pages/lege-oharra.tsx

@@ -0,0 +1,106 @@
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+import { Helmet } from 'react-helmet';
+import { Container } from '../components/Container';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import { font, fontWeight, size } from '../ui/theme';
+import { rem } from 'polished';
+import { Gainburua } from '../components/Gainburua';
+import { Oina } from '../components/Oina';
+
+interface DataProps {
+  strapiLegeOharra: {
+    data: {
+      attributes: {
+        izenburua: string;
+        edukia: string;
+      };
+    };
+  };
+}
+
+const LegeOharra: React.VFC<PageProps> = () => {
+  const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiLegeOharra {
+        data {
+          attributes {
+            izenburua
+            edukia
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiLegeOharra.data.attributes.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+
+      <Gainburua />
+
+      <Container>
+        <Atala>
+          <Edukia>{strapiLegeOharra.data.attributes.edukia}</Edukia>
+        </Atala>
+      </Container>
+
+      <Oina />
+    </>
+  );
+};
+
+const Atala = styled.section`
+  padding-top: ${rem(size.base)};
+`;
+
+const Edukia = styled(ReactMarkdown)`
+  font-weight: ${fontWeight.regular};
+  ${font.base()};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h1 {
+    ${font.gargantuan()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h2 {
+    ${font.huge()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h3 {
+    ${font.large()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h4 {
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.mini)};
+  }
+
+  ul {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  li {
+    list-style: disc inside;
+    margin-bottom: ${rem(size.small)};
+  }
+`;
+
+export default LegeOharra;

front/src/pages/pribatutasun-politika.tsx

@@ -0,0 +1,120 @@
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import remarkGfm from 'remark-gfm';
+
+import { Helmet } from 'react-helmet';
+import { Container } from '../components/Container';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { rem } from 'polished';
+import { Gainburua } from '../components/Gainburua';
+import { Oina } from '../components/Oina';
+
+interface DataProps {
+  strapiPribatutasunPolitika: {
+    data: {
+      attributes: {
+        izenburua: string;
+        edukia: string;
+      };
+    };
+  };
+}
+
+const PribatutasunPolitika: React.VFC<PageProps> = () => {
+  const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiPribatutasunPolitika {
+        data {
+          attributes {
+            izenburua
+            edukia
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiPribatutasunPolitika.data.attributes.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+
+      <Gainburua />
+
+      <Container>
+        <Atala>
+          <Edukia>{strapiPribatutasunPolitika.data.attributes.edukia}</Edukia>
+        </Atala>
+      </Container>
+
+      <Oina />
+    </>
+  );
+};
+
+const Atala = styled.section`
+  padding-top: ${rem(size.base)};
+`;
+
+const Edukia = styled(ReactMarkdown).attrs({ remarkPlugins: [remarkGfm] })`
+  font-weight: ${fontWeight.regular};
+  ${font.base()};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h1 {
+    ${font.gargantuan()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h2 {
+    ${font.huge()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h3 {
+    ${font.large()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h4 {
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.mini)};
+  }
+
+  ul {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  li {
+    list-style: disc inside;
+    margin-bottom: ${rem(size.small)};
+  }
+
+  table {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  th {
+    padding: ${size.small}px;
+  }
+
+  td {
+    padding: ${size.small}px;
+    border: 1px solid ${colors.beltza};
+  }
+`;
+
+export default PribatutasunPolitika;