Implement hero and socials

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLayout>
+  <NuxtLayout name="default">
     <NuxtPage />
   </NuxtLayout>
 </template>

assets/styles/main.scss

@@ -5,6 +5,6 @@ html {
   height: 100%;
   margin: 0;
   padding: 0;
-  color: $white;
-  background-color: $black;
+  // color: $white;
+  // background-color: $black;
 }

assets/styles/tailwind.css

@@ -5,11 +5,44 @@
 @layer components {
   /* Titles */
   .title-h1 {
-    @apply font-title text-4xl;
+    @apply font-title text-7xl;
+    font-weight: 600;
+    /* line-height: 1; */
+    line-height: 0.9;
+    color: #232323;
   }
   .title-h2 {
+    @apply font-title text-5xl;
+    font-weight: 600;
+    line-height: 1.5;
+    color: #232323;
+  }
+
+
+  .title-h3 {
+    @apply font-title text-5xl;
+    font-weight: 600;
+    line-height: 1.5;
+    color: #232323;
+  }
+
+  .title-h4 {
     @apply font-title text-2xl;
+    font-weight: 600;
+    line-height: 1.5;
+    color: #232323;
+  }
+
+  .text {
+    @apply text-lg;
+    line-height: 1.5;
+    color: #333;
+  }
+
+  .subtitle {
+    @apply text-sm text-white-300;
   }
+
   /* Button */
   .btn {
     @apply w-full py-sm px-md cursor-pointer;
@@ -28,6 +61,7 @@
     @apply bg-black-950;
   }
   .nav-link {
-    @apply text-white-50 hover:text-gray-500;
+    @apply text-black-950 hover:text-gray-500;
+    background: white;
   }
 }