Merge pull request #74 from nyomansunima/68-feature-home

🎉 build: create simple home

apps/web/app.vue

@@ -19,10 +19,6 @@ gsap.registerPlugin(ScrollTrigger)
 // scroll smoother using lenis
 onMounted(() => {
   const lenis = new Lenis()
-  lenis.on('scroll', (e) => {
-    console.log(e)
-  })
-
   function raf(time) {
     lenis.raf(time)
     requestAnimationFrame(raf)

apps/web/components/base/header/MainHeader.vue

@@ -5,7 +5,7 @@
     <!-- brands -->
     <NuxtLink
       to="/"
-      class="flex items-center h-10 w-10 transition-all duration-300 hover:scale-95 dark:bg-white rounded-full dark:p-2"
+      class="flex items-center h-10 w-10 transition-all duration-300 hover:scale-95 dark:bg-white rounded-full p-2"
     >
       <NuxtImg src="/images/logo.png" class="flex w-full h-full" />
     </NuxtLink>

apps/web/components/blog/BlogHeader.vue

@@ -5,7 +5,10 @@
   >
     <!-- branding -->
     <div class="flex items-center gap-2">
-      <NuxtLink to="/" class="h-10 w-10 relative dark:bg-white rounded-full">
+      <NuxtLink
+        to="/"
+        class="h-10 w-10 p-2 relative dark:bg-white rounded-full"
+      >
         <NuxtImg src="/images/logo.png" />
       </NuxtLink>
       <NuxtLink to="/blog" class="text-xl font-semibold">Blog</NuxtLink>
@@ -35,16 +38,16 @@ interface Menu {
 const menus: Menu[] = [
   {
     label: 'Tips',
-    path: 'tips'
+    path: 'tips',
   },
   {
     label: 'Development',
-    path: 'development'
+    path: 'development',
   },
   {
     label: 'Design',
-    path: 'design'
-  }
+    path: 'design',
+  },
 ]
 
 const viewTag = (tag: string) => {

apps/web/error.vue

@@ -0,0 +1,32 @@
+<template>
+  <main class="pt-40">
+    <!-- not found -->
+    <section
+      class="flex flex-col items-center container mx-auto px-20"
+      v-if="error.statusCode == 404"
+    >
+      <h2 class="text-[200px]">404</h2>
+      <h3 class="text-6xl w-7/12 text-center">
+        Opps, something <span class="text-gray-400">missing</span>
+      </h3>
+
+      <div class="flex justify-center mt-16">
+        <OutlineButton @click="handleError">Back Home</OutlineButton>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+defineProps({
+  error: Object,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+
+useHead({
+  bodyAttrs: {
+    class:
+      'font-sans font-medium text-base leading-normal text-black dark:text-gray-100 bg-white dark:bg-black transition-all duration-1000',
+  },
+})
+</script>

apps/web/nuxt.config.ts

@@ -4,29 +4,30 @@ export default defineNuxtConfig({
     '@nuxt/devtools',
     '@nuxt/image-edge',
     '@nuxtjs/sanity',
-    '@nuxtjs/tailwindcss'
+    '@nuxtjs/tailwindcss',
   ],
   routeRules: {
-    '/blog/**': { isr: true }
+    '/blog/**': { isr: true },
   },
   css: [
     '~/assets/styles/globals.css',
-    '@flaticon/flaticon-uicons/css/all/all.css'
+    '@flaticon/flaticon-uicons/css/all/all.css',
   ],
   components: {
-    dirs: [{ path: '~/components', pathPrefix: false }]
+    dirs: [{ path: '~/components', pathPrefix: false }],
   },
   devtools: {
-    enabled: true
+    enabled: true,
   },
   sanity: {
     projectId: process.env.SANITY_PROJECT_ID,
     apiVersion: process.env.SANITY_API_VERSION,
-    dataset: process.env.SANITY_DATASET
+    dataset: process.env.SANITY_DATASET,
+    useCdn: false,
   },
   runtimeConfig: {
     public: {
-      brevoApiKey: ''
-    }
-  }
+      brevoApiKey: '',
+    },
+  },
 })

apps/web/pages/index.vue

@@ -1,7 +1,37 @@
 <template>
-  <div></div>
+  <main class="flex flex-col pt-40 py-80">
+    <section class="flex flex-col container mx-auto px-20 items-center">
+      <h2 class="text-6xl leading-tight text-center w-8/12">
+        🎉 Hello, iam a
+        <span class="text-gray-400"
+          >Product Designer, Developer & Indie maker</span
+        >
+      </h2>
+      <p class="text-xl leading-relaxed text-center w-7/12 mt-10">
+        Hi, My name Nyoman Sunima. Iam a Product Designer and Developer located
+        in Bali, Indonesia. I work as software engineering and cratf the app
+        from the zero and make something special. Everytime my day i use to
+        write the content, sharing with community, craft app and connect with
+        other creators.
+      </p>
+
+      <div class="flex flex-wrap mt-12 gap-4">
+        <OutlineButton link="/blog">My Blog</OutlineButton>
+        <OutlineButton link="/project">Projects</OutlineButton>
+        <OutlineButton link="/inspiration">Inspirations</OutlineButton>
+      </div>
+    </section>
+  </main>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+definePageMeta({
+  layout: 'main',
+})
 
-<style scoped></style>
+useSeoMeta({
+  title: 'Product Designer, Developer & Indie Maker',
+  description:
+    'Hi, iam a product designer and developer located in bali, Iam indie maker',
+})
+</script>