Minor update to branding

Author: netervati

assets/css/main.css

@@ -1,4 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-family: 'Roboto', sans-serif !important;
+}

components/button.vue

@@ -53,7 +53,7 @@
 
 <template>
   <button
-    class="btn"
+    class="btn normal-case font-normal text-lg"
     :class="mergedClass"
     :disabled="loading || disabled"
     :type="type"

components/content/ProseA.vue

@@ -16,7 +16,7 @@
   <NuxtLink
     :href="href"
     :target="target"
-    class="decoration-2 font-bold text-success underline underline-offset-2"
+    class="decoration-2 font-bold text-violet-600 underline underline-offset-2"
   >
     <slot />
   </NuxtLink>

components/footer.vue

@@ -1,7 +1,10 @@
 <template>
-  <footer class="footer footer-center mt-8 p-4 text-base-content">
-    <aside>
-      <p>Copyright © 2023 - All right reserved by Netervati</p>
-    </aside>
+  <footer class="footer border-b-8 border-violet-600 items-center p-6 md:text-lg">
+    <aside class="items-center grid-flow-col">
+      <p>© 2023 PseudoRESTAPI - All right reserved.</p>
+    </aside> 
+    <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+      <p>Built by <NuxtLink class="text-violet-600 font-bold" to="https://www.christophertabula.net/">Christopher Tabula</NuxtLink></p>
+    </nav>
   </footer>
 </template>

components/logoLink.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  type Props = {
+    to?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    to: '/',
+  });
+</script>
+
+<template>
+  <NuxtLink
+    :to="props.to"
+    class="btn btn-ghost gap-x-2 normal-case text-xl"
+  >
+    <img width="36" src="/logo.png" /> PseudoRESTAPI
+  </NuxtLink>
+</template>

components/nav/bar.vue

@@ -39,9 +39,7 @@
 <template>
   <div class="bg-base-100 border-b border-gray-300 navbar">
     <div class="flex-1">
-      <NuxtLink class="btn btn-ghost normal-case text-xl" to="/dashboard">
-        <img width="200" src="/full-logo.png" />
-      </NuxtLink>
+      <LogoLink to="/dashboard" />
     </div>
     <div class="flex-none">
       <Dropdown avatar class="rounded-lg" color="ghost" position="end">

components/nav/barPublic.vue

@@ -1,34 +1,30 @@
 <script lang="ts" setup>
-  import { Bars3Icon, ComputerDesktopIcon } from '@heroicons/vue/24/outline';
+  import { Bars3Icon } from '@heroicons/vue/24/outline';
 </script>
 
 <template>
-  <div class="navbar bg-base-100">
+  <div class="navbar absolute bg-base-100 p-4">
     <div class="navbar-start">
       <div class="dropdown">
         <label tabindex="0" class="btn btn-ghost lg:hidden">
           <Bars3Icon class="h-6 w-6" />
         </label>
-        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52"
+        >
           <li><NuxtLink to="/docs">Docs</NuxtLink></li>
           <li><NuxtLink to="https://github.com/netervati/pseudo-rest-api">Source</NuxtLink></li>
         </ul>
       </div>
-      <NuxtLink class="btn btn-ghost normal-case text-xl" to="/">
-        <img width="200" src="/full-logo.png" />
-      </NuxtLink>
+      <LogoLink />
     </div>
     <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1">
+      <ul class="flex gap-x-8 px-1">
         <li><NuxtLink to="/docs">Docs</NuxtLink></li>
         <li><NuxtLink to="https://github.com/netervati/pseudo-rest-api">Source</NuxtLink></li>
       </ul>
     </div>
-    <div class="navbar-end">
-      <NuxtLink class="btn btn-sm" to="/dashboard">
-        <ComputerDesktopIcon class="h-6 w-6" />
-        <span class="hidden md:block md:ml-2">Dashboard</span>
-      </NuxtLink>
-    </div>
+    <div class="navbar-end"></div>
   </div>
 </template>

layouts/docs.vue

@@ -17,6 +17,7 @@
           <label for="my-drawer" class="btn btn-ghost btn-sm drawer-button">
             <Bars3Icon class="h-6 w-6" />
           </label>
+          <LogoLink />
         </div>
         <div class="flex-none" />
       </nav>

pages/docs/[...slug].vue

@@ -8,5 +8,4 @@
   <section class="p-6">
     <ContentDoc />
   </section>
-  <Footer />
 </template>

pages/index.vue

@@ -1,17 +1,27 @@
 <script setup lang="ts">
+  import { ArrowRightCircleIcon } from '@heroicons/vue/24/outline';
+
   definePageMeta({
     layout: 'blank',
   });
 </script>
 
 <template>
   <NavBarPublic />
-  <section class="flex flex-col md:flex-row gap-3 p-2 md:p-8">
-    <LandingPageCode />
-    <header class="m-auto">
-      <h1 class="font-bold text-4xl md:text-6xl">Intuitive way to mock REST endpoints</h1>
-      <p class="mt-8 text-lg md:text-2xl">Build your own fake REST APIs without having to learn any programming language or framework</p>
+  <section class="flex flex-col h-screen gap-3">
+    <header class="flex flex-col m-auto text-center w-5/6 md:w-3/6">
+      <h1 class="font-bold text-3xl md:text-6xl"><span class="bg-gray-300">API Mocking</span> Made Simple for Everyone.</h1>
+      <p class="mt-8 md:text-xl">Build, tweak, and perfect your mock REST APIs with ease. We'll serve those endpoints for you.</p>
+      <div class="flex m-auto">
+        <NuxtLink
+          class="btn mt-4 gap-x-2 font-normal text-md md:text-2xl normal-case"
+          to="/dashboard"
+        >
+          <span>Get Started</span>
+          <ArrowRightCircleIcon class="h-6 w-6" />
+        </NuxtLink>
+      </div>
     </header>
+    <Footer />
   </section>
-  <Footer />
 </template>