From db0a6d821cb22649f9050eaad67d94f91efdf560 Mon Sep 17 00:00:00 2001
From: nyomansunima <nyomansunima@gmail.com>
Date: Tue, 30 May 2023 21:51:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20build:=20create=20simple=20home?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app.vue                              |  4 ---
 .../web/components/base/header/MainHeader.vue |  2 +-
 apps/web/components/blog/BlogHeader.vue       | 13 ++++---
 apps/web/error.vue                            | 32 +++++++++++++++++
 apps/web/nuxt.config.ts                       | 19 +++++-----
 apps/web/pages/index.vue                      | 36 +++++++++++++++++--
 6 files changed, 84 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/error.vue

diff --git a/apps/web/app.vue b/apps/web/app.vue
index 7761655..53f7aa2 100644
--- a/apps/web/app.vue
+++ b/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)
diff --git a/apps/web/components/base/header/MainHeader.vue b/apps/web/components/base/header/MainHeader.vue
index 24ef727..ddbbaea 100644
--- a/apps/web/components/base/header/MainHeader.vue
+++ b/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>
diff --git a/apps/web/components/blog/BlogHeader.vue b/apps/web/components/blog/BlogHeader.vue
index 1ff701f..e06c046 100644
--- a/apps/web/components/blog/BlogHeader.vue
+++ b/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) => {
diff --git a/apps/web/error.vue b/apps/web/error.vue
new file mode 100644
index 0000000..2627a2e
--- /dev/null
+++ b/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>
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index b9d63b5..4842190 100644
--- a/apps/web/nuxt.config.ts
+++ b/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: '',
+    },
+  },
 })
diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
index fb62d1f..7000936 100644
--- a/apps/web/pages/index.vue
+++ b/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>