Change landing page design. Use Inter as display font

static/index.html

@@ -13,10 +13,7 @@
     <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=Fira+Sans:wght@400;500;600;700;800;900&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&family=Inter:ital,wght@0,400;1,700&display=swap"
-        rel="stylesheet">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Josefin+Sans:ital,wght@0,400;1,700&display=swap"
         rel="stylesheet">
 </head>
 
@@ -29,20 +26,40 @@
         </div>
     </nav>
 
-    <div class="container mx-auto py-16 grid grid-cols-2 gap-4 px-10">
+    <div class="container mx-auto py-16 grid grid-cols-[5fr_4fr] gap-4 px-10">
-        <div class="pl-10">
+        <div class="pl-10 table">
-            <h1 class="font-display font-bold text-[5rem] leading-tight">
+            <div class="table-cell align-middle">
-                Typed
+                <h1 class="font-display font-bold text-5xl leading-tight">
+                    A modern, type safe,
+                    <br>
+                    secure language
+                    <br>
+                    compiled to PHP
+                </h1>
+                <p class="font-display text-c-text opacity-80 text-xl pt-6 pr-12">
+                    Inspired by Rust, Zig and Swift, THP has a modern syntax, semantics,
+                    type system and stdlib.
+                </p>
                 <br>
-                Hypertext
                 <br>
-                Processor
+                <div class="text-center">
-            </h1>
+                    <a 
-            <p class="font-display text-c-text opacity-60 text-xl pt-4">
+            class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors
-                Syntax, stdlib and types for PHP
+                hover:text-c-bg py-3 px-8 mx-6 rounded"
-                <br>
+            href="/learn/"
-                Written in Rust
+        >
-            </p>
+            Learn
+        </a>
+
+        <a 
+            class="inline-block font-display text-lg border-2 border-sky-400 py-3 px-8 mx-6 rounded
+                transition-colors hover:text-black hover:bg-sky-400" 
+            href="/install/"
+        >
+            Install
+        </a>
+                </div>
+            </div>
         </div>
 
         <div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative">
@@ -61,42 +78,31 @@
             <div class="h-1"></div>
             <pre style="padding: 0 !important; border: none !important;">
                 <code class="language-thp">
-                    fun find_person(Str person_id) -> Result[Str] {
+                    // Actual generics & sum types
-                        val person_id = try person_id.parse[Int]()
+                    fun find_person(Int person_id) -> Result[String, String] {
+                        // Easy, explicit error bubbling
                         try Person::find_by_id(person_id)
                     }
 
-                    val id = POST::get("person_id") ?: die
+                    val id = POST::get("person_id") ?? exit("Null person_id")
-                    val person = find_person(person_id: id) ?: die
+                    // Errors as values
+                    val person = try find_person(person_id: id) with error {
+                        eprint("Error: {error}")
+                        exit("Person not found")
+                    }
 
+                    // First class HTML-like templates & components
                     print(
                         &lt;a href="/person/reports/{person.id}"&gt;
-                            Hello {person.name}
+                            welcome, {person.name}
                         &lt;/a&gt;
                     )
+                    // And more!
                 </code>
             </pre>
         </div>
     </div>
 
-    <div class="max-w-[70rem] mx-auto text-center">
-        <a 
-            class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors
-                hover:text-c-bg py-3 px-8 mx-6 rounded"
-            href="/learn/"
-        >
-            Learn
-        </a>
-
-        <a 
-            class="inline-block font-display text-lg border-2 border-sky-400 py-3 px-8 mx-6 rounded
-                transition-colors hover:text-black hover:bg-sky-400" 
-            href="/install/"
-        >
-            Install
-        </a>
-    </div>
-
     <script src="/js/prism.min.js"></script>
     <script src="/js/prism.thp.js"></script>
 </body>

static/template.html

@@ -14,10 +14,7 @@
     <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=Fira+Sans:wght@400;500;600;700;800;900&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&family=Inter:ital,wght@0,400;1,700&display=swap"
-        rel="stylesheet">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Josefin+Sans:ital,wght@0,400;1,700&display=swap"
         rel="stylesheet">
 </head>
 

tailwind.config.js

@@ -18,7 +18,7 @@ module.exports = {
         },
         fontFamily: {
             "mono": ["'Fira Code'", "Inconsolata", "Iosevka", "monospace"],
-            "display": ["'Josefin Sans'", "'Fugaz One'", "sans-serif"],
+            "display": ["Inter", "'Josefin Sans'", "'Fugaz One'", "sans-serif"],
             "body": ["'Fira Sans'", "Inter", "sans-serif"],
         },
     },

tailwind.css

@@ -31,7 +31,7 @@
 }
 
 html {
-    font-size: 18px;
+    font-size: 17px;
 }
 
 body {
@@ -39,7 +39,7 @@ body {
 }
 
 pre, code {
-    font-family: 'Fira Code', Inconsolata, monospace;
+    font-family: Iosevka, 'Fira Code', monospace;
 }
 
 .button-effect-receiver {