WhiteLayout + a bit views

.idea/workspace.xml

@@ -1,14 +1,21 @@
 <?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="Wrote the landing">
-      <change afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="TON Web page">
+      <change afterPath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/ton_right.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/ton_right.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/tondns.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/tondns.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/tonweb.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/tonweb.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/tonweb_duck.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/WhiteLayout.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/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/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.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" />
@@ -65,7 +72,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1670839492682</updated>
-      <workItem from="1670839496719" duration="7098000" />
+      <workItem from="1670839496719" duration="9645000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -74,7 +81,14 @@
       <option name="project" value="LOCAL" />
       <updated>1670844191164</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="TON Web page">
+      <created>1670847897936</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1670847897937</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -93,6 +107,7 @@
   </component>
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Wrote the landing" />
-    <option name="LAST_COMMIT_MESSAGE" value="Wrote the landing" />
+    <MESSAGE value="TON Web page" />
+    <option name="LAST_COMMIT_MESSAGE" value="TON Web page" />
   </component>
 </project>

src/assets/main.css

@@ -57,7 +57,12 @@ a,
     border-radius: 1rem;
 }
 
-.b > img {
+.b > img:first-child {
+    max-height: 1.4rem;
+    margin-right: 0.7rem;
+}
+
+.b > img:not(:first-child) {
     max-height: 1.4rem;
     margin-left: 2rem;
 }

src/components/WhiteLayout.vue

@@ -0,0 +1,58 @@
+<template>
+  <div style="width: 100vw">
+    <Header/>
+    <div class="header-logo">
+      <slot name="header"></slot>
+    </div>
+    <div>
+      <div class="rbox" style="width: 90%; min-height: 50vh">
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="buttons">
+      <slot name="buttons">
+        <router-link :to="next">
+          <!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right -->
+          <button class="b blue wide">
+            <span>{{nexttext}}</span>
+            <img src="@/assets/ton_right.svg" alt="Next"/>
+          </button>
+        </router-link>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "../components/Header.vue";
+
+export default {
+  name: "WhiteLayout",
+  components: {Header},
+  props: {
+    next: {
+      type: String
+    },
+    nexttext: {
+      type: String,
+      default: "Next"
+    }
+  }
+}
+</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>

src/router/index.ts

@@ -16,8 +16,13 @@ const router = createRouter({
     },
     {
       path: '/i-know',
-      name: 'i-know',
+      name: 'IKnow',
       component: () => import('../views/IKnow.vue')
+    },
+    {
+      path: '/tondns',
+      name: 'tondns',
+      component: () => import('../views/TonDns.vue')
     }
   ]
 })

src/views/IKnow.vue

@@ -1,10 +1,40 @@
 <template>
-  <div></div>
+  <WhiteLayout next="">
+    <template v-slot:header>
+      <img src="@/assets/i-know.svg" style="height: 100%" alt="TON DNS"/>
+    </template>
+    <template v-slot:content>
+      <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
+        <div>
+        </div>
+        <div>
+          <p>That's great!<br/>Maybe, you even have a domain already?</p>
+        </div>
+      </div>
+    </template>
+    <template v-slot:buttons>
+      <router-link to="tondns">
+        <button class="b blue wide">
+          <img src="@/assets/ton_top.svg" alt="Next"/>
+          <span>Yes</span>
+        </button>
+      </router-link>
+      <router-link to="tondns">
+        <button class="b blue wide">
+          <img src="@/assets/ton_bottom.svg" alt="Next"/>
+          <span>No</span>
+        </button>
+      </router-link>
+    </template>
+  </WhiteLayout>
 </template>
 
 <script>
+import WhiteLayout from "../components/WhiteLayout.vue";
+
 export default {
-  name: "IKnow"
+  name: "IKnow",
+  components: {WhiteLayout}
 }
 </script>
 

src/views/TonDns.vue

@@ -0,0 +1,39 @@
+<template>
+  <WhiteLayout>
+    <template v-slot:header>
+      <img src="@/assets/tondns.svg" style="height: 100%" alt="TON DNS"/>
+    </template>
+    <template v-slot:content>
+      <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
+        <div>
+        </div>
+        <div>
+          <p>TON domains — .ton and .t.me — are your names in the TON world.<br/>
+            They can be used to host a website or to transfer money.<br/>
+            You can host a TON website for your personal brand.</p>
+        </div>
+      </div>
+    </template>
+    <template v-slot:buttons>
+      <router-link to="/get_tondon">
+        <button class="b blue wide">
+          <span>Omg, can I get one?</span>
+          <img src="@/assets/ton_right.svg" alt="Next"/>
+        </button>
+      </router-link>
+    </template>
+  </WhiteLayout>
+</template>
+
+<script>
+import WhiteLayout from "../components/WhiteLayout.vue";
+
+export default {
+  name: "TonDns",
+  components: {WhiteLayout}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/TonWeb.vue

@@ -1,13 +1,10 @@
 <template>
-  <div style="width: 100vw">
-    <Header/>
-    <!-- Centered logo from @/assets/tonweb.svg -->
-    <div class="header-logo">
+  <WhiteLayout next="tondns" nexttext="Wow, what else?">
+    <template v-slot:header>
       <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">
+    </template>
+    <template v-slot:content>
+      <div class="columns-2" style="display: flex; columns: 2">
           <div>
             <img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
           </div>
@@ -17,8 +14,7 @@
             <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
+                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>
@@ -28,42 +24,19 @@
             </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>
+  </WhiteLayout>
 </template>
 
 <script>
-import Header from "../components/Header.vue";
+import WhiteLayout from "../components/WhiteLayout.vue";
 
 export default {
   name: "TonWeb",
-  components: {Header}
+  components: {WhiteLayout}
 }
 </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>