Primer pas al frontal de visitants

web/static/numerus.css

@@ -180,6 +180,7 @@ body, dialog {
     color: var(--numerus--text-color);
 }
 
+
 img, picture, video, canvas, svg {
     display: block;
     max-width: 100%;
@@ -262,26 +263,6 @@ tbody tr:nth-child(even) {
     background-color: var(--numerus--header--background-color);
 }
 
-.web {
-    margin: 8.5rem 4rem;
-    background-color: var(--numerus--header--background-color);
-}
-
-.web h1 {
-    padding-bottom: .9375em;
-    border-bottom: 1px solid var(--numerus--color--black);
-    margin-bottom: .625em;
-}
-
-#login {
-    background-color: var(--numerus--color--hay);
-    padding: 1.25em;
-}
-
-#login h2 {
-    margin-bottom: 1em;
-}
-
 div[role="alert"].error {
     padding: 1.25em;
     background-color: var(--numerus--color--red);
@@ -10237,3 +10218,154 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 .ri-zzz-line:before {
     content: '\f2df';
 }
+
+
+/* web */
+
+
+
+.web {
+    margin: 3rem;
+    background-color: var(--numerus--header--background-color);
+}
+
+.web h1 {
+    padding-bottom: .9375em;
+    border-bottom: 1px solid var(--numerus--color--black);
+}
+
+#login {
+    background-color: var(--numerus--color--hay);
+    padding: 1.25em;
+}
+
+#login h2 {
+    margin-bottom: 1em;
+}
+
+.contenidor {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 5rem 0;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+
+.graella {
+display: grid;
+grid-template-columns: repeat(6, 1fr);
+grid-template-rows: repeat(3, 1fr);
+grid-column-gap: 0px;
+grid-row-gap: 0px;
+}
+
+.caixa {
+
+}
+
+.caixa-1 {
+  grid-area: 1 / 1 / 2 / 3;
+  background: var(--numerus--color--yellow);
+  font-size: calc(16px + 5vw);
+  display: grid;
+  align-content: center;
+  justify-content: start;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-2 {
+  grid-area: 1 / 3 / 2 / 6;
+  padding: 1rem;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-3 {
+  grid-area: 1 / 6 / 2 / 7;
+  background: var(--numerus--color--white);
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-4 {
+  grid-area: 2 / 1 / 3 / 3;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-5 {
+  grid-area: 2 / 3 / 3 / 4;
+  background: var(--numerus--color--red);
+  padding: 1rem;
+  border-bottom: 1px solid var(--numerus--color--black);
+ }
+.caixa-6 {
+  grid-area: 2 / 4 / 3 / 5;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-7 {
+  grid-area: 2 / 5 / 3 / 7;
+  background: var(--numerus--color--green);
+  font-size: calc(16px + 5vw);
+  display: grid;
+  align-content: center;
+  justify-content: end;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-8 {
+  grid-area: 3 / 1 / 4 / 2;
+  background: var(--numerus--color--black);
+  color: var(--numerus--color--white);
+  padding: 1rem;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+.caixa-9 {
+  grid-area: 3 / 2 / 4 / 7;
+  font-size: calc(16px + 5vw);
+  display: grid;
+  align-content: center;
+  justify-content: end;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+
+
+/* web responsive */
+
+@media screen and (max-width: 992px) {
+
+  .contenidor {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+  }
+  .graella {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(5, 1fr);
+      grid-column-gap: 0px;
+      grid-row-gap: 0px;
+  }
+  .caixa-1 {
+    grid-area:  1 / 1 / 2 / 2; /* posició 1*/
+  }
+  .caixa-2 {
+    grid-area: 1 / 2 / 2 / 3; /* posició 2*/
+  }
+  .caixa-3 {
+    grid-area: 2 / 1 / 3 / 2; /* posició 3*/
+  }
+  .caixa-4 {
+    grid-area: 5 / 1 / 6 / 2;  /* posició 7*/
+    display: none;
+  }
+  .caixa-5 {
+    grid-area: 2 / 2 / 3 / 3; /*posició 4*/
+   }
+  .caixa-6 {
+    grid-area: 5 / 2 / 6 / 3;  /* posició 8*/
+    display: none;
+  }
+  .caixa-7 {
+    grid-area:  3 / 1 / 4 / 2; /* posició 5*/
+    justify-content: start;
+  }
+  .caixa-8 {
+    grid-area: 3 / 2 / 4 / 3;  /* posició 6*/
+  }
+  .caixa-9 {
+    grid-area: 4 / 1 / 5 / 3;  /* posició 9*/
+  }
+
+
+}

web/template/home.gohtml

@@ -3,6 +3,22 @@
 {{- end }}
 
 {{ define "content" -}}
-    <h1><img src="/static/numerus.svg" alt="Numerus" width="620" height="77"></h1>
+
-    <a href="/login">{{( pgettext "Login" "title" )}}</a>
+<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
+<div class="contenidor">
+  <p>Si vols accedir al teu usuari només has d'anar a la pàgina d'<a href="/login">entrada</a> i apuntar les teves credencials al seu lloc.</p>
+</div>
+<div class="graella">
+  <div class="caixa caixa-1"><p>gestor</p></div>
+  <div class="caixa caixa-2"></div>
+  <div class="caixa caixa-3"> </div>
+  <div class="caixa caixa-4"> </div>
+  <div class="caixa caixa-5"><p>Eina per simplificar la gestió d'autònoms i petites empreses.</p></div>
+  <div class="caixa caixa-6"> </div>
+  <div class="caixa caixa-7"><p>79%</p></div>
+  <div class="caixa caixa-8">Redueix el temps de gestió, tingues controlats els teus números.</div>
+  <div class="caixa caixa-9"><p>aplicació</p></div>
+</div>
+
+
 {{- end }}