update example

Signed-off-by: George Lemon <[email protected]>

example/templates/layouts/base.timl

@@ -4,11 +4,20 @@ html
     meta name="viewport" content="width=device-width, initial-scale=1"
     title: "Tim Engine is Awesome"
     link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    link rel="preconnect" href="https://fonts.googleapis.com"
+    link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""
+    link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet"
     style: "
   body {
     background-color: #212121;
     color: whitesmoke
   }
+
+  body, h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6{
+    font-family: 'Inter', sans-serif;
+  }
+
   .btn-primary {
     --bs-btn-color: #fff;
     --bs-btn-bg: #ea4444;

example/templates/partials/btn.timl

@@ -5,4 +5,4 @@ a.btn.btn-primary.btn-lg.rounded-pill.px-4.py-2 href="https://github.com/openpee
             19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65
             5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5
             3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-  span.fw-bold.ms-2: "Check it on GitHub"
+  span.fw-bold.ms-2: "Check it on GitHub"

example/templates/views/index.timl

@@ -1,22 +1,28 @@
-section > div.container > div.row.vh-100.align-items-center > div#content-zone.col-lg-7.mx-auto
+section.pt-5 > div.container > div.row > div#content-zone.col-lg-7.mx-auto
   div.text-center > img src="https://raw.githubusercontent.com/openpeeps/tim/main/.github/timengine.png" alt="Tim Engine" width="200px"
   h1.display-4.fw-bold:
     "This is Tim 👋 A super fast template engine for cool kids!"
   p.mb-4.h4.fw-normal.px-4 style="line-height: 1.8em":
-    "Build sleek, dynamic websites and apps in a breeze with Tim Engine's intuitive
-    syntax and powerful features. It's the template engine that keeps up with your creativity."
-  div.text-center
-    div.my-3
+    "Build sleek, dynamic websites and apps in a breeze with Tim Engine's intuitive syntax and powerful features. It's the template engine that keeps up with your creativity."
+  div.row > div.col-12.text-center
+    div.my-3#clickable
       @include "btn"
-    div 
-      p.mb-0: "Made by Humans from OpenPeeps"
-      p: "© " & $app.year & " Open Source | LGPLv3 License"
+  div.text-center 
+    p.mb-0: "© " & $app.year & " — Made by Humans from OpenPeeps"
+    p: "Open Source | LGPL-3.0 license"
 
-@client target="#content-zone"
+@client target="#clickable"
+  // transpile tim code to javascript for client-side rendering
+  div.mt-3 > a.text-secondary.text-decoration-none href="https://hetzner.cloud/?ref=Hm0mYGM9NxZ4"
+    small
+      span: "👉 Create a VPS using our link and 👇 "
+      br
+      span: "Get €20 in cloud credits from Hetzner"
 @end
 
 @js
-  const watchout = new WebSocket('ws://127.0.0.1:6502/ws');
-  var lastTimeModified = localStorage.getItem('watchout') || 0
-  watchout.addEventListener('message', () => location.reload())
+  {
+    const watchout = new WebSocket('ws://127.0.0.1:6502/ws');
+    watchout.addEventListener('message', () => location.reload());
+  }
 @end