Update home page with proper marketing text

web/static/numerus.css

@@ -207,7 +207,7 @@ input[type=file] {
 }
 
 input[type="submit"], button, .button {
-    min-width: 34rem;
+    min-width: 26rem;
     background-color: var(--numerus--color--white);
     border: 2px solid var(--numerus--color--black);
     text-transform: uppercase;
@@ -505,7 +505,7 @@ ul[role="menu"].action-menu button, ul[role="menu"].action-menu a {
     align-items: center;
     border: 0;
     color: var(--numerus--text-color);
-    text-decoration: none;
+    text-decoration: none !important;
     text-transform: initial;
 }
 
@@ -553,17 +553,17 @@ ul[role="menu"].action-menu li i[class^='ri-'] {
 
 #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a:hover {
   color: var(--numerus--text-color);
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 
 #profile-menu summary:active, #profile-menu summary:active, ul[role="menu"].action-menu button:active, ul[role="menu"].action-menu a:active, body > nav ul:active li:active a:active {
   color: var(--numerus--text-color);
-text-decoration: underline;
+text-decoration: none;
 }
 
 body > nav a[aria-current] {
-    background-color: yellow;
+    text-decoration: underline;
 }
 
 /* menu tauler final */
@@ -10281,7 +10281,16 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 
 .web h1 {
     padding-bottom: .9375em;
-    border-bottom: 1px solid var(--numerus--color--black);
+}
+
+.header-web {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--numerus--color--black);
+}
+
+.menu a {
+  color: var(--numerus--font-family);
 }
 
 #login {
