added hero to front page

pass/public/images/icon-lupe.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg1729"
+   version="1.1"
+   viewBox="0 0 24.410983 23.632021"
+   height="89.317871"
+   width="92.261986"
+   sodipodi:docname="icon-lupe.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="2.6422484"
+     inkscape:cx="-31.832911"
+     inkscape:cy="43.145074"
+     inkscape:window-x="1992"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1729" />
+  <defs
+     id="defs1723" />
+  <metadata
+     id="metadata1726">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <circle
+     transform="rotate(15.366798)"
+     r="7.3626533"
+     cy="6.1155853"
+     cx="10.750866"
+     id="path2298"
+     style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.767277;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     transform="matrix(0.66463899,-0.74716465,0.74301394,0.66927594,0,0)"
+     y="19.314386"
+     x="-2.0791028"
+     height="11.882498"
+     width="2.1384423"
+     id="rect2300"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.69334972;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+</svg>

pass/public/images/key-icon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 20.097663 20.286787"
+   height="76.674469"
+   width="75.959671"
+   sodipodi:docname="key-icon.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="3.0779476"
+     inkscape:cx="-95.875593"
+     inkscape:cy="35.738098"
+     inkscape:window-x="1992"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <defs
+     id="defs2">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient873">
+      <stop
+         id="stop871"
+         offset="0"
+         style="stop-color:#ff0000;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.09970184;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 18.548841,20.021815 -1.423824,-0.0016 V 19.267543 18.51486 h -0.807962 -0.807963 l -0.0027,-0.808963 -0.0027,-0.808962 -0.864514,-0.0025 -0.864514,-0.0025 -3.106893,-3.078012 -3.106948,-3.078087 -0.6161008,0.192735 C 5.369567,11.421386 3.8428529,11.310566 2.4979419,10.605831 1.9507919,10.319124 1.8313133,10.222373 1.2635892,9.6062807 0.76770822,9.0681533 0.58520984,8.815025 0.39904078,8.4071476 -0.40413009,6.6474745 -0.21795172,4.5496725 0.89050402,2.8694977 2.5503663,0.35351264 5.808419,-0.61871048 8.3260753,0.65067571 8.8445141,0.91207017 9.0326166,1.0544137 9.5795476,1.5992191 10.139883,2.1573327 10.260718,2.3179174 10.514507,2.8412454 11.16255,4.1775219 11.26177,5.6895827 10.791983,7.0698361 L 10.643076,7.507329 13.3539,10.218376 c 1.490968,1.491061 3.578542,3.611855 4.639058,4.712871 l 1.928207,2.001851 0.06318,1.507753 c 0.03477,0.829238 0.04634,1.524573 0.02576,1.545164 -0.02059,0.02059 -0.67816,0.03674 -1.461263,0.03585 z M 13.775196,13.655162 C 9.3166978,9.1966642 9.2785429,9.1603557 9.1677711,9.2711278 c -0.11077,0.1107693 -0.074463,0.148927 4.3840349,4.6074252 4.458499,4.458497 4.496653,4.494807 4.607426,4.384035 0.11077,-0.110771 0.07446,-0.148925 -4.384036,-4.607426 z M 6.559274,3.5432717 C 6.5241824,3.2494845 6.2131384,2.8922974 5.9638794,2.8595568 5.6099197,2.8130602 5.4524596,2.9338711 4.0856398,4.3006949 2.7188201,5.667514 2.5980035,5.8249757 2.644501,6.1789343 2.6772445,6.4281918 3.0344321,6.7392357 3.3282168,6.7743292 l 0.2628987,0.031399 1.499778,-1.4997774 1.4997773,-1.4997773 z"
+     id="path937"
+     inkscape:connector-curvature="0" />
+</svg>

