feat: implement hero

assets/styles/tailwind.css

@@ -14,28 +14,28 @@
   .title-h2 {
     @apply font-title text-5xl;
     font-weight: 600;
-    line-height: 1;
+    line-height: 1.5;
     color: #232323;
   }
 
 
   .title-h3 {
     @apply font-title text-5xl;
     font-weight: 600;
-    line-height: 1;
+    line-height: 1.5;
     color: #232323;
   }
 
   .title-h4 {
     @apply font-title text-2xl;
     font-weight: 600;
-    line-height: 1;
+    line-height: 1.5;
     color: #232323;
   }
 
   .text {
     @apply text-lg;
-    line-height: 1;
+    line-height: 1.5;
     color: #333;
   }
 

components/SocialLinks.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-screen grid gap-y-4 auto-rows-min content-center gap-y-md ml-sm-screen justify-items-end"
+    class="h-screen max-h-[900px] grid gap-y-4 auto-rows-min content-center gap-y-md justify-items-end"
   >
     <IconExternalLink :url="URLS.twitter" :icon="Twitter" />
     <IconExternalLink :url="URLS.telegram" :icon="Telegram" />

components/sections/HeroSection.vue

@@ -1,46 +1,52 @@
 <template>
-  <NuxtLayout name="section">
-    <div class="hero-container flex flex-col items-center">
-      <i18n-t keypath="hero.title.main" class="title-h1 text-center" tag="h1">
-        <span class="blue">{{ $t('hero.title.gradient') }}</span>
-      </i18n-t>
-
-      <h2 class="text text-center">{{ $t('hero.description') }}</h2>
-
-      <CustomButton :type="ButtonType.primary">
+  <NuxtLayout
+    name="section"
+    :height="'h-lg-y-screen sm:h-[max-content] max-h-[900px]'"
+  >
+    <div
+      class="h-full grid auto-rows-min content-center gap-y-lg justify-items-center relative"
+    >
+      <DottedBg
+        class="absolute z-0 h-2-md-y-screen max-h-[700px] overflow-hidden"
+      />
+      <Plus
+        class="absolute left-xl top-[450px] z-10 overflow-hidden sm:hidden"
+      />
+      <Zigzag
+        class="absolute left-xl bottom-xl z-10 overflow-hidden sm:hidden"
+      />
+      <SquareDots class="absolute left-xl top-xl z-10 sm:hidden" />
+      <Plus
+        class="absolute right-xl top-[300px] z-10 overflow-hidden sm:hidden"
+      />
+      <Zigzag
+        class="absolute right-xl top-xl z-10 overflow-hidden rotate-90 sm:hidden"
+      />
+      <SquareDots class="absolute right-xl bottom-xl z-10 sm:hidden" />
+      <div class="grid auto-rows-min gap-y-lg max-w-c-3xl z-20">
+        <i18n-t keypath="hero.title.main" class="title-h1 text-center" tag="h1">
+          <span class="blue">{{ $t('hero.title.gradient') }}</span>
+        </i18n-t>
+
+        <h2 class="text text-center">{{ $t('hero.description') }}</h2>
+      </div>
+
+      <CustomButton :type="ButtonType.primary" class="z-20">
         {{ $t('hero.action') }}
       </CustomButton>
 
-      <ArrowDownIcon class="m-xl" />
+      <ArrowDownIcon class="m-xl z-20" />
     </div>
   </NuxtLayout>
 </template>
 
 <script setup>
 import { ButtonType } from '@/types'
-
 import ArrowDownIcon from '@/assets/svg/arrow_down.svg?component'
+import DottedBg from '@/assets/svg/dotted_background.svg?component'
+import Plus from '@/assets/svg/plus.svg?component'
+import Zigzag from '@/assets/svg/zigzag.svg?component'
+import SquareDots from '@/assets/svg/square-dots.svg?component'
 </script>
 
-<style scoped lang="scss">
-.title-h1 {
-  max-width: 550px;
-  margin-bottom: 32px;
-}
-
-.text {
-  max-width: 550px;
-  margin-bottom: 48px;
-}
-
-.hero-container {
-  background-image: url('/assets/svg/dotted_background.svg');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.blue {
-  color: $blue;
-}
-</style>
+<style scoped lang="scss"></style>

layouts/default.vue

@@ -15,16 +15,16 @@
           </InnerLink>
         </template>
       </TopBar>
+      <SocialLinks class="fixed sm:hidden" />
     </NuxtLayout>
-    <SocialLinks class="fixed" />
     <!-- <Compoennt /> -->
     <!-- <client-only>
       <ThemeSwitch class="theme-switch" />
     </client-only> -->
     <div class="grid grid-auto mt-16">
       <slot></slot>
     </div>
-    <FooterSection />
+    <!-- <FooterSection /> -->
   </div>
 </template>
 

layouts/section.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="fullBackground ? 'wide-section' : 'section'">
+  <div :class="fullBackground ? `wide-section ${height}` : `section ${height}`">
     <div
       v-if="fullBackground"
       class="section"
@@ -22,13 +22,17 @@ export default {
       type: String,
       default: '',
     },
+    height: {
+      type: String,
+      default: null,
+    },
   },
 }
 </script>
 
 <style scoped>
 .section {
-  padding: 48px 32px;
+  padding: 48px;
   margin: 0 auto;
   max-width: 1100px;
   width: 100%;
@@ -38,7 +42,7 @@ export default {
   width: 100%;
 }
 
-@media (max-width: 300px) {
+@media (max-width: 350px) {
   .section {
     padding: 32px 16px;
   }

pages/index.vue

@@ -1,23 +1,17 @@
 <template>
-  <div class="grid grid-flow-row">
+  <div class="grid grid-flow-row overflow-hidden">
     <HeroSection />
-    <!-- TODO: add banner -->
-    <!-- <Banner color="blue"/> -->
-    <WhatIsWitnetSection class="py-16" />
+    <!-- <WhatIsWitnetSection class="py-16" />
     <CoinSection class="py-16"/>
-    <!-- <Banner color="black"/> -->
     <BuildSection class="py-16" />
-    <!-- <Banner color="blue"/> -->
     <ExploreSection class="py-16" />
-    <!-- <Banner color="blue" class="mb-xl"/> -->
     <Tutorials class="py-16" />
-    <Newsletter class="py-16"/>
+    <Newsletter class="py-16"/> -->
   </div>
 </template>
 
 <style scoped>
 .py-16 {
   padding: 96px 0;
 }
-
-</style>
+</style>

tailwind.config.js

@@ -102,10 +102,18 @@ export default {
       lg: '32px',
       xl: '40px',
       '2xl': '140px',
-      'sm-screen': '15vw',
-      'md-screen': '50vw',
-      'lg-screen': '90vw',
-      'xl-screen': '100vw',
+      'c-3xl': '550px',
+      'c-4xl': '900px',
+      'sm-x-screen': '15vw',
+      'md-x-screen': '50vw',
+      '2-md-x-screen': '70vw',
+      'lg-x-screen': '90vw',
+      'xl-x-screen': '100vw',
+      'sm-y-screen': '15vh',
+      'md-y-screen': '50vh',
+      '2-md-y-screen': '70vh',
+      'lg-y-screen': '90vh',
+      'xl-y-screen': '100vh',
     },
     opacity: {
       0: '0',