@@ -10297,7 +10306,7 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     padding: 5rem 0;
-    border-bottom: 1px solid var(--numerus--color--black);
+    
 }
 
 .graella {
@@ -10379,6 +10388,75 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 }
 
 
+.descripcio {
+  display: flex;
+  gap: 5rem;
+  justify-content: space-around;
+  margin: 5rem 0;
+}
+
+.paragraf p {
+  margin: 15px 0;
+  max-width: 45%;
+}
+
+.icon-list {
+  display: flex;
+  gap: 10px;
+  padding: 5px 0;
+}
+
+.icon-list svg {
+  width: 24px;
+}
+
+.opensource {
+  display: flex;
+  justify-content: space-between;
+  gap: 5rem;
+  border-top: 1px solid var(--numerus--color--black);
+}
+
+.quadradet {
+  width: 17rem;
+  height: 17rem;
+  background: white;
+}
+
+.llicencia {
+  max-width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5rem;
+  margin: 17rem 0 0 0;
+}
+
+.price-section {
+  display: flex;
+  justify-content: space-between;
+  gap: 5rem;
+  border-top: 1px solid var(--numerus--color--black);
+  padding: 5rem 0 0 0;
+}
+  
+.price h3 {
+  font-size: 4rem;
+}
+  
+.price-detail {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.footer-web {
+  border-top: 1px solid var(--numerus--color--black);
+  margin: 5rem 0;
+  padding: 5rem 0 0 0;
+}
+
 /* web responsive */
 
 @media screen and (max-width: 992px) {
@@ -10437,3 +10515,4 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 
 
 }
+

web/template/home.gohtml

@@ -1,22 +1,86 @@
 {{ define "title" -}}
-    {{( pgettext "Home" "title" )}}
+	{{( pgettext "Home" "title" )}}
 {{- end }}
 
 {{ define "content" -}}
+	<div class="header-web">
+		<div class="logo"><h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1></div>
+		<div class="menu"><a href="https://numerus.tandem.ws/login">login</a></div>
+	</div>
+
+	<div class="graella">
+		<div class="caixa caixa-1">autònoms</div>
+		<div class="caixa caixa-2"></div>
+		<div class="caixa caixa-3"></div>
+		<div class="caixa caixa-4"></div>
+		<div class="caixa caixa-5"> Eina per simplificar la gestió de les autònomes, que prou feina tens amb lo teu.</div>
+		<div class="caixa caixa-6"></div>
+		<div class="caixa caixa-7">gestió</div>
+		<div class="caixa caixa-8">
+			<p>PRESSUPOSTOS</p>
+			<p>FACTURES</p>
+			<p>DESPESES</p>
+			<p>IMPOSTOS</p>
+			<p>SERVEIS/PRODUCTES</p>
+			<p>CONTACTES</p>
+		</div>
+		<div class="caixa caixa-9"></div>
+	</div>
+
+	<div class="descripcio">
+		<div class="paragraf">
+			<p>Si estàs en règim d'autònom/a ja saps el que costa portar al dia la facturació.</p>
+
+			<p>Tips de provar diferents aplicacions i que cap s'ajustés a les nostres necessitats, vam decidir fer la nostra pròpia eina: numerus.</p>
+
+			<p>L'hem estat provant un temps i creiem que és hora de compartir-la.</p>
+
+			<p>Creiem que per a una petita empresa, cooperativa o una associació també pot ajudar a gestionar els números de l'entitat.</p>
+		</div>
+		<div class="llista">
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 17C15.6623 17 18.8649 18.5751 20.607 20.9247L18.765 21.796C17.3473 20.1157 14.8473 19 11.9999 19C9.15248 19 6.65252 20.1157 5.23479 21.796L3.39355 20.9238C5.13576 18.5747 8.33796 17 11.9999 17ZM11.9999 2C14.7613 2 16.9999 4.23858 16.9999 7V10C16.9999 12.6888 14.8776 14.8818 12.2168 14.9954L11.9999 15C9.23847 15 6.9999 12.7614 6.9999 10V7C6.9999 4.31125 9.1222 2.11818 11.783 2.00462L11.9999 2ZM11.9999 4C10.4022 4 9.09623 5.24892 9.00499 6.82373L8.9999 7V10C8.9999 11.6569 10.343 13 11.9999 13C13.5976 13 14.9036 11.7511 14.9948 10.1763L14.9999 10V7C14.9999 5.34315 13.6567 4 11.9999 4Z"></path></svg> usuaria administradora (tu)</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"></path></svg> usuaries gestora (companyes del que feu)</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18.5858 17L16.7574 15.1716L18.1716 13.7574L22.4142 18L18.1716 22.2426L16.7574 20.8284L18.5858 19H15V17H18.5858Z"></path></svg> usuari comptable (si necessites un accés comptable)</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5049 21.0027C15.5719 21.0027 14.0049 19.4357 14.0049 17.5027C14.0049 15.5697 15.5719 14.0027 17.5049 14.0027C19.4379 14.0027 21.0049 15.5697 21.0049 17.5027C21.0049 19.4357 19.4379 21.0027 17.5049 21.0027ZM17.5049 19.0027C18.3333 19.0027 19.0049 18.3312 19.0049 17.5027C19.0049 16.6743 18.3333 16.0027 17.5049 16.0027C16.6765 16.0027 16.0049 16.6743 16.0049 17.5027C16.0049 18.3312 16.6765 19.0027 17.5049 19.0027ZM6.50488 10.0027C4.57189 10.0027 3.00488 8.43574 3.00488 6.50275C3.00488 4.56975 4.57189 3.00275 6.50488 3.00275C8.43788 3.00275 10.0049 4.56975 10.0049 6.50275C10.0049 8.43574 8.43788 10.0027 6.50488 10.0027ZM6.50488 8.00275C7.33331 8.00275 8.00488 7.33117 8.00488 6.50275C8.00488 5.67432 7.33331 5.00275 6.50488 5.00275C5.67646 5.00275 5.00488 5.67432 5.00488 6.50275C5.00488 7.33117 5.67646 8.00275 6.50488 8.00275ZM19.076 3.51747L20.4902 4.93168L4.93382 20.488L3.5196 19.0738L19.076 3.51747Z"></path></svg> creació de tipus d’impostos</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 3V19H21V21H3V3H5ZM20.2929 6.29289L21.7071 7.70711L16 13.4142L13 10.415L8.70711 14.7071L7.29289 13.2929L13 7.58579L16 10.585L20.2929 6.29289Z"></path></svg> gràfiques de progrés i comparació</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg> etiquetes per classificar</div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4V6H20L15 13.5V22H9V13.5L4 6H3V4H21ZM6.4037 6L11 12.8944V20H13V12.8944L17.5963 6H6.4037Z"></path></svg> filtres avançats</div>
+		</div>
+	</div>
+
+	<div class="opensource">
+		<div class="quadradet"></div>
+		<div class="llicencia">
+			<div>
+			<div class="icon-list"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 16.3996 19.1598 20.1355 15.2122 21.4732L14.9859 21.5469L12.082 13.997C13.151 13.95 14.001 13.0544 14.001 12C14.001 10.8954 13.1055 10 12.001 10C10.8964 10 10.001 10.8954 10.001 12C10.001 13.0768 10.8519 13.9548 11.918 13.9983L9.01501 21.5466L8.78975 21.4732C4.84212 20.1355 2.00098 16.3996 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2ZM12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 14.9201 5.56547 17.4747 7.90198 18.8715L9.38145 15.023C8.5358 14.2896 8.00098 13.2073 8.00098 12C8.00098 9.79086 9.79184 8 12.001 8C14.2101 8 16.001 9.79086 16.001 12C16.001 13.2075 15.466 14.29 14.62 15.0234C15.1861 16.4969 15.6797 17.7803 16.0998 18.8729C18.4362 17.4751 20.001 14.9203 20.001 12C20.001 7.58172 16.4193 4 12.001 4Z"></path></svg></div>
+			<p>numerus és de codi obert amb llicència <a href="https://www.gnu.org/licenses/licenses.en.html#AGPL" target="_blank">GNU Affero General Public License (AGPL)</a>, això vol dir que t’ho pots descarregar, instal·lar al teu servidor(*), modificar(**) i compartir el que has fet.</p>
+
+			<p><small>*_ servidor mínim: 1 GB RAM, 1/2 vCore, 5 GB SSD NVMe.</small><br>
+			<small>**_ sempre que respectis els mateixos valors i ho comparteixis amb la mateixa llicència.</small></p>
+			</div>
+			<div class="quadradet"></div>
+		</div>
+	</div>
+
+	<div class="price-section">
+		<div class="paragraf">
+			<p>Si no saps com instal·lar numerus en un servidor, pots registrar-te amb nosaltres.</p>
+
+			<p>Obtindràs un accés privat i encriptat al teu tauler on gestionar tota l'aplicació.</p>
+
+			<p>Nosaltres et cobrarem el que costa un servidor dedicat a clouding.io per allotjar Numerus + la gestió i manteniment de l'aplicació + impostos.</p>
+
+			<p>I de pas ens ajudes a mantenir i millorar el que hem fet i t'és útil :)</p>
+		</div>
+		<div class="price">
+			<div class="price-detail"><h3>4,50 €/mes</h3><small>(sense impostos)</small></div>
+			<div class="price-detail"><h3>5,45 €/mes</h3><small>(amb impostos)</small></div>
+			<p>Al crear un usuari, pots cancel·lar la teva subscripció en qualsevol moment. Es cobrarà fins al mes actual.</p>
+		</div>
+	</div>
+
+	<div class="footer-web">
+		<small>ho hem fet tant bé com hem sabut en Jordi Fita i l’Oriol Carbonell</small>
+	</div>
 
-    <h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
-    <div class="contenidor">
-        <p>{{ printf (gettext "If you want to sign in, just head to %sthe login page%s and enter your credentials in the form.") "<a href=\"/login\">" "</a>" | unsafe }}</p>
-    </div>
-    <div class="graella">
-        <div class="caixa caixa-1">{{( gettext "manager" )}}</div>
-        <div class="caixa caixa-2"></div>
-        <div class="caixa caixa-3"></div>
-        <div class="caixa caixa-4"></div>
-        <div class="caixa caixa-5">{{( gettext "Tool to simplify management for small business and freelancers" )}}</div>
-        <div class="caixa caixa-6"></div>
-        <div class="caixa caixa-7">79%</div>
-        <div class="caixa caixa-8">{{( gettext "Reduce management time, take control of your balance." )}}</div>
-        <div class="caixa caixa-9">{{( gettext "application" )}}</div>
-    </div>
 {{- end }}