pass/public/images/key-verified.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 20.2868 22.110937"
+   height="83.568893"
+   width="76.674522">
+  <defs
+     id="defs2">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient873">
+      <stop
+         id="stop871"
+         offset="0"
+         style="stop-color:#ff0000;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-3.4184229,-3.3590331)"
+     id="layer1">
+    <g
+       transform="matrix(0.94051295,0,0,0.94051295,12.688618,13.321448)"
+       id="g951">
+      <path
+         style="fill:#888888;fill-opacity:1;stroke:none;stroke-width:0.106914;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 10.135492,10.776251 -1.5268189,-0.0017 -1e-6,-0.8071322 V 9.1602915 h -0.866408 l -0.866407,7e-7 -0.0029,-0.86748 -0.0029,-0.86748 -0.92705,-0.00273 -0.927051,-0.00273 -3.331638,-3.300666 -3.331637,-3.30066589 -0.660668,0.20667649 c -1.689156,0.5284253 -3.326308,0.4095897 -4.768506,-0.34612369 -0.58673,-0.3074467 -0.714851,-0.4111963 -1.323643,-1.0718548 -0.531751,-0.5770545 -0.727451,-0.84849281 -0.927087,-1.28587511 -0.8612711,-1.8869634 -0.661624,-4.1365143 0.527014,-5.9382279 1.779932,-2.6979853 5.273663,-3.7405363 7.97344004,-2.379325 0.555941,0.280302 0.75765,0.432943 1.344145,1.017158 0.60087796,0.598474 0.73045396,0.770674 1.00260096,1.331858 0.694921,1.4329399 0.801318,3.0543782 0.297548,4.5344753 l -0.159678,0.4691404 2.906917,2.90715631 c 1.59882,1.59891999 3.837403,3.87312629 4.974634,5.05378699 l 2.0676879,2.1466589 0.06775,1.6168194 c 0.03729,0.8892229 0.04971,1.6348564 0.02762,1.6569384 -0.02208,0.02208 -0.727216,0.03938 -1.566968,0.03845 z M 5.0165351,3.9490521 C 0.23552214,-0.83196119 0.19460714,-0.87089619 0.07582214,-0.75211149 c -0.118783,0.1187827 -0.07985,0.1597001 4.70116396,4.94071299 4.781013,4.7810138 4.821929,4.8199492 4.940713,4.7011644 0.118784,-0.1187833 0.07985,-0.1596979 -4.701164,-4.9407138 z m -7.737901,-10.8433558 c -0.03763,-0.315039 -0.371174,-0.698064 -0.638464,-0.733174 -0.379564,-0.04986 -0.548415,0.07969 -2.014106,1.5453861 -1.465692,1.4656916 -1.595248,1.6345431 -1.545387,2.0141068 0.03511,0.2672877 0.418138,0.6008314 0.733174,0.6384639 l 0.281916,0.033674 1.608268,-1.6082677 1.608267,-1.608267 z"
+         id="path937" />
+      <path
+         id="path831"
+         d="M -8.3687574,8.2904687 -5.4693718,11.491948 0.40944923,4.5325484"
+         style="fill:none;stroke:#00ff00;stroke-width:1.87663555;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

