Update

Server/app/svelte/src/landing-component.svelte

@@ -27,13 +27,19 @@
         <p>We are people united around a single cause of bringing down authoritarian exploitative systems represented by different forms of capitalism and replacing them with libertarian socialist systems to create a more equitable and democratic world.</p>
         <div id="container-grid">
             <div>
-                <p>GROUPS: We organize into groups for education, advocacy and mutual aid. We aim to show people how the current politico-economic systems negatively affect our wellbeing, show them the alternatives, and engage in mutual aid to make our life under capitalism easier.</p>
+                <h2>GROUPS</h2>
+                <img id="groups-img" src="/img/common/groups.svg" alt="groups">
+                <p>We organize into groups for education, advocacy and mutual aid. We aim to show people how the current politico-economic systems negatively affect our wellbeing, show them the alternatives, and engage in mutual aid to make our life under capitalism easier.</p>
             </div>
             <div>
-                <p>COMMUNITIES: We build communities according to libertarian socialist principles where people own their land, their houses, the means of production and use direct democracy to make decisions. We are growing our socialist world one community at a time.</p>
+                <h2>COMMUNITIES</h2>
+                <img id="communities-img" src="/img/common/communities.svg" alt="communities">
+                <p>We build communities according to libertarian socialist principles where people own their land, their houses, the means of production and use direct democracy to make decisions. We are growing our socialist world one community at a time.</p>
             </div>
             <div>
-                <p>COOPERATIVES: We create worker cooperatives in order to finance the functioning of our groups and communities. Economic power determines political power, therefore, establishing cooperatives is one of the first steps towards achieving socialism by providing democratic workplaces for workers instead of authoritarian capitalist businesses.</p>
+                <h2>COOPERATIVES</h2>
+                <img id="coops-img" src="/img/common/coops.svg" alt="coops">
+                <p>We create worker cooperatives in order to finance the functioning of our groups and communities. Economic power determines political power, therefore, establishing cooperatives is one of the first steps towards achieving socialism by providing democratic workplaces for workers instead of authoritarian capitalist businesses.</p>
             </div>
         </div>
     </div>
@@ -42,6 +48,37 @@
 <style>
     @import '/css/common.css';
 
+    #container-grid > div > h2 {
+        text-align: center;
+    }
+
+    #groups-img {
+        position: absolute;
+        width: 14rem;
+        left: 50%;
+        transform: translate(-50%);
+        z-index: 0;
+        opacity: 0.2;
+    }
+
+    #communities-img {
+        position: absolute;
+        width: 11rem;
+        left: 50%;
+        transform: translate(-50%);
+        z-index: 0;
+        opacity: 0.2;
+    }
+
+    #coops-img {
+        position: absolute;
+        width: 10.5rem;
+        left: 50%;
+        transform: translate(-50%);
+        z-index: 0;
+        opacity: 0.2;
+    }
+
     #text-container {
         max-width: calc(100vw - 4rem);
         margin: auto;
@@ -60,7 +97,7 @@
     }
 
     #container>div>p {
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
     }
 
     #container p {
@@ -74,6 +111,16 @@
         grid-gap: 3rem;
     }
 
