Landing page

app.vue

@@ -1,15 +1,7 @@
 <template>
-  <main class="bg-adn-background grid grid-rows-1 grid-cols-4 gap-1 min-h-screen">
+  <main class="bg-adn-background">
     <NuxtLayout>
-      <!-- Navigation sidebar -->
-      <Navbar class="col-start-1 col-end-1" />
-
-      <!-- Page content -->
-      <div class="col-start-2 col-span-3 overflow-scroll m-4">
-        <div class="p-6 border-adn-border border-2 bg-adn-white rounded-lg">
-          <NuxtPage/>
-        </div>
-      </div>
+      <NuxtPage/>
     </NuxtLayout>
   </main>
 </template>

assets/css/tailwind.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  h1 {
+    @apply text-5xl;
+  }
+  h2 {
+    @apply text-3xl;
+  }
+  p {
+    @apply my-2;
+  }
+}

components/LandingButton.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ArrowRightIcon } from '@heroicons/vue/24/outline'
+</script>
+
+<template>
+  <div class="rounded-full flex flex-row justify-between
+    items-center group border-2 px-6 py-4 cursor-pointer w-fit"
+    :class="parentClasses">
+    <slot></slot>
+
+    <!-- Arrow icon -->
+    <ArrowRightIcon class="ml-4 h-6 w-6 group-hover:ml-6
+      transition-all" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LandingButton',
+  props: {
+    parentClasses: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>

components/LandingContainer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex justify-center items-center w-full"
+    :class="parentClasses">
+    <div class="max-w-7xl w-full mx-6">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LandingContainer',
+  props: {
+    parentClasses: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>

components/Navbar.vue

@@ -66,7 +66,7 @@ const onHomeTabClick = () => {
         <!-- Tabs -->
         <Tab
           tab-id="homeTab"
-          :active="route.path === '/'"
+          :active="route.path === '/reports'"
           @tab-click="onHomeTabClick"
         >
           <template #icon>

components/ReportBasePage.vue

@@ -0,0 +1,13 @@
+<template>
+  <main class="grid grid-rows-1 grid-cols-4 gap-1 min-h-screen">
+    <!-- Navigation sidebar -->
+    <Navbar class="col-start-1 col-end-1" />
+
+    <!-- Page content -->
+    <div class="col-start-2 col-span-3 overflow-scroll m-4">
+      <div class="p-6 border-adn-border border-2 bg-adn-white rounded-lg">
+        <slot></slot>
+      </div>
+    </div>
+  </main>
+</template>