pass/public/images/metager.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="813.33" height="142.67" version="1.1" viewBox="0 0 813.33331 142.66667" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g transform="matrix(1.3333 0 0 -1.3333 0 142.67)"><g transform="scale(.1)" fill="#f47216"><path d="m8.1133 805.72v-798.85h110.19v688.66h422.38v-688.66h107.12v688.66h264.75c104.06 0 156.1-55.09 156.1-163.75v-524.91h111.71v543.28c0 169.87-82.64 255.57-246.39 255.57h-925.87"/><path d="m2074.1 6.8711v108.66h-456.05c-101 0-151.5 53.563-151.5 157.63v273.93c0 108.65 52.04 149.98 156.1 149.98h243.32c82.64 0 125.49-41.32 125.49-122.43v-15.305c0-70.391-41.32-105.59-123.96-105.59h-325.14v-94.886l354.22 3e-3c136.2 0 202.01 59.692 202.01 177.53v58.152c0 140.78-70.4 211.18-212.72 211.18h-281.59c-165.28 0-249.45-85.699-249.45-255.57v-287.7c0-169.87 84.17-255.57 249.45-255.57h469.82"/><path d="m2654.1 115.53h-21.53c-98.36 0-148.88 50.86-151.4 149.73v431.81h172.93v108.65h-172.93v73.277h0.16v112.79c0 48.231-19.15 74.091-69.52 74.091h-42.19v-113.38h-0.17v-146.78h-149.97v-108.65h149.97v-146.92l-0.1 3e-3v-287.7c0-3.265 0.04-6.492 0.1-9.695v-19.105h0.77c9.22-150.7 92.92-226.77 248.57-226.77h35.31v108.66"/><path d="m2828 805.72v-230.32h69.31c27.25 0 40.87 14.426 40.87 42.879v78.789h345.86c101.01 0 151.51-53.668 151.51-157.63v-85.7h-497.37l0.01-52.015c0-28.313-13.75-42.871-40.87-42.871h-93.81v-140.79c0-140.79 70.4-211.19 212.72-211.19h281.59c165.27 0 249.45 85.699 249.45 255.57v287.7c0 169.87-84.18 255.57-249.45 255.57zm289.79-446.87h74.76c50.36 0 69.52-25.856 69.52-74.098v-112.79c0-38.305-19.21-58.168-56.76-58.168h-38.57c-32.53 0-48.95 19.25-48.95 57.465v187.59"/><path d="m3966.6 1065.9c-166.8 0-249.45-84.169-249.45-254.03l0.01-550.94c0-169.86 82.64-254.04 249.45-254.04h344.33c149.97 0 224.96 74.988 224.96 226.5v342.03h-425.45v-94.878h316.79v-225.73c0-93.34-45.92-139.26-139.26-139.26h-299.95c-102.52 0-154.56 52.028-154.56 157.62l-0.01 520.33c0 105.6 52.03 157.62 154.57 157.62h521.85v114.78h-543.28"/><path d="m5875 805.72c-166.81 0-249.45-85.699-249.45-255.82v-543.02h111.72v524.66c0 108.91 53.56 164 157.62 164h195.89v110.19h-215.78"/><path d="m5426.6 6.8711v108.66h-456.05c-101 0-151.5 53.563-151.5 157.63v273.93c0 108.65 52.03 149.98 156.09 149.98h243.33c82.64 0 125.49-41.32 125.49-122.43v-15.305c0-70.391-41.32-105.59-123.96-105.59h-325.14v-94.886l354.22 3e-3c136.2 0 202.01 59.692 202.01 177.53v58.152c0 140.78-70.4 211.18-212.72 211.18h-281.59c-165.28 0-249.45-85.699-249.45-255.57v-287.7c0-169.87 84.17-255.57 249.45-255.57h469.82"/></g></g></svg>

pass/public/styles/base.less

 @import "./misc/vars.less";
 
