TON Web page

.idea/workspace.xml

@@ -1,16 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Wrote the landing">
-      <change afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/assets/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/logo.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/TheWelcome.vue" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Landing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Landing.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -66,8 +65,16 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1670839492682</updated>
-      <workItem from="1670839496719" duration="3412000" />
+      <workItem from="1670839496719" duration="7098000" />
     </task>
+    <task id="LOCAL-00001" summary="Wrote the landing">
+      <created>1670844191163</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1670844191164</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -84,4 +91,8 @@
       </map>
     </option>
   </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="Wrote the landing" />
+    <option name="LAST_COMMIT_MESSAGE" value="Wrote the landing" />
+  </component>
 </project>

src/assets/main.css

@@ -14,12 +14,6 @@ a,
     transition: 0.4s;
 }
 
-@media (hover: hover) {
-    a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
-    }
-}
-
 @media (min-width: 1024px) {
     body {
         display: flex;
@@ -33,10 +27,8 @@ a,
     }
 }
 
-.bwhite {
+.b {
-    background-color: white;
+    border: 2px solid transparent;
-    color: #282e46;
-    border: none;
     border-radius: 5px;
     padding: 16px 32px;
     text-align: center;
@@ -48,7 +40,47 @@ a,
     font-weight: bold;
 }
 
-.wide.bwhite {
+.b.white {
+    background-color: white;
+    color: #282e46;
+}
+
+.b.white:hover {
+    background-color: #282e46;
+    color: white;
+    border: 2px solid white;
+}
+
+.b.blue {
+    background-color: #0088cc;
+    color: white;
+    border-radius: 1rem;
+}
+
+.b > img {
+    max-height: 1.4rem;
+    margin-left: 2rem;
+}
+
+.wide.b {
     min-width: 16rem;
     margin: 0.5rem;
 }
+
+/* A #edeef1 box with rounded corners with black content color and content centered vertically and horizontally */
+.rbox {
+    background-color: #edeef1;
+    border-radius: 2rem;
+    padding: 2.5rem 32px;
+    text-align: center;
+    display: inline-block;
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: #282e46;
+    min-width: 16rem;
+    margin: 0.5rem 3rem;
+}
+
+.rbox > p:not(:first-child) {
+    margin-top: 1rem;
+}

src/components/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <header>
     <div class="wrapper">
-      <img class="logo" src="@/assets/logo.png" alt="Agorata" />
+      <router-link to="/"><img class="logo" src="@/assets/logo.png" alt="Agorata" /></router-link>
       <nav>
 <!--        <router-link to="/">Home</router-link>-->
 <!--        <router-link to="/about">About</router-link>-->
@@ -22,11 +22,12 @@ header {
   line-height: 1.5;
   max-height: 10rem;
   padding-left: 1rem;
+  padding-top: 1rem;
 }
 .logo {
   display: block;
   margin: 0 auto 2rem;
-  max-width: 17rem;
+  width: 17rem;
 }
 
 nav {

src/router/index.ts

@@ -13,6 +13,11 @@ const router = createRouter({
       path: '/tonweb',
       name: 'tonweb',
       component: () => import('../views/TonWeb.vue')
+    },
+    {
+      path: '/i-know',
+      name: 'i-know',
+      component: () => import('../views/IKnow.vue')
     }
   ]
 })

src/views/IKnow.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "IKnow"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Landing.vue

@@ -10,11 +10,11 @@
     <div id="do-you-know">
       <p>Do you know what TON Web is?</p><br/>
       <router-link to="/i-know">
-        <button class="bwhite wide">Yes</button>
+        <button class="b white wide">Yes</button>
       </router-link>
       <br/>
       <router-link to="/tonweb">
-        <button class="bwhite wide">No</button>
+        <button class="b white wide">No</button>
       </router-link>
     </div>
   </main>

src/views/TonWeb.vue

@@ -1,9 +1,51 @@
 <template>
-  <Header/>
+  <div style="width: 100vw">
+    <Header/>
+    <!-- Centered logo from @/assets/tonweb.svg -->
+    <div class="header-logo">
+      <img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/>
+    </div>
+    <div>
+      <div class="rbox" style="width: 90%">
+        <div class="columns-2" style="display: flex; columns: 2">
+          <div>
+            <img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
+          </div>
+          <div>
+            <p>TON Sites are just websites hosted on the TON Network.<br/>
+              After some configuration, you can visit a website like foundation.ton.</p>
+            <p>They have a lot of advantages:</p>
+            <ul style="text-align: left; padding: 0 5rem; font-size: 1.4rem">
+              <li> The DApps are truly D: they cannot be banned or pressured, the servers cannot be traced, the apps
+                don't
+                get the user's IP
+              </li>
+              <li> There can be no censorship</li>
+              <li> Validity of websites is determined on the blockchain instead of trusting authorities for SSL</li>
+              <li> Domain ownership has clear rules on TON, there is no central authority, no registrators</li>
+              <li> The TON Web is nicely integrated with the TON blockchain</li>
+              <li> There is no need for logins and passwords — you just use your TON account</li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="buttons">
+      <router-link to="/tondns">
+        <!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right -->
+        <button class="b blue wide">
+          <span>Next</span>
+          <img src="@/assets/ton_right.svg" alt="Next"/>
+        </button>
+      </router-link>
+    </div>
+  </div>
 </template>
 
 <script>
 import Header from "../components/Header.vue";
+
 export default {
   name: "TonWeb",
   components: {Header}
@@ -11,5 +53,17 @@ export default {
 </script>
 
 <style scoped>
+.header-logo {
+  display: block;
+  text-align: center;
+  justify-content: center;
+  height: 4rem;
+  margin: 0 auto 1.5rem;
+}
 
+.buttons {
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+}
 </style>