Adding basic landing page, reorganize and specification, get deca buttons to be responsive

_includes/css/page.css

@@ -13,6 +13,14 @@
   text-wrap: balance;
 }
 
+.page-title-landing {
+  font: var(--font-display);
+  letter-spacing: var(--font-display-spacing);
+  text-align: center;
+  margin: 0;
+  text-wrap: balance;
+}
+
 .page-navigation {
   margin-bottom: var(--row-gap-medium);
 
@@ -36,3 +44,74 @@
   border-top: solid 1px var(--color-line);
   margin-top: var(--row-gap-medium);
 }
+
+.container {
+    text-align: center;
+    list-style: none;
+    padding: 0;
+}
+
+.main-button-group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px; /* Space between the main button and the right button */
+    flex-wrap: wrap; /* Allow wrapping if screen space is limited */
+    padding: 10px; /* Some padding to avoid touching screen edges */
+    position: relative;
+}
+
+.main-button, .specification-button {
+    background-color: inherit;
+    color: inherit;
+    padding: 15px 30px;
+    border-radius: 50px;
+    font-size: 24px;
+    text-decoration: none;
+    border-style: double;
+    position: relative;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px var(--color-link-hover, rgba(0, 0, 0, 0.2));
+}
+
+.main-button:hover, .main-button:focus,
+.specification-button:hover, .specification-button:focus {
+    color: var(--color-link-hover);
+    border-style: solid;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px var(--color-link-hover, rgba(0, 0, 0, 0.4));
+}
+
+.hover-buttons {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-top: 10px;
+}
+
+.main-button:hover .hover-buttons,
+.main-button:focus .hover-buttons {
+    display: block;
+}
+
+.specification-button {
+    margin: 5px 0;
+}
+
+.secondary-button {
+    display: block;
+    margin: 5px 0;
+    padding: 10px 20px;
+    background-color: inherit;
+    color: inherit;
+    border-radius: 20px;
+    text-decoration: none;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.secondary-button:hover, .secondary-button:focus {
+    border-style: solid;
+    transform: translateY(-2px);
+}

index.vto

@@ -5,40 +5,24 @@ title: Home
 ---
 
 <header class="page-header">
-  <h1 class="page-title">{{ home.welcome }}</h1>
+  <h1 class="page-title-landing">{{ home.welcome }}</h1>
-
-  <div class="search" id="search"></div>
 </header>
 
-<section class="postList">
+<section class="container">
-  {{ for post of search.pages("type=post", "date=desc", 3) }}
+        <div class="main-button-group">
-  <article class="post">
+            <a href="https://docs.google.com/presentation/d/1H4V5X0X-9jnulwmmQBKk7PiStqKoPh_t_h7F0R3kLw0/edit?usp=sharing" target="_blank" class="specification-button">Specification</a>
-    <header class="post-header">
+            <div class="main-button">
-      <h2 class="post-title">
+                Get Deca
-        <a href="{{ post.url }}" {{ if post.url == url }} aria-current="page"{{ /if }}>
+                <div class="hover-buttons">
-          {{ post.title || post.url }}
+                    <a href="https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x3556a5005d5411603e0115efd9b875fdfb3ad7e9&chain=mainnet" target="_blank" class="secondary-button">Mainnet</a>
-        </a>
+                    <a href="https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x02f1cb850799d651d56775dae04f66362eb8e4b2&chain=arbitrum" target="_blank" class="secondary-button">Arbitrum</a>
-      </h2>
+                </div>
-
+            </div>
-      {{ include "templates/post-details.vto" {
+        </div>
-        date: post.date,
-        tags: post.tags,
-        author: post.author,
-        readingInfo: post.readingInfo
-        } }}
-    </header>
-
-    <div class="post-excerpt body">
-      {{ post.excerpt |> md }}
-    </div>
-
-    <a href="{{ post.url }}" class="post-link">
-      {{ i18n.nav.continue_reading }}
-    </a>
-  </article>
-{{ /for }}
 </section>
-
+<br>
+<br>
+<br>
 <hr>
 
 <p>{{ i18n.nav.archive }}</p>

pages/blog.vto

@@ -0,0 +1,48 @@
+---
+layout: layouts/base.vto
+bodyClass: body-home
+title: Blog
+url: /blog/
+menu:
+  visible: true
+  order: 2
+---
+
+<header class="page-header">
+  <h1 class="page-title">{{ home.welcome }}</h1>
+  <div class="search" id="search"></div>
+</header>
+
+
+<section class="postList">
+  {{ for post of search.pages("type=post", "date=desc", 3) }}
+  <article class="post">
+    <header class="post-header">
+      <h2 class="post-title">
+        <a href="{{ post.url }}" {{ if post.url == url }} aria-current="page"{{ /if }}>
+          {{ post.title || post.url }}
+        </a>
+      </h2>
+
+      {{ include "templates/post-details.vto" {
+        date: post.date,
+        tags: post.tags,
+        author: post.author,
+        readingInfo: post.readingInfo
+        } }}
+    </header>
+
+    <div class="post-excerpt body">
+      {{ post.excerpt |> md }}
+    </div>
+
+    <a href="{{ post.url }}" class="post-link">
+      {{ i18n.nav.continue_reading }}
+    </a>
+  </article>
+{{ /for }}
+</section>
+
+<hr>
+
+<p>{{ i18n.nav.archive }}</p>

pages/faq.md

@@ -4,7 +4,7 @@ title: FAQs
 url: /faq/
 menu:
   visible: true
-  order: 2
+  order: 3
 ---
 
 ## What is DECA Token?