+    #container-grid > div {
+        position: relative;
+    }
+
+    #container-grid > div > p {
+        position: relative;
+        margin-top: 7rem;
+        z-index: 2;
+    }
+
     @media only screen and (max-width: 1000px) {
         #container-grid {
             display: grid;

Server/public/img/common/communities.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" fill="#5B6970"><path d="m0 0h16v16h-16z" fill="none"/><path d="m0 8v7h3v-4h3v4h6v-7l-6-5zm10-7-2.4 2 5.4 4.5v5.5h3v-7z"/></svg>

Server/public/img/common/coops.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear-fill"  fill="#5B6970" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 0 0-5.86 2.929 2.929 0 0 0 0 5.858z"/>
+</svg>

Server/public/img/common/groups.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" fill="#5B6970"><path d="m96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112s-50.1-112-112-112-112 50.1-112 112 50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3c-63.6 0-115.2 51.6-115.2 115.2v28.8c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4c-11.6-11.5-27.5-18.6-45.1-18.6h-64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"/></svg>

Server/public/js/components/landing-component.js

@@ -1 +1 @@
-import{S as e,i,a as t,b as o,s as r,e as a,n,f as s,h as c,o as d}from"./index-04d7984b.js";function m(e){let i;return{c(){i=a("div"),i.innerHTML='<picture><source srcset="/img/crowd.webp"/> \n        <source srcset="/img/crowd.png"/> \n        <img id="crowd" alt="crowd"/></picture> \n    \n    <div id="text-container"><p>We are people united around a single cause of bringing down authoritarian exploitative systems represented by different forms of capitalism and replacing them with libertarian socialist systems to create a more equitable and democratic world.</p> \n        <div id="container-grid"><div><p>GROUPS: We organize into groups for education, advocacy and mutual aid. We aim to show people how the current politico-economic systems negatively affect our wellbeing, show them the alternatives, and engage in mutual aid to make our life under capitalism easier.</p></div> \n            <div><p>COMMUNITIES: We build communities according to libertarian socialist principles where people own their land, their houses, the means of production and use direct democracy to make decisions. We are growing our socialist world one community at a time.</p></div> \n            <div><p>COOPERATIVES: We create worker cooperatives in order to finance the functioning of our groups and communities. Economic power determines political power, therefore, establishing cooperatives is one of the first steps towards achieving socialism by providing democratic workplaces for workers instead of authoritarian capitalist businesses.</p></div></div></div>',this.c=n,s(i,"id","container")},m(e,t){o(e,i,t)},p:n,i:n,o:n,d(e){e&&c(i)}}}function p(e){return d((()=>{})),[]}class l extends e{constructor(e){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#text-container{max-width:calc(100vw - 4rem);margin:auto}#crowd{width:100%;margin-bottom:2rem}#container{margin:auto;max-width:1200px;margin-top:2rem;margin-bottom:5rem}#container>div>p{margin-bottom:2rem}#container p{font-size:1.2rem;text-align:justify}#container-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;grid-gap:3rem}@media only screen and (max-width: 1000px){#container-grid{display:grid;grid-template-columns:1fr;grid-gap:2rem}}</style>",i(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},p,m,r,{},null),e&&e.target&&o(e.target,this,e.anchor)}}customElements.define("landing-component",l);export{l as default};
+import{S as i,i as e,a as t,b as o,s as r,e as n,n as a,f as s,h as c,o as m}from"./index-04d7984b.js";function d(i){let e;return{c(){e=n("div"),e.innerHTML='<picture><source srcset="/img/crowd.webp"/> \n        <source srcset="/img/crowd.png"/> \n        <img id="crowd" alt="crowd"/></picture> \n    \n    <div id="text-container"><p>We are people united around a single cause of bringing down authoritarian exploitative systems represented by different forms of capitalism and replacing them with libertarian socialist systems to create a more equitable and democratic world.</p> \n        <div id="container-grid"><div><h2>GROUPS</h2> \n                <img id="groups-img" src="/img/common/groups.svg" alt="groups"/> \n                <p>We organize into groups for education, advocacy and mutual aid. We aim to show people how the current politico-economic systems negatively affect our wellbeing, show them the alternatives, and engage in mutual aid to make our life under capitalism easier.</p></div> \n            <div><h2>COMMUNITIES</h2> \n                <img id="communities-img" src="/img/common/communities.svg" alt="communities"/> \n                <p>We build communities according to libertarian socialist principles where people own their land, their houses, the means of production and use direct democracy to make decisions. We are growing our socialist world one community at a time.</p></div> \n            <div><h2>COOPERATIVES</h2> \n                <img id="coops-img" src="/img/common/coops.svg" alt="coops"/> \n                <p>We create worker cooperatives in order to finance the functioning of our groups and communities. Economic power determines political power, therefore, establishing cooperatives is one of the first steps towards achieving socialism by providing democratic workplaces for workers instead of authoritarian capitalist businesses.</p></div></div></div>',this.c=a,s(e,"id","container")},m(i,t){o(i,e,t)},p:a,i:a,o:a,d(i){i&&c(e)}}}function p(i){return m((()=>{})),[]}class g extends i{constructor(i){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#container-grid>div>h2{text-align:center}#groups-img{position:absolute;width:14rem;left:50%;transform:translate(-50%);z-index:0;opacity:0.2}#communities-img{position:absolute;width:11rem;left:50%;transform:translate(-50%);z-index:0;opacity:0.2}#coops-img{position:absolute;width:10.5rem;left:50%;transform:translate(-50%);z-index:0;opacity:0.2}#text-container{max-width:calc(100vw - 4rem);margin:auto}#crowd{width:100%;margin-bottom:2rem}#container{margin:auto;max-width:1200px;margin-top:2rem;margin-bottom:5rem}#container>div>p{margin-bottom:1rem}#container p{font-size:1.2rem;text-align:justify}#container-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;grid-gap:3rem}#container-grid>div{position:relative}#container-grid>div>p{position:relative;margin-top:7rem;z-index:2}@media only screen and (max-width: 1000px){#container-grid{display:grid;grid-template-columns:1fr;grid-gap:2rem}}</style>",e(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},p,d,r,{},null),i&&i.target&&o(i.target,this,i.anchor)}}customElements.define("landing-component",g);export{g as default};