New main page introduction

src/app/main/not-logged/not-logged.component.html

@@ -19,30 +19,94 @@
 
 <section id="about" class="page info-section">
   <h1>about</h1>
+  <nav>
+    <ul>
+      <li><a href="#what-is-this">what is this?</a></li>
+      <li><a href="#how-it-works">how does it work?</a></li>
+      <!--li><a href="#resources">money and other resources</a></li-->
+      <li><a href="#dev">development</a></li>
+      <li><a href="#contact">contact</a></li>
+    </ul>
+  </nav>
+  <section>
+    <nav class="nav-back"><a href="#about">back</a></nav>
+    <h2 id="what-is-this">what is this?</h2>
+    Connect with similar-minded people.<br>
+    Start doing what you really care about. Together. Fulltime.<br>
+    <!--Share ideas, tackle challenges, start a project.-->
+  </section>
+
   <section>
-    <h2>vision</h2>
+    <nav class="nav-back"><a href="#about">back</a></nav>
+    <h2 id="how-it-works">how does it work?</h2>
+    <h3>Tell what you care about</h3>
+    <section class="works-section">
+      <div>
+        <p>Tags represent what you care about. Add them to your profile. Tell how relevant they are to you. You can also tell why you care.</p>
+      </div>
+      <div>
+        <img class="screenshot" src="/static/img/screenshots/profile.png" alt="profile">
+      </div>
+    </section>
 
-    <p>It should be incredibly easy to start doing what you really care
-      about. Fulltime.</p>
+    <h3>Find similar-minded people</h3>
+    <section class="works-section">
+      <div>
+        <p>Tags help you to find similar-minded people. And they help people to find you.</p>
+      </div>
+      <div>
+        <img class="screenshot" src="/static/img/screenshots/people.png" alt="search people">
+      </div>
+    </section>
 
-    <ul>
-      <li>Connect with people who share your passions.</li>
-      <li>Share your ideas and improve them together.</li>
-      <li>Identify challenges and tackle them.</li>
-      <li>Start or join a project that will make the difference.</li>
-    </ul>
+    <h3>Find people around</h3>
+    <section class="works-section">
+      <div>
+        <p>Map shows where people are.</p>
+      </div>
+      <div>
+        <img class="screenshot" src="/static/img/screenshots/map.png" alt="map">
+      </div>
+    </section>
 
-    <p>Currently we develop this platform to do exactly that.</p>
+    <h3>Make the connection</h3>
+    <section class="works-section">
+      <div>
+        <p>If you find somebody, don't hesitate to start a conversation. Discuss your ideas, meet and start collaborating.</p>
+      </div>
+      <div>
+        <img class="screenshot" src="/static/img/screenshots/messages.png" alt="messages">
+      </div>
+    </section>
 
-    <p>One day we'll have a network of places where people can meet and
-      collaborate. We'll learn from mistakes and discover best practices.</p>
-    <p>We'll support each other. We will empower ourselves to leave
-      corporations, institutions and other meaningless systems we can't
-      escape now.</p>
+    <h3>Future</h3>
+    <section class="works-section">
+      <div>
+        <p>Soon it will be possible to share ideas, identify challenges and start or join projects.</p>
+        <p>We also imagine creating community places where people can meet and collaborate. That may happen later in the future.</p>
+      </div>
+    </section>
   </section>
 
+  <!--section>
+    <nav class="nav-back"><a href="#about">back</a></nav>
+    <h2 id="resources">money and other resources</h2>
+    <p>This project is not for profit. It will never be financed by advertising, users will never be forced to pay for access to any part of the application, and we'll never sell users' data. The project is and will be open source. We promise.</p>
+    <p>What then?</p>
+    <p>Currently, it's very cheap to run the project: Coding and maintenance is done by a small team of volunteers. Server rent is very cheap (around 50 EUR per year).</p>
+    <p>But what about the future?</p>
+    <p>We want to encourage profit-oriented projects created on ditup to donate a small part of their shares or profits to ditup. If they're successful, ditup will be able to grow, too.</p>
+    <p>Traditional donations may also be an option.</p>
+    <p>All ditup accounts should be public.</p>
+    <p>The resources gathered in this way will be used to keep the platform running. Anything above that will be used for further growth: Creating collaborative community places and other possible future ideas.</p>
+    <p>We will need a legal base for this. Let us know, if you know how to do that.</p>
+    <p>If we fail to keep these promises, may our reputation fall apart. May we be lost in the silicon history. May you clone the project or start a better one.</p>
+
+  </section-->
+
   <section>
-    <h2>development</h2>
+    <nav class="nav-back"><a href="#about">back</a></nav>
+    <h2 id="dev">development</h2>
 
     <a href="https://github.com/ditup/ditapi">REST API</a>
     and
@@ -51,7 +115,8 @@ <h2>development</h2>
   </section>
 
   <section>
-    <h2>contact</h2>
+    <nav class="nav-back"><a href="#about">back</a></nav>
+    <h2 id="contact">contact</h2>
     <span id="email-contact">michal dot salajka at protonmail dot com</span>
   </section>
 </section>

src/app/main/not-logged/not-logged.component.scss

@@ -118,3 +118,60 @@ a {
     background-color: $dark-color;
   }
 }
+
+.nav-back {
+  font-size: smaller;
+  color: gray;
+  text-align: right;
+  float: right;
+}
+
+
+// display screenshots and description next to each other
+// every second section has reverse order, to show image on the left
+// there is a space of 1em between image and description
+@media (min-width: 513px) {
+  .works-section {
+    display: flex;
+    justify-content: space-between;
+
+    > div {
+      flex: 1;
+
+      > p:nth-of-type(1) {
+        padding-top: 0;
+      }
+    }
+
+    &:nth-of-type(even) {
+      flex-direction: row-reverse;
+
+      p {
+        padding-left: 1em;
+      }
+    }
+
+    &:nth-of-type(odd) {
+      p {
+        padding-right: 1em;
+      }
+    }
+  }
+}
+
+// screenshots and description for mobile display
+@media (max-width: 512px) {
+  .works-section {
+    display: block;
+  }
+}
+
+.works-section {
+  text-align: justify;
+}
+
+.screenshot {
+  width: 100%;
+  border: 2px solid $light-color;
+}
+// end of displaying screenshots and info