Merge pull request #252 from woltapp/privacy-please

Privacy please
woltapp · May 21, 2024 · 712a47f · 712a47f
2 parents 0a1f978 + 2de102d
commit 712a47f
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 40 deletions.
diff --git a/Website/package-lock.json b/Website/package-lock.json
diff --git a/Website/src/index.ejs b/Website/src/index.ejs
@@ -7,15 +7,27 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no"
     />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <meta property="og:title" content="BlurHash">
-    <meta property="og:description" content="BlurHash is a compact representation of a placeholder for an image.">
-    <meta property="og:image" content="https://blurha.sh/<%=require('../../Media/WhyBlurhash.png')%>">
-    <meta property="og:url" content="https://blurha.sh">
-    <meta property="og:type" content="website">
-    <meta name="twitter:title" content="BlurHash is a compact representation of a placeholder for an image.">
-    <meta name="twitter:image" content="https://blurha.sh/<%=require('../../Media/WhyBlurhash.png')%>">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta dname="twitter:site" content="@woltapp">
+    <meta property="og:title" content="BlurHash" />
+    <meta
+      property="og:description"
+      content="BlurHash is a compact representation of a placeholder for an image."
+    />
+    <meta
+      property="og:image"
+      content="https://blurha.sh/<%=require('../../Media/WhyBlurhash.png')%>"
+    />
+    <meta property="og:url" content="https://blurha.sh" />
+    <meta property="og:type" content="website" />
+    <meta
+      name="twitter:title"
+      content="BlurHash is a compact representation of a placeholder for an image."
+    />
+    <meta
+      name="twitter:image"
+      content="https://blurha.sh/<%=require('../../Media/WhyBlurhash.png')%>"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta dname="twitter:site" content="@woltapp" />
   </head>
   <body id="fullpage">
     <div class="hero section">
@@ -45,16 +57,15 @@
         <img class="logo" src="<%=require('../assets/svg/wolt-logo.svg')%>" />
       </header>
       <div class="content">
-        <h1 class="title">
-          BlurHash
-        </h1>
+        <h1 class="title">BlurHash</h1>
         <p class="description">
           BlurHash is a compact representation of a placeholder for an image.
         </p>
-        <button class="button" id="get-started">
-          Get started
-        </button>
-        <a class="link" href="https://wolt.com/blog/hq/2019/07/01/how-we-came-to-create-a-new-image-placeholder-algorithm-blurhash/">
+        <button class="button" id="get-started">Get started</button>
+        <a
+          class="link"
+          href="https://wolt.com/blog/hq/2019/07/01/how-we-came-to-create-a-new-image-placeholder-algorithm-blurhash/"
+        >
           More on our blog
         </a>
       </div>
@@ -71,10 +82,10 @@
         </p>
         <h3>BlurHash to the rescue!</h3>
         <p>
-            Replace boring grey boxes with beautiful blurhash states and the designers will be happy.
-            Blurhash strings are short enough to be added as a field in a JSON object and to be stored
-            in a database. The implementations are small and easy to port to new languages, and the end
-            result is a smooth and interesting experience for your users.
+          Replace boring grey boxes with beautiful blurhash states and the designers will be happy.
+          Blurhash strings are short enough to be added as a field in a JSON object and to be stored
+          in a database. The implementations are small and easy to port to new languages, and the
+          end result is a smooth and interesting experience for your users.
         </p>
       </div>
     </div>
@@ -110,12 +121,8 @@
             </label>
             <canvas id="original-canvas"></canvas>
           </div>
-          <p class="explain">
-            Pick image or upload your own
-          </p>
-          <label for="file-upload" class="button">
-            Upload
-          </label>
+          <p class="explain">Pick image or upload your own</p>
+          <label for="file-upload" class="button"> Upload </label>
           <input id="file-upload" type="file" accept="image/*" />
           <div class="dimension">
             Components
@@ -130,22 +137,19 @@
           <div class="demo-blurhash">
             <span id="demo-blurhash" contenteditable="true"></span>
           </div>
-          <p class="explain">
-            BlurHash string
-          </p>
+          <p class="explain">BlurHash string</p>
           <p class="explain-small">
-            The blurhash algorithm encodes your image into the short string above, ready to save in a database
+            The blurhash algorithm encodes your image into the short string above, ready to save in
+            a database
           </p>
         </div>
         <div class="part">
           <canvas id="demo-canvas" width="32" height="32"></canvas>
-          <p class="explain">
-            Result
-          </p>
+          <p class="explain">Result</p>
           <p class="explain-small">
-              The blurhash string is decoded into a small image that is rendered on to a canvas.
-            </p>
-          </div>
+            The blurhash string is decoded into a small image that is rendered on to a canvas.
+          </p>
+        </div>
       </div>
     </div>
     <div class="section get-started">
@@ -154,9 +158,14 @@
         The same exported data can be used on all platforms. Get the BlurHash library for your
         platform of choice.
       </p>
-      <a class="white-button" href="https://github.com/woltapp/blurhash">
-        More on GitHub
-      </a>
+      <a class="white-button" href="https://github.com/woltapp/blurhash"> More on GitHub </a>
     </div>
+    <footer>
+      <a href="https://explore.wolt.com/contact">Contact</a>
+      <a href="https://explore.wolt.com/accessibility-statement">Accessibility Statement</a>
+      <a href="https://explore.wolt.com/terms">User Terms of Service</a>
+      <a href="https://explore.wolt.com/privacy">Privacy Statement</a>
+      <p>© Wolt 2014-2024</p>
+    </footer>
   </body>
 </html>
diff --git a/Website/src/index.scss b/Website/src/index.scss
@@ -490,3 +490,22 @@ h2 {
     text-decoration: none;
   }
 }
+
+footer {
+  background-color: $wolt-black;
+  height: 80px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  a {
+    color: $offwhite;
+    text-decoration: none;
+  }
+
+  p {
+    color: $text-grey;
+  }
+}
diff --git a/Website/src/styles/variables.scss b/Website/src/styles/variables.scss
@@ -12,6 +12,7 @@ $wolt-blue: #0065aa;
 $wolt-blue-light: #4a90e2;
 $wolt-blue-lighter: rgba(74, 144, 226, 0.5);
 $wolt-blue-gradient: linear-gradient(-180deg, #0077c8 0%, #0065aa 100%);
+$wolt-black: #141414;
 
 // Text
 $offwhite: #eff1f3;