+@logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
+@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
+
 @font-face {
   font-family: "LiberationSans";
   src: local("Liberation Sans"),

pass/public/styles/index.less

+@import "./misc/vars.less";
+
+@breakpoint-hero-medium: 800px;
+@breakpoint-hero-small: 500px;
+
+#hero {
+  color: white;
+  background-color: @color-main;
+  padding: 3rem;
+  > .container {
+    max-width: 850px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 20em auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "heading search-logo" "text list" "call-to-action list";
+
+    > h1 {
+      grid-area: heading;
+      margin: 0;
+      text-align: right;
+    }
+    > p {
+      margin: 0;
+      grid-area: text;
+      text-align: right;
+    }
+    > ul {
+      grid-area: list;
+      margin: 0;
+      list-style-type: none;
+      padding: 0;
+      text-align: center;
+      display: grid;
+      grid-template: "1fr 1fr" "1fr 1fr";
+      > li::before {
+        content: "✓";
+        padding-right: 0.5rem;
+        color: #3af13a;
+      }
+    }
+
+    > div.search-logo {
+      grid-area: search-logo;
+      align-self: start;
+      justify-self: center;
+      text-align: center;
+      > .metager-logo {
+        grid-area: metager-logo;
+        width: 15em;
+        max-width: calc(100% - 0.5rem);
+        align-self: end;
+        justify-self: center;
+        filter: brightness(0.4);
+        margin-bottom: 1rem;
+      }
+      > .searchbar {
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+        background-color: white;
+        border: 1px solid #585858;
+        border-radius: 10px;
+        overflow: hidden;
+        > button {
+          background: inherit;
+          border: 0;
+          padding: 0.5rem 1rem;
+          img {
+            height: 1em;
+            filter: invert(1) brightness(0.4);
+          }
+          &:nth-child(1) img {
+            filter: none;
+          }
+        }
+        > input {
+          background: inherit;
+          border: 0;
+          border-left: 1px solid #777;
+          border-right: 1px solid #777;
+          margin: 0.5rem 0;
+          padding: 0 0.5rem;
+        }
+      }
+    }
+    > a {
+      grid-area: call-to-action;
+      align-self: center;
+      justify-self: end;
+      display: block;
+      border: 1px solid #777;
+      padding: 1rem;
+      color: white;
+      text-decoration: none;
+      background-color: #3a3af9;
+      margin: 1rem 0 1rem 1rem;
+    }
+
+    @media (max-width: @breakpoint-hero-medium) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto auto auto auto;
+      grid-template-areas: "heading heading" "text list" "call-to-action list" "search-logo search-logo";
+
+      > h1 {
+        text-align: center;
+      }
+      > ul {
+        grid-template: "1fr" "1fr" "1fr" "1fr";
+        padding: 1rem;
+        > li {
+          align-self: center;
+        }
+      }
+      > p {
+        line-height: 1.5;
+        text-align: right;
+        padding: 1rem 0 1rem 1rem;
+      }
+
+      > div.search-logo {
+        padding: 4rem 1rem 1rem 1rem;
+      }
+    }
+  }
+  @media (max-width: @breakpoint-hero-small) {
+    padding: 0.5rem;
+    > .container {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto auto auto;
+      grid-template-areas: "heading" "text" "list" "call-to-action " "search-logo";
+
+      > p {
+        text-align: center;
+        padding: 1rem 0;
+      }
+      > div.search-logo {
+        padding: 2rem 0;
+      }
+      > ul {
+        gap: 0.5rem;
+        padding: 1rem 0;
+      }
+      > a {
+        justify-self: center;
+        margin: 1rem 0;
+      }
+    }
+  }
+}
+
 #offers {
   display: flex;
 

pass/public/styles/misc/vars.less

@@ -3,5 +3,3 @@
 @color-main-font-color: white;
 
 @body-scroll-break-point: 320px;
-@logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
-@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row

pass/views/index.ejs

 <%- include('templates/page_header', {css: ['/styles/index.css'], js: ['/js/index.js']}); %>
-  <p>
-    Wählen Sie aus, wie viele Suchen Sie kaufen möchten.
-  </p>
+  <div id="hero">
+    <div class="container">
+      <h1>Ihr Zugang zum maximalen Datenschutz bei der Suche</h1>
+      <p>Mit MetaGer-Pass können Sie die Internetsuche so genießen, wie sie immer sein sollte:</p>
+      <ul>
+        <li>Ohne Werbung</li>
+        <li>Ohne Tracking Links</li>
+        <li>Ohne Logging</li>
+        <li>Ohne Kompromisse</li>
+      </ul>
+      <div class="search-logo">
+        <img class="metager-logo" src="/images/metager.svg" alt="">
+        <div class="searchbar">
+          <button>
+            <img src="/images/key-verified.svg" alt="">
+          </button>
+          <input type="text" name="eingabe" id="eingabe" value="Anonym im Internet" disabled>
+          <button>
+            <img src="/images/icon-lupe.svg" alt="Suchen">
+          </button>
+        </div>
+      </div>
+      <a class="call-to-action" href="#">So funktioniert es</a>
+    </div>
+  </div>
   <div id="offers">
     <form class="offer" action="/checkout">
       <input type="hidden" name="amount" value="0">

pass/views/templates/page_footer.ejs

+</main>
 </body>
 </html>
\ No newline at end of file

pass/views/templates/page_header.ejs

@@ -33,4 +33,5 @@
       <li><a href="#">Schlüssel verwalten</a></li>
       <li><a href="#">Starten</a></li>
     </ul>
-  </nav>
\ No newline at end of file
+  </nav>
+  <main>
\ No newline at end of file