Create the main section of landing page.

assets/logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="960" height="200" viewBox="0 0 960 200">
+<svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" viewBox="0 0 280 200">
   <defs>
     <linearGradient id="neongrad" x1="140" y1="37" x2="140" y2="163" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#00CCAA"></stop>

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "compression": "^1.8.1",
         "express": "^5.2.1",
-        "neovan": "^0.1.1"
+        "neovan": "^0.1.2"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1178,9 +1178,9 @@
       }
     },
     "node_modules/neovan": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/neovan/-/neovan-0.1.1.tgz",
-      "integrity": "sha512-xLPxsdplJDIOT+Pl5ZGLa52O03sPKqbrOUYkYzHDXW7UpAVaaiPZsvzv5ETvnQpfVpoz/RdtCteSoJOhxrD1ng==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/neovan/-/neovan-0.1.2.tgz",
+      "integrity": "sha512-rBGy4YbYyl+04sHYtAYvJx3jG0kgbdh50p5589M2QtmEKRzOO2LWL0eWytUvrJibP+7Li57Hr79nsCulWDUB1g==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.3",

package.json

@@ -17,6 +17,6 @@
   "dependencies": {
     "compression": "^1.8.1",
     "express": "^5.2.1",
-    "neovan": "^0.1.1"
+    "neovan": "^0.1.2"
   }
 }

routes/above_the_fold.neovan

@@ -0,0 +1,69 @@
+<@script>
+    const rand = (min, max)=>{
+        return (Math.random() * (max - min + 1)) + min;
+    }
+
+    const linkContainer = document.querySelector(".links");
+    const links = document.querySelectorAll(".links a");
+
+    for(let i = 0; i < links.length; i++){
+        links[i].style.top = `${rand(100, linkContainer.offsetHeight-100)}px`;
+        links[i].style.left = `${rand(100, linkContainer.offsetWidth-100)}px`;
+        links[i].style.transform = `rotate(${rand(-55, 55)}deg)`;
+    }
+<@/script>
+
+<@html>
+    <div class="aboveTheFold">
+        <div class="menu">
+            <img class="menuLogo" src="/assets/logo.svg" alt="NeoVan Logo"> |
+            <a href="#why">Why?</a> |
+            <a href="/docs">Docs</a> |
+        </div>
+
+        <@ ./components/rotating_logo.neovan @>
+
+        <h2>An anti-framework for building the front-end with plain HTML/CSS/JavaScript</h2>
+    </div>
+<@/html>
+
+<@style>
+    .aboveTheFold{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        height: 100vh;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    h2{
+        text-align: center;
+        margin: 15px;
+    }
+
+    .menu{
+        display: flex;
+        align-items: center;
+        height: 55px;
+        width: 100%;
+        box-shadow: 0 4px 8px white;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .menuLogo{
+        max-height: 100%;
+    }
+
+    .menu a{
+        font-size: 25px;
+        margin: 0 15px;
+        color: white;
+        max-height: 100%;
+        text-decoration: none;
+    }
+<@/style>

routes/components/rotating_logo.neovan

@@ -0,0 +1,37 @@
+<@html>
+    <div id="rotatingLogo">
+        <img class="rotateable" src="/assets/logo.svg" alt="NeoVan logo">
+        <img class="textLogo" src="/assets/logo_text.svg" alt="NeoVan logo text">
+    </div>
+<@/html>
+
+<@style>
+    #rotatingLogo{
+        display: flex;
+        max-width: 100%;
+    }
+
+    .rotateable{
+        max-width: 250px;
+    }
+
+    .textLogo{
+        max-width: 100%;
+    }
+
+    .rotateable{
+        animation: rotate 3600s linear infinite;
+    }
+
+    @keyframes rotate{
+        from{transform: rotate(0deg);}
+        to{transform: rotate(360deg);}
+    }
+
+    @media screen and (max-width: 800px){
+        #rotatingLogo{
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+<@/style>

routes/index.neovan

@@ -5,16 +5,19 @@
             <meta charset="utf-8">
             <title>NeoVan</title>
             <link rel="icon" href="/assets/favicon.png" type="image/png">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
         </head>
         <body>
-            <img src="/assets/logo_2.svg" alt="NeoVan logo">
-            <img src="/assets/logo_text.svg" atl="NeoVan logo">
+            <@ ./above_the_fold.neovan @>
         </body>
     </html>
 <@/html>
 
 <@style>
+    *{padding:0;margin:0;box-sizing:border-box;}
+
     body{
-        background: #0a1111;
+        background: black;
+        color: #00ccaa;
     }
 <@/style>