diff --git a/apps/web/app.vue b/apps/web/app.vue
index d731be5..17554c0 100644
--- a/apps/web/app.vue
+++ b/apps/web/app.vue
@@ -8,10 +8,10 @@
 
 <script setup lang="ts">
 useHead({
-  titleTemplate: '%s - Nyoman Sunima',
+  titleTemplate: '%s | Nyoman Sunima',
   bodyAttrs: {
     class:
-      'font-sans font-medium text-base leading-normal text-black bg-white dark:bg-black'
+      'font-sans font-medium text-base leading-normal text-black dark:text-gray-100 bg-white dark:bg-black'
   }
 })
 </script>
diff --git a/apps/web/assets/styles/globals.css b/apps/web/assets/styles/globals.css
index fa13aea..d2c698e 100644
--- a/apps/web/assets/styles/globals.css
+++ b/apps/web/assets/styles/globals.css
@@ -6,34 +6,32 @@
 /* from `Gilroy` */
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/regular.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/regular.woff2) format('woff2');
   font-weight: 400;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/medium.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/medium.woff2) format('woff2');
   font-weight: 500;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'),
-    url(~/assets/fonts/gilroy/semibold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/semibold.woff2) format('woff2');
   font-weight: 600;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/bold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/bold.woff2) format('woff2');
   font-weight: 700;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'),
-    url(~assets/fonts/gilroy/extrabold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/extrabold.woff2) format('woff2');
   font-weight: 800;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~assets/fonts/gilroy/black.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/black.woff2) format('woff2');
   font-weight: 900;
 }
 
diff --git a/apps/web/components/base/button/IconButton.vue b/apps/web/components/base/button/IconButton.vue
index 40ada51..b63d176 100644
--- a/apps/web/components/base/button/IconButton.vue
+++ b/apps/web/components/base/button/IconButton.vue
@@ -2,7 +2,7 @@
   <button
     @click.prevent="$emit('click')"
     class="flex justify-center items-center"
-    :class="class"
+    :class="$props.class"
     :type="type"
   >
     <slot />
@@ -16,7 +16,7 @@ interface IconButtonProps extends BaseButtonProps {}
 const { type = 'button' } = defineProps<IconButtonProps>()
 
 interface IconButtonEmits extends BaseButtonEmits {}
-const emit = defineEmits<BaseButtonEmits>()
+defineEmits<IconButtonEmits>()
 </script>
 
 <style scoped>
diff --git a/apps/web/components/base/button/OutlineButton.vue b/apps/web/components/base/button/OutlineButton.vue
index e983b4f..b30d1fd 100644
--- a/apps/web/components/base/button/OutlineButton.vue
+++ b/apps/web/components/base/button/OutlineButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
-    @click.prevent="$emit('click')"
-    class="flex justify-center items-center h-16 rounded-full px-8 text-lg font-medium gap-3 border border-gray-100"
+    @click="link ? viewLink() : $emit('click')"
+    class="flex justify-center items-center h-16 rounded-full px-8 text-lg font-medium gap-3 border border-gray-100 dark:border-gray-600"
     :class="class"
     :type="type"
   >
@@ -13,10 +13,18 @@
 import { BaseButtonProps, BaseButtonEmits } from '~/types/component'
 
 interface OutlineButtonProps extends BaseButtonProps {}
-const { type = 'button' } = defineProps<OutlineButtonProps>()
+const { type = 'button', link } = defineProps<OutlineButtonProps>()
 
 interface OutlineButtonEmits extends BaseButtonEmits {}
-const emit = defineEmits<BaseButtonEmits>()
+defineEmits<OutlineButtonEmits>()
+
+const viewLink = () => {
+  if (link?.includes('https://') || link?.includes('http://')) {
+    window.open(link)
+  } else {
+    navigateTo(link)
+  }
+}
 </script>
 
 <style scoped>
diff --git a/apps/web/components/base/footer/MainFooter.vue b/apps/web/components/base/footer/MainFooter.vue
new file mode 100644
index 0000000..1384cc6
--- /dev/null
+++ b/apps/web/components/base/footer/MainFooter.vue
@@ -0,0 +1,56 @@
+<template>
+  <footer
+    class="flex flex-col border-t border-t-gray-100 dark:border-t-gray-900"
+  >
+    <!-- menus -->
+    <div class="grid grid-cols-4 container mx-auto px-28 mt-32">
+      <div
+        class="flex flex-col col-span-1"
+        v-for="section in footerMenus"
+        :key="section.headline"
+      >
+        <h4 class="flex text-2xl">{{ section.headline }}</h4>
+        <ul class="flex flex-col gap-5 mt-10">
+          <li class="flex text-lg" v-for="menu in section.menus">
+            <NuxtLink :to="menu.link">{{ menu.label }}</NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- credit -->
+    <div
+      class="flex items-center px-10 py-6 border-t border-t-gray-100 dark:border-t-gray-900 mt-60"
+    >
+      <span>Copyright &copy; {{ currentYear }} - Alright Reserved</span>
+
+      <div class="flex flex-1"></div>
+
+      <div class="flex items-center">
+        <ul class="flex list-none gap-10">
+          <li
+            class="transition-all duration-300 hover:-translate-y-1 cursor-pointer"
+            v-for="social in socials"
+            :key="social.label"
+          >
+            <NuxtLink
+              :to="social.url"
+              external
+              target="_blank"
+              class="flex justify-center items-center text-2xl"
+            >
+              <i class="" :class="social.icon"></i>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { socials } from '~/contents/social.json'
+import { footer as footerMenus } from '~/contents/menu.json'
+
+const currentYear = computed(() => new Date().getFullYear())
+</script>
diff --git a/apps/web/components/base/header/MainHeader.vue b/apps/web/components/base/header/MainHeader.vue
new file mode 100644
index 0000000..24ef727
--- /dev/null
+++ b/apps/web/components/base/header/MainHeader.vue
@@ -0,0 +1,33 @@
+<template>
+  <header
+    class="flex items-center fixed z-10 top-0 inset-x-0 bg-white dark:bg-black px-10 py-3 border-b border-gray-100 dark:border-b-gray-900"
+  >
+    <!-- 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"
+    >
+      <NuxtImg src="/images/logo.png" class="flex w-full h-full" />
+    </NuxtLink>
+
+    <!-- menus -->
+    <div class="flex flex-1"></div>
+    <div class="flex mr-16">
+      <ul class="flex items-center gap-10">
+        <li
+          v-for="menu in header"
+          :key="menu.path"
+          class="font-medium transition-all duration-300 hover:-translate-y-1"
+        >
+          <NuxtLink class="" :to="menu.path">{{ menu.label }}</NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <IconButton><i class="fi fi-rr-box-heart text-xl"></i></IconButton>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { header } from '~/contents/menu.json'
+</script>
diff --git a/apps/web/components/base/input/AreaTextInput.vue b/apps/web/components/base/input/AreaTextInput.vue
new file mode 100644
index 0000000..3a6ff23
--- /dev/null
+++ b/apps/web/components/base/input/AreaTextInput.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col w-full">
+    <label :for="`${name}-input`" v-show="label" class="flex">{{
+      label
+    }}</label>
+    <div
+      class="flex w-full py-5 items-center bg-white dark:bg-black min-h-[200px] rounded-3xl ring-1 ring-gray-100 dark:ring-gray-800 focus-within:ring-2 focus-within:ring-black focus-within:dark:ring-gray-700 transition-all duration-300 px-5"
+    >
+      <i :class="preIcon" v-show="preIcon"></i>
+      <textarea
+        v-model="value"
+        :name="name"
+        :id="`${name}-input`"
+        :placeholder="placeholder"
+        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black dark:text-gray-400 placeholder:text-gray-600"
+      ></textarea>
+      <i :class="sufIcon" class="dark:text-gray-600" v-show="sufIcon"></i>
+    </div>
+
+    <span v-show="errorMessage" class="flex ml-3 mt-5">{{ errorMessage }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useField } from 'vee-validate'
+import { BaseInputProps } from '~/types/component'
+
+interface TextAreaInputProps extends BaseInputProps {}
+const props = defineProps<TextAreaInputProps>()
+const { errorMessage, value, setValue } = useField(() => props.name)
+if (props.value) {
+  setValue(props.value)
+}
+</script>
diff --git a/apps/web/components/base/input/FormInput.vue b/apps/web/components/base/input/FormInput.vue
new file mode 100644
index 0000000..209cf61
--- /dev/null
+++ b/apps/web/components/base/input/FormInput.vue
@@ -0,0 +1,25 @@
+<template>
+  <form @submit.prevent="saveForm" class="flex flex-col">
+    <slot />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { FormContext } from 'vee-validate'
+
+interface FormInputProps {
+  context: FormContext
+}
+const {
+  context: { handleSubmit }
+} = defineProps<FormInputProps>()
+
+interface FormInputEmits {
+  (e: 'save', formData: any): void
+}
+const emit = defineEmits<FormInputEmits>()
+
+const saveForm = handleSubmit((formData) => {
+  emit('save', formData)
+})
+</script>
diff --git a/apps/web/components/base/input/TextInput.vue b/apps/web/components/base/input/TextInput.vue
index aeb7676..a1409e8 100644
--- a/apps/web/components/base/input/TextInput.vue
+++ b/apps/web/components/base/input/TextInput.vue
@@ -4,7 +4,7 @@
       label
     }}</label>
     <div
-      class="flex w-full items-center bg-white h-16 rounded-full ring-1 ring-gray-100 focus-within:ring-2 focus-within:ring-black transition-all duration-300 px-5"
+      class="flex w-full items-center bg-white dark:bg-black h-16 rounded-3xl ring-1 ring-gray-100 dark:ring-gray-800 focus-within:ring-2 focus-within:ring-black focus-within:dark:ring-gray-700 transition-all duration-300 px-5"
     >
       <i :class="preIcon" v-show="preIcon"></i>
       <input
@@ -13,12 +13,12 @@
         :id="`${name}-input`"
         type="text"
         :placeholder="placeholder"
-        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black placeholder:text-gray-600"
+        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black dark:text-gray-400 placeholder:text-gray-600"
       />
-      <i :class="sufIcon" v-show="sufIcon"></i>
+      <i :class="sufIcon" class="dark:text-gray-600" v-show="sufIcon"></i>
     </div>
 
-    <span v-show="errorMessage" class="flex">{{ errorMessage }}</span>
+    <span v-show="errorMessage" class="flex ml-3 mt-5">{{ errorMessage }}</span>
   </div>
 </template>
 
diff --git a/apps/web/components/blog/BlogFooter.vue b/apps/web/components/blog/BlogFooter.vue
index f1af0ac..7e21810 100644
--- a/apps/web/components/blog/BlogFooter.vue
+++ b/apps/web/components/blog/BlogFooter.vue
@@ -4,7 +4,7 @@
 
     <!-- credit -->
     <div
-      class="flex items-center justify-between px-10 py-8 border-t-2 border-t-gray-100"
+      class="flex items-center justify-between px-10 py-8 border-t-2 border-t-gray-100 dark:border-t-gray-900"
     >
       <span>Copyright &copy; {{ currentYear }} - Alright Reserved </span>
       <span class="flex items-center gap-3"
diff --git a/apps/web/components/blog/BlogHeader.vue b/apps/web/components/blog/BlogHeader.vue
index 90bdc62..1ff701f 100644
--- a/apps/web/components/blog/BlogHeader.vue
+++ b/apps/web/components/blog/BlogHeader.vue
@@ -1,11 +1,11 @@
 <template>
   <header
-    class="flex fixed z-10 top-0 inset-x-0 bg-white bg-opacity-50 backdrop-blur-sm border-b border-b-gray-100 px-14 py-3"
+    class="flex fixed z-10 top-0 inset-x-0 bg-white dark:bg-black bg-opacity-50 backdrop-blur-sm border-b border-b-gray-100 dark:border-b-gray-800 px-14 py-3"
     s
   >
     <!-- branding -->
     <div class="flex items-center gap-2">
-      <NuxtLink to="/" class="h-10 w-10 relative">
+      <NuxtLink to="/" class="h-10 w-10 relative dark:bg-white rounded-full">
         <NuxtImg src="/images/logo.png" />
       </NuxtLink>
       <NuxtLink to="/blog" class="text-xl font-semibold">Blog</NuxtLink>
diff --git a/apps/web/components/blog/BlogPostItem.vue b/apps/web/components/blog/BlogPostItem.vue
index 3dca5c8..1187661 100644
--- a/apps/web/components/blog/BlogPostItem.vue
+++ b/apps/web/components/blog/BlogPostItem.vue
@@ -9,7 +9,7 @@
     >
       <!-- categories -->
       <div
-        class="flex bg-white px-5 h-12 rounded-full gap-3 absolute right-5 top-5 justify-center items-center z-10"
+        class="flex bg-white dark:text-black px-5 h-12 rounded-full gap-3 absolute right-5 top-5 justify-center items-center z-10"
       >
         <span class="h-2 w-2 rounded-full bg-black"></span>
         <span class="text-base font-medium">{{ data.tag }}</span>
diff --git a/apps/web/components/blog/BlogTag.vue b/apps/web/components/blog/BlogTag.vue
index e66db7b..07dab84 100644
--- a/apps/web/components/blog/BlogTag.vue
+++ b/apps/web/components/blog/BlogTag.vue
@@ -2,9 +2,9 @@
   <button
     @click.prevent="viewTag"
     type="button"
-    class="font-medium px-5 py-3 rounded-full border border-gray-100 flex justify-center items-center gap-3 transition-all duration-300 hover:-translate-y-1"
+    class="font-medium px-5 py-3 rounded-full border border-gray-100 dark:border-gray-700 flex justify-center items-center gap-3 transition-all duration-300 hover:-translate-y-1"
   >
-    <span class="flex h-2 w-2 rounded-full bg-black"></span>
+    <span class="flex h-2 w-2 rounded-full bg-black dark:bg-gray-200"></span>
     {{ tag }}
   </button>
 </template>
diff --git a/apps/web/components/blog/filter/BlogFilterTagItem.vue b/apps/web/components/blog/filter/BlogFilterTagItem.vue
index 9c32004..5c81899 100644
--- a/apps/web/components/blog/filter/BlogFilterTagItem.vue
+++ b/apps/web/components/blog/filter/BlogFilterTagItem.vue
@@ -1,9 +1,9 @@
 <template>
   <button
-    class="flex bg-white h-14 rounded-full px-5 border border-gray-100 items-center gap-3"
+    class="flex bg-white dark:bg-black h-14 rounded-full px-5 border border-gray-100 dark:border-gray-700 items-center gap-3"
     type="button"
   >
-    <span class="h-2 w-2 rounded-full bg-black"></span>
+    <span class="h-2 w-2 rounded-full bg-black dark:bg-gray-600"></span>
     <span class="flex text-base">{{ tag }}</span>
   </button>
 </template>
diff --git a/apps/web/components/content/MarkdownContent.vue b/apps/web/components/content/MarkdownContent.vue
index f872a47..6a94309 100644
--- a/apps/web/components/content/MarkdownContent.vue
+++ b/apps/web/components/content/MarkdownContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col prose prose-xl prose-headings:font-semibold marker:text-black mt-16 prose-img:w-full prose-img:rounded-3xl prose-img:overflow-hidden prose-pre:border prose-pre:rounded-2xl content prose-pre:font-mono text-black prose-li:my-0 prose-p:mt-1 mb-0"
+    class="flex flex-col prose prose-xl prose-headings:font-medium marker:text-black dark:marker:text-gray-100 mt-16 prose-img:w-full prose-img:rounded-3xl prose-img:overflow-hidden prose-pre:border prose-pre:dark:border-gray-800 prose-pre:rounded-2xl content prose-pre:font-mono text-black prose-li:my-0 prose-p:mt-1 mb-0 dark:text-gray-200 prose-headings:text-black dark:prose-headings:text-gray-200 dark:prose-invert"
     v-html="parsedMarkdown"
   ></div>
 </template>
diff --git a/apps/web/composables/useBrevo.ts b/apps/web/composables/useBrevo.ts
new file mode 100644
index 0000000..385ec3a
--- /dev/null
+++ b/apps/web/composables/useBrevo.ts
@@ -0,0 +1,29 @@
+import { defu } from 'defu'
+import { UseFetchOptions } from 'nuxt/app'
+
+/**
+ * # useBrevo
+ *
+ * the brevo client to connect with the
+ * brevo API.
+ *
+ * @param url the url to fething in brevo API
+ * @param options
+ * @returns AsyncData
+ */
+export function useBrevo<T>(url: string, options: UseFetchOptions<T> = {}) {
+  const baseUrl = `https://api.brevo.com/v3`
+  const {
+    public: { brevoApiKey }
+  } = useRuntimeConfig()
+
+  const defaults: UseFetchOptions<T> = {
+    baseURL: baseUrl,
+    key: url,
+    headers: {
+      'api-key': brevoApiKey
+    }
+  }
+  const params = defu(options, defaults)
+  return useFetch(url, params)
+}
diff --git a/apps/web/composables/useMutation.ts b/apps/web/composables/useMutation.ts
new file mode 100644
index 0000000..e620b55
--- /dev/null
+++ b/apps/web/composables/useMutation.ts
@@ -0,0 +1,55 @@
+interface UseMutationReturn<D, E> {
+  pending: Ref<boolean>
+  data: Ref<D | any>
+  error: Ref<E | any>
+  mutate: (args?: any) => void
+}
+
+interface UseMutationOptions {
+  onPending?: () => void
+  onError?: (error?: any) => void
+  onSuccess?: (data?: any) => void
+}
+
+/**
+ * # useMutation
+ *
+ * helper to manage and mutate data with modern way
+ * and help the flow of state
+ *
+ * @param mutateFunc the function to mutate passed as args
+ * @param options options when teh mutatetion
+ * @returns UseMutationReturn
+ */
+export default function useMutation<D, E>(
+  mutateFunc: (...args: any) => void,
+  options?: UseMutationOptions
+): UseMutationReturn<D, E> {
+  const pending = ref<boolean>(false)
+  const error = ref<E | any>()
+  const data = ref<D | any>()
+
+  // wrap all calling function
+  // into a single call from a mutate
+  const mutating = async (args?: any) => {
+    try {
+      // start pending state
+      pending.value = true
+
+      // call the mutation function and return the value data
+      const res = await mutateFunc(args)
+
+      // success state
+      pending.value = false
+      data.value = res
+      options?.onSuccess && options.onSuccess(res)
+    } catch (err) {
+      // error state
+      pending.value = false
+      options?.onError && options.onError(err)
+      error.value = err
+    }
+  }
+
+  return { data, error, pending, mutate: mutating }
+}
diff --git a/apps/web/contents/menu.json b/apps/web/contents/menu.json
new file mode 100644
index 0000000..5fa88ce
--- /dev/null
+++ b/apps/web/contents/menu.json
@@ -0,0 +1,81 @@
+{
+  "header": [
+    {
+      "label": "Projects",
+      "path": "/projects"
+    },
+    {
+      "label": "Services",
+      "path": "/services"
+    },
+    {
+      "label": "About",
+      "path": "/about"
+    },
+    {
+      "label": "Contact",
+      "path": "/contact"
+    }
+  ],
+  "footer": [
+    {
+      "headline": "Explore",
+      "menus": [
+        {
+          "label": "About",
+          "link": "/about"
+        },
+        {
+          "label": "Contact",
+          "link": "/about"
+        },
+        {
+          "label": "Privacy",
+          "link": "/privacy"
+        },
+        {
+          "label": "Terms",
+          "link": "/terms"
+        }
+      ]
+    },
+    {
+      "headline": "Services",
+      "menus": [
+        {
+          "label": "Web Development",
+          "link": "/service/web-development"
+        },
+        {
+          "label": "Mobile Development",
+          "link": "/service/mobile-development"
+        },
+        {
+          "label": "UI UX Design",
+          "link": "/service/ui-ux-design"
+        },
+        {
+          "label": "Backend & Devops",
+          "link": "/service/backend-devops"
+        }
+      ]
+    },
+    {
+      "headline": "Resources",
+      "menus": [
+        {
+          "label": "Inspiration",
+          "link": "/inspiration"
+        },
+        {
+          "label": "Blog",
+          "link": "/blog"
+        },
+        {
+          "label": "Products",
+          "link": "/privacy"
+        }
+      ]
+    }
+  ]
+}
diff --git a/apps/web/contents/social.json b/apps/web/contents/social.json
new file mode 100644
index 0000000..c53ff63
--- /dev/null
+++ b/apps/web/contents/social.json
@@ -0,0 +1,29 @@
+{
+  "socials": [
+    {
+      "label": "Instagram",
+      "url": "https://instagram.com/nyomansunima",
+      "icon": "fi fi-brands-instagram"
+    },
+    {
+      "label": "Twitter",
+      "url": "https://twitter.com/nyomansunima",
+      "icon": "fi fi-brands-twitter"
+    },
+    {
+      "label": "Github",
+      "url": "https://github.com/nyomansunima",
+      "icon": "fi fi-brands-github"
+    },
+    {
+      "label": "Buy me coffee",
+      "url": "https://ko-fi.com/nyomansunima",
+      "icon": "fi fi-rr-mug-hot-alt"
+    },
+    {
+      "label": "Dribbble",
+      "url": "https://dribbble.com/nyomansunima",
+      "icon": "fi fi-brands-dribbble"
+    }
+  ]
+}
diff --git a/apps/web/layouts/main.vue b/apps/web/layouts/main.vue
new file mode 100644
index 0000000..af23483
--- /dev/null
+++ b/apps/web/layouts/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <!-- Header -->
+    <MainHeader />
+
+    <!-- content -->
+    <slot />
+
+    <!-- Footer -->
+    <MainFooter />
+  </div>
+</template>
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index d37eab7..7dba704 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -28,5 +28,10 @@ export default defineNuxtConfig({
     apiVersion: process.env.SANITY_API_VERSION,
     dataset: process.env.SANITY_DATASET,
     useCdn: true
+  },
+  runtimeConfig: {
+    public: {
+      brevoApiKey: ''
+    }
   }
 })
diff --git a/apps/web/package.json b/apps/web/package.json
index 5111432..8d353d8 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -32,10 +32,12 @@
   },
   "dependencies": {
     "@flaticon/flaticon-uicons": "^2.2.0",
+    "defu": "^6.1.2",
     "gsap": "^3.11.5",
     "highlight.js": "^11.8.0",
     "markdown-it": "^13.0.1",
     "markdown-it-attrs": "^4.1.6",
-    "vee-validate": "^4.9.5"
+    "vee-validate": "^4.9.5",
+    "yup": "^1.2.0"
   }
 }
diff --git a/apps/web/pages/bio.vue b/apps/web/pages/bio.vue
index 224cf50..25bfc3b 100644
--- a/apps/web/pages/bio.vue
+++ b/apps/web/pages/bio.vue
@@ -1,171 +1,159 @@
 <template>
-  <dv>
-    <!-- head -->
-    <Head>
-      <Title>Bio</Title>
-      <Meta name="description" content="Explore the bio and links" />
-    </Head>
+  <main
+    class="flex container mx-auto py-16 px-5 tablet:px-0 tablet:py-32 justify-center dark:text-black"
+  >
+    <div class="flex flex-col tablet:w-6/12">
+      <!-- intro profile -->
+      <!-- including avatar, bio, desc, and links -->
+      <div class="flex flex-col w-full items-center">
+        <div
+          class="flex h-28 w-28 rounded-full relative overflow-hidden before:content-[''] before:absolute p-3 before:inset-0 before:border-2 before:border-gray-200 dark:before:border-gray-800 before:rounded-full"
+        >
+          <NuxtImg :src="content.avatar" class="rounded-full overflow-hidden" />
+        </div>
+        <div class="flex items-center gap-3 mt-4">
+          <h2 class="text-2xl font-medium dark:text-white">Nyoman Sunima</h2>
+          <i class="fi fi-rr-badge-check text-violet-500 text-2xl"></i>
+        </div>
+        <p class="flex w-11/12 text-center text-lg mt-4 dark:text-gray-200">
+          {{ content.desc }}
+        </p>
+      </div>
 
-    <!-- content -->
-    <main
-      class="flex container mx-auto py-16 px-5 tablet:px-0 tablet:py-32 justify-center"
-    >
-      <div class="flex flex-col tablet:w-6/12">
-        <!-- intro profile -->
-        <!-- including avatar, bio, desc, and links -->
-        <div class="flex flex-col w-full items-center">
-          <div
-            class="flex h-28 w-28 rounded-full relative overflow-hidden before:content-[''] before:absolute p-3 before:inset-0 before:border-2 before:border-gray-200 dark:border-gray-800 before:rounded-full"
+      <!-- socials icons -->
+      <div
+        class="flex items-center gap-4 justify-center mt-10"
+        v-if="content.socials.length > 0"
+      >
+        <template v-for="social in content.socials">
+          <NuxtLink
+            :to="social.url"
+            external
+            target="_blank"
+            class="flex justify-center items-center h-14 w-14 shadow-sm rounded-full bg-white transition-all duration-300 hover:-translate-y-1"
           >
-            <NuxtImg
-              :src="content.avatar"
-              class="rounded-full overflow-hidden"
-            />
-          </div>
-          <div class="flex items-center gap-3 mt-4">
-            <h2 class="text-2xl font-medium dark:text-white">Nyoman Sunima</h2>
-            <i class="fi fi-rr-badge-check text-violet-500 text-2xl"></i>
-          </div>
-          <p class="flex w-11/12 text-center text-lg mt-4 dark:text-gray-200">
-            {{ content.desc }}
-          </p>
-        </div>
+            <i class="text-xl" :class="social.iconCode"></i>
+          </NuxtLink>
+        </template>
+      </div>
+
+      <!-- special buttons -->
+      <div
+        class="flex flex-wrap items-center gap-4 justify-center mt-6 via-violet-50"
+        v-show="content.links.length > 0"
+      >
+        <template v-for="link in content.links">
+          <NuxtLink
+            :to="link.url"
+            external
+            target="_blank"
+            class="flex px-6 py-4 rounded-3xl bg-white font-medium gap-3 justify-center items-center transition-all duration-700 hover:scale-95"
+            :style="{
+              background: link.customColor,
+              color: link.customColor && 'white'
+            }"
+          >
+            <i
+              class="text-xl"
+              :class="link.iconCode"
+              v-show="link.iconCode"
+            ></i>
+            {{ link.label }}
+          </NuxtLink>
+        </template>
+      </div>
 
-        <!-- socials icons -->
+      <!-- summary info -->
+      <div class="flex flex-col tablet:grid tablet:grid-cols-4 gap-5 mt-10">
+        <!-- total follower social media -->
         <div
-          class="flex items-center gap-4 justify-center mt-10"
-          v-if="content.socials.length > 0"
+          class="flex flex-col items-start bg-emerald-300 p-5 rounded-4xl col-span-2 row-span-5 total-follower relative bg-[url('/images/pattern/circle.svg')] bg-right-top bg-no-repeat transition-all duration-7 00 hover:-translate-y-2"
         >
-          <template v-for="social in content.socials">
-            <NuxtLink
-              :to="social.url"
-              external
-              target="_blank"
-              class="flex justify-center items-center h-14 w-14 shadow-sm rounded-full bg-white transition-all duration-300 hover:-translate-y-1"
-            >
-              <i class="text-xl" :class="social.iconCode"></i>
-            </NuxtLink>
-          </template>
+          <i class="fi fi-rr-following text-5xl"></i>
+          <h4 class="flex uppercase text-6xl font-bold mt-6">
+            {{ content.stats.totalFollower }}
+          </h4>
+          <span class="flex text-lg font-medium">Follower accros media</span>
+          <p class="flex mt-4">
+            Measured for facebook, instagram, twitter, linkedin, and dribbble.
+          </p>
+
+          <span class="flex mt-10">Last updated on May 2023</span>
         </div>
 
-        <!-- special buttons -->
+        <!-- total subscriber -->
         <div
-          class="flex flex-wrap items-center gap-4 justify-center mt-6 via-violet-50"
-          v-show="content.links.length > 0"
+          class="flex flex-col items-start bg-slate-50 p-5 rounded-4xl col-span-2 row-span-1 bg-[url('/images/pattern/poly.svg')] bg-right-top bg-no-repeat bg-cover transition-all duration-700 hover:-translate-y-2"
         >
-          <template v-for="link in content.links">
-            <NuxtLink
-              :to="link.url"
-              external
-              target="_blank"
-              class="flex px-6 py-4 rounded-3xl bg-white font-medium gap-3 justify-center items-center transition-all duration-700 hover:scale-95"
-              :style="{
-                background: link.customColor,
-                color: link.customColor && 'white'
-              }"
-            >
-              <i
-                class="text-xl"
-                :class="link.iconCode"
-                v-show="link.iconCode"
-              ></i>
-              {{ link.label }}
-            </NuxtLink>
-          </template>
-        </div>
-
-        <!-- summary info -->
-        <div class="flex flex-col tablet:grid tablet:grid-cols-4 gap-5 mt-10">
-          <!-- total follower social media -->
-          <div
-            class="flex flex-col items-start bg-emerald-300 p-5 rounded-4xl col-span-2 row-span-5 total-follower relative bg-[url('/images/pattern/circle.svg')] bg-right-top bg-no-repeat transition-all duration-7 00 hover:-translate-y-2"
-          >
-            <i class="fi fi-rr-following text-5xl"></i>
-            <h4 class="flex uppercase text-6xl font-bold mt-6">
-              {{ content.stats.totalFollower }}
+          <div class="flex justify-between items-center w-full">
+            <h4 class="flex text-2xl font-medium">
+              {{ content.stats.totalSubscriber }}+
             </h4>
-            <span class="flex text-lg font-medium">Follower accros media</span>
-            <p class="flex mt-4">
-              Measured for facebook, instagram, twitter, linkedin, and dribbble.
-            </p>
-
-            <span class="flex mt-10">Last updated on May 2023</span>
+            <i class="fi fi-rr-envelope-dot text-2xl text-gray-500"></i>
           </div>
+          <p class="flex mt-2">My monthly newsletter feed subscriber</p>
+        </div>
 
-          <!-- total subscriber -->
-          <div
-            class="flex flex-col items-start bg-slate-50 p-5 rounded-4xl col-span-2 row-span-1 bg-[url('/images/pattern/poly.svg')] bg-right-top bg-no-repeat bg-cover transition-all duration-700 hover:-translate-y-2"
-          >
-            <div class="flex justify-between items-center w-full">
-              <h4 class="flex text-2xl font-medium">
-                {{ content.stats.totalSubscriber }}+
-              </h4>
-              <i class="fi fi-rr-envelope-dot text-2xl text-gray-500"></i>
-            </div>
-            <p class="flex mt-2">My monthly newsletter feed subscriber</p>
+        <!-- contact for influencer -->
+        <div
+          class="flex flex-col items-start bg-red-200 p-5 rounded-4xl col-span-2 row-span-4 transition-all duration-700 hover:-translate-y-2"
+        >
+          <div class="flex justify-between items-center w-full">
+            <h4 class="flex text-lg font-medium">Need an influencer?</h4>
           </div>
+          <p class="flex mt-2">
+            I provider exclusive influencer and business model
+          </p>
 
-          <!-- contact for influencer -->
-          <div
-            class="flex flex-col items-start bg-red-200 p-5 rounded-4xl col-span-2 row-span-4 transition-all duration-700 hover:-translate-y-2"
+          <NuxtLink
+            to="http://nyomansunima.com/contact"
+            class="flex items-center gap-3 font-medium mt-6"
+            external
           >
-            <div class="flex justify-between items-center w-full">
-              <h4 class="flex text-lg font-medium">Need an influencer?</h4>
-            </div>
-            <p class="flex mt-2">
-              I provider exclusive influencer and business model
-            </p>
+            <i class="fi fi-br-paper-plane"></i>
+            Send me a message</NuxtLink
+          >
+        </div>
 
+        <!-- Book any meetings -->
+        <div
+          class="flex flex-col bg-black dark:bg-slate-900 p-6 rounded-[32px] col-span-4 row-span-2 text-white transition-all duration-700 hover:-translate-y-2"
+        >
+          <div class="flex items-center gap-10">
+            <div class="flex flex-col flex-1">
+              <h4 class="text-xl font-medium leading-none">
+                Partner chat with me
+              </h4>
+              <span class="flex mt-4 text-slate-200"
+                >if you have something important to discuss and want to
+                collaborate together, Please book my calendar to meet</span
+              >
+            </div>
             <NuxtLink
-              to="http://nyomansunima.com/contact"
-              class="flex items-center gap-3 font-medium mt-6"
+              to="https://calendly.com/nyomansunima/meetings"
               external
+              target="_blank"
+              class="flex h-14 w-14 rounded-full border border-gray-700 justify-center items-center transition-all duration-300 hover:scale-95"
             >
-              <i class="fi fi-br-paper-plane"></i>
-              Send me a message</NuxtLink
-            >
+              <i class="fi fi-sr-calendar text-xl text-emerald-500"></i>
+            </NuxtLink>
           </div>
 
-          <!-- Book any meetings -->
-          <div
-            class="flex flex-col bg-black dark:bg-slate-900 p-6 rounded-[32px] col-span-4 row-span-2 text-white transition-all duration-700 hover:-translate-y-2"
-          >
-            <div class="flex items-center gap-10">
-              <div class="flex flex-col flex-1">
-                <h4 class="text-xl font-medium leading-none">
-                  Partner chat with me
-                </h4>
-                <span class="flex mt-4 text-slate-200"
-                  >if you have something important to discuss and want to
-                  collaborate together, Please book my calendar to meet</span
-                >
-              </div>
-              <NuxtLink
-                to="https://calendly.com/nyomansunima/meetings"
-                external
-                target="_blank"
-                class="flex h-14 w-14 rounded-full border border-gray-700 justify-center items-center transition-all duration-300 hover:scale-95"
-              >
-                <i class="fi fi-sr-calendar text-xl text-emerald-500"></i>
-              </NuxtLink>
+          <div class="flex items-center gap-4 mt-6">
+            <div class="flex gap-2">
+              <i class="fi fi-rr-clock text-xl"></i>
+              <span class="font-medium">30 minutes</span>
             </div>
 
-            <div class="flex items-center gap-4 mt-6">
-              <div class="flex gap-2">
-                <i class="fi fi-rr-clock text-xl"></i>
-                <span class="font-medium">30 minutes</span>
-              </div>
-
-              <div class="flex gap-2">
-                <i class="fi fi-rr-video-camera-alt text-xl"></i>
-                <span class="font-medium">Google meets</span>
-              </div>
+            <div class="flex gap-2">
+              <i class="fi fi-rr-video-camera-alt text-xl"></i>
+              <span class="font-medium">Google meets</span>
             </div>
           </div>
         </div>
       </div>
-    </main></dv
-  >
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -189,4 +177,14 @@ const {
 } = await useSanityQuery<{ content: BioContent }>(query, {
   slug: 'bio'
 })
+
+useHead({
+  title: 'Bio',
+  meta: [
+    {
+      name: 'description',
+      content: 'Explore my favorite links and special gift'
+    }
+  ]
+})
 </script>
diff --git a/apps/web/pages/blog/[slug].vue b/apps/web/pages/blog/[slug].vue
index 688c2d0..8f83260 100644
--- a/apps/web/pages/blog/[slug].vue
+++ b/apps/web/pages/blog/[slug].vue
@@ -13,10 +13,10 @@
     <!-- content articles -->
     <div class="flex flex-col container mx-auto mt-20">
       <article
-        class="flex flex-col w-11/12 laptop:w-7/12 mx-auto border-b border-gray-100 pb-10"
+        class="flex flex-col w-11/12 laptop:w-7/12 mx-auto border-b border-gray-100 dark:border-b-gray-800 pb-10"
       >
         <!-- title -->
-        <h1 class="text-5xl font-semibold leading-tight">
+        <h1 class="text-5xl font-medium leading-tight">
           {{ post.title }}
         </h1>
         <!-- release date -->
diff --git a/apps/web/pages/contact.vue b/apps/web/pages/contact.vue
new file mode 100644
index 0000000..741d097
--- /dev/null
+++ b/apps/web/pages/contact.vue
@@ -0,0 +1,103 @@
+<template>
+  <main class="flex flex-col py-64">
+    <div class="flex container mx-auto">
+      <div class="flex flex-col w-8/12 mx-auto">
+        <h2 class="text-7xl font-medium flex w-10/12 leading-tight">
+          ✋ Hi, let's discus something
+        </h2>
+
+        <div class="flex flex-wrap gap-4 items-center mt-16">
+          <OutlineButton
+            :link="social.url"
+            v-for="social in socials"
+            :key="social.label"
+            >{{ social.label }}</OutlineButton
+          >
+        </div>
+
+        <!-- form -->
+        <FormInput
+          :context="form"
+          @save="sendMessage.mutate"
+          class="mt-20 gap-5"
+        >
+          <TextInput name="fullName" placeholder="Your full name" />
+          <TextInput name="email" placeholder="Your email address" />
+          <AreaTextInput name="message" placeholder="Your messages" />
+
+          <div class="flex justify-end">
+            <OutlineButton type="submit">
+              <i class="fi fi-rr-paper-plane"></i>
+              Send Messages
+            </OutlineButton>
+          </div>
+        </FormInput>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { socials } from '~/contents/social.json'
+import { object, string } from 'yup'
+
+definePageMeta({
+  layout: 'main'
+})
+
+useHead({
+  title: 'Contact',
+  meta: [
+    {
+      name: 'description',
+      content: 'Get in touch with me and collaborate'
+    }
+  ]
+})
+
+const formSchema = object({
+  fullName: string().required('Please add your full name'),
+  email: string()
+    .required('Please add email')
+    .email('Opps, your email look weirds'),
+  message: string().required('Please add your message')
+})
+
+const form = useForm({ validationSchema: formSchema })
+const sendMessage = useMutation(
+  (formData) => {
+    const { email, fullName, message } = formData
+    return useBrevo('/smtp/email', {
+      method: 'POST',
+      body: {
+        sender: {
+          name: 'Site Contact',
+          email: 'contact@nyomansunima.com'
+        },
+        to: [
+          {
+            name: 'Nyoman Sunima',
+            email: 'nyomansunima@gmail.com'
+          }
+        ],
+        templateId: '1',
+        params: {
+          fullname: fullName,
+          message,
+          email
+        }
+      }
+    })
+  },
+  {
+    onSuccess: () => {
+      form.resetForm()
+    },
+    onError: (err) => {
+      console.log(err)
+      // form.resetForm()
+    }
+  }
+)
+</script>
diff --git a/apps/web/assets/fonts/gilroy/black.woff2 b/apps/web/public/fonts/gilroy/black.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/black.woff2
rename to apps/web/public/fonts/gilroy/black.woff2
diff --git a/apps/web/assets/fonts/gilroy/bold.woff2 b/apps/web/public/fonts/gilroy/bold.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/bold.woff2
rename to apps/web/public/fonts/gilroy/bold.woff2
diff --git a/apps/web/assets/fonts/gilroy/extrabold.woff2 b/apps/web/public/fonts/gilroy/extrabold.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/extrabold.woff2
rename to apps/web/public/fonts/gilroy/extrabold.woff2
diff --git a/apps/web/assets/fonts/gilroy/medium.woff2 b/apps/web/public/fonts/gilroy/medium.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/medium.woff2
rename to apps/web/public/fonts/gilroy/medium.woff2
diff --git a/apps/web/assets/fonts/gilroy/regular.woff2 b/apps/web/public/fonts/gilroy/regular.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/regular.woff2
rename to apps/web/public/fonts/gilroy/regular.woff2
diff --git a/apps/web/assets/fonts/gilroy/semibold.woff2 b/apps/web/public/fonts/gilroy/semibold.woff2
similarity index 100%
rename from apps/web/assets/fonts/gilroy/semibold.woff2
rename to apps/web/public/fonts/gilroy/semibold.woff2
diff --git a/apps/web/public/images/pattern/circle.svg b/apps/web/public/images/pattern/circle.svg
new file mode 100644
index 0000000..748c072
--- /dev/null
+++ b/apps/web/public/images/pattern/circle.svg
@@ -0,0 +1,36 @@
+<svg width="290" height="315" viewBox="0 0 290 315" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_91_7007" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="290" height="315">
+<rect width="290" height="315" fill="#A1CCC9"/>
+</mask>
+<g mask="url(#mask0_91_7007)">
+<path opacity="0.0344828" d="M173.502 15.8024C174.496 14.6185 176.019 13.8498 178.111 13.5361C180.21 13.2213 182.832 13.3732 185.934 13.993C192.136 15.2327 200.096 18.3113 209.287 22.9867C227.656 32.3317 250.787 47.9777 274.309 67.7156C297.832 87.4534 317.257 107.516 329.65 123.983C335.85 132.222 340.264 139.527 342.562 145.42C343.711 148.366 344.316 150.923 344.37 153.044C344.425 155.159 343.932 156.793 342.939 157.977C341.945 159.16 340.422 159.929 338.33 160.243C336.231 160.558 333.609 160.406 330.507 159.786C324.305 158.546 316.345 155.468 307.154 150.792C288.785 141.447 265.654 125.801 242.132 106.063C218.609 86.3255 199.184 66.2634 186.791 49.7957C180.591 41.5569 176.177 34.2515 173.879 28.3591C172.73 25.4125 172.125 22.8562 172.071 20.7351C172.016 18.6203 172.509 16.9863 173.502 15.8024Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.0689655" d="M180.02 7.80014C181.113 6.70729 182.698 6.07438 184.809 5.94412C186.927 5.81348 189.526 6.1933 192.562 7.08112C198.632 8.85656 206.294 12.6174 215.042 18.0759C232.527 28.9864 254.206 46.5888 275.919 68.3017C297.632 90.0145 315.234 111.693 326.145 129.178C331.603 137.926 335.364 145.589 337.139 151.659C338.027 154.694 338.407 157.294 338.276 159.411C338.146 161.523 337.513 163.108 336.42 164.201C335.328 165.293 333.743 165.926 331.631 166.057C329.513 166.187 326.914 165.807 323.879 164.92C317.808 163.144 310.146 159.383 301.398 153.925C283.913 143.014 262.234 125.412 240.521 103.699C218.809 81.9862 201.206 60.3074 190.296 42.8223C184.837 34.0745 181.076 26.4122 179.301 20.3419C178.413 17.3063 178.033 14.707 178.164 12.5893C178.294 10.4779 178.927 8.89298 180.02 7.80014Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.103448" d="M187.133 0.393656C188.317 -0.599785 189.951 -1.09215 192.066 -1.03789C194.187 -0.983471 196.743 -0.378548 199.69 0.770462C205.582 3.0682 212.888 7.48251 221.127 13.6827C237.594 26.0756 257.656 45.5004 277.394 69.0231C297.132 92.5458 312.778 115.676 322.123 134.046C326.798 143.236 329.877 151.197 331.117 157.399C331.737 160.5 331.888 163.123 331.574 165.221C331.26 167.313 330.491 168.837 329.307 169.83C328.123 170.824 326.489 171.316 324.375 171.262C322.254 171.207 319.697 170.602 316.751 169.453C310.858 167.156 303.553 162.741 295.314 156.541C278.846 144.148 258.784 124.723 239.046 101.201C219.309 77.6781 203.663 54.5476 194.317 36.1781C189.642 26.9879 186.563 19.0269 185.324 12.825C184.704 9.72364 184.552 7.10111 184.867 5.00283C185.181 2.91078 185.949 1.3871 187.133 0.393656Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.137931" d="M194.787 -6.36921C196.053 -7.25568 197.724 -7.60376 199.826 -7.36539C201.934 -7.12632 204.428 -6.3009 207.263 -4.89945C212.933 -2.09689 219.826 2.93733 227.493 9.83195C242.818 23.6129 261.111 44.7124 278.723 69.8658C296.336 95.0193 309.907 119.425 317.615 138.539C321.472 148.102 323.845 156.301 324.539 162.587C324.886 165.731 324.809 168.357 324.313 170.42C323.818 172.476 322.919 173.927 321.653 174.814C320.387 175.7 318.716 176.048 316.614 175.81C314.506 175.571 312.012 174.746 309.177 173.344C303.507 170.542 296.614 165.507 288.947 158.613C273.623 144.832 255.33 123.732 237.717 98.5788C220.105 73.4254 206.534 49.0193 198.826 29.9052C194.969 20.3425 192.596 12.1435 191.902 5.85713C191.554 2.71355 191.632 0.0877686 192.128 -1.9751C192.623 -4.03184 193.521 -5.48273 194.787 -6.36921Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.172414" d="M202.925 -12.4416C204.263 -13.2144 205.958 -13.4155 208.031 -12.9948C210.11 -12.5729 212.523 -11.5333 215.225 -9.89007C220.629 -6.60403 227.057 -0.98821 234.094 6.5484C248.159 21.6126 264.544 44.2261 279.897 70.8189C295.25 97.4116 306.642 122.908 312.655 142.621C315.664 152.483 317.313 160.858 317.457 167.181C317.529 170.343 317.223 172.952 316.549 174.963C315.876 176.969 314.855 178.336 313.516 179.109C312.178 179.882 310.483 180.083 308.41 179.662C306.331 179.24 303.918 178.201 301.216 176.558C295.812 173.271 289.384 167.656 282.347 160.119C268.282 145.055 251.897 122.441 236.544 95.8486C221.191 69.2559 209.799 43.7599 203.786 24.0468C200.777 14.1843 199.128 5.80967 198.984 -0.513313C198.912 -3.6752 199.218 -6.28425 199.892 -8.296C200.565 -10.3018 201.586 -11.6688 202.925 -12.4416Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.206897" d="M211.482 -17.7852C212.883 -18.4383 214.589 -18.491 216.617 -17.8913C218.652 -17.2897 220.965 -16.0438 223.514 -14.1713C228.611 -10.4268 234.525 -4.27211 240.878 3.84913C253.577 20.0819 267.928 44.0374 280.905 71.867C293.882 99.6967 303.009 126.088 307.281 146.251C309.418 156.338 310.332 164.824 309.924 171.136C309.72 174.292 309.188 176.864 308.341 178.81C307.496 180.749 306.359 182.022 304.959 182.675C303.558 183.328 301.852 183.381 299.823 182.781C297.789 182.18 295.476 180.934 292.927 179.061C287.83 175.317 281.916 169.162 275.563 161.041C262.864 144.808 248.513 120.853 235.536 93.0231C222.559 65.1934 213.432 38.8016 209.16 18.6394C207.023 8.55224 206.109 0.0657298 206.517 -6.24573C206.721 -9.40185 207.253 -11.9743 208.1 -13.9196C208.945 -15.8592 210.082 -17.132 211.482 -17.7852Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.241379" d="M220.395 -22.3666C221.848 -22.8952 223.552 -22.799 225.52 -22.0247C227.495 -21.2481 229.69 -19.8054 232.066 -17.7179C236.817 -13.5434 242.172 -6.89668 247.794 1.74738C259.029 19.0252 271.238 44.1402 281.74 72.995C292.243 101.85 299.034 128.937 301.533 149.394C302.783 159.63 302.953 168.163 301.997 174.415C301.518 177.542 300.764 180.058 299.751 181.922C298.74 183.781 297.497 184.949 296.045 185.478C294.592 186.007 292.889 185.91 290.92 185.136C288.945 184.36 286.75 182.917 284.374 180.829C279.623 176.655 274.268 170.008 268.647 161.364C257.411 144.086 245.202 118.971 234.7 90.1164C224.198 61.2616 217.406 34.1748 214.907 13.717C213.657 3.48192 213.487 -5.0519 214.443 -11.3038C214.922 -14.4301 215.676 -16.9464 216.689 -18.8105C217.7 -20.6691 218.943 -21.838 220.395 -22.3666Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.275862" d="M229.597 -26.156C231.09 -26.556 232.779 -26.3117 234.673 -25.3688C236.572 -24.4231 238.633 -22.7945 240.818 -20.5079C245.188 -15.9351 249.943 -8.84701 254.79 0.254084C264.477 18.4454 274.45 44.5289 282.398 74.1893C290.345 103.85 294.75 131.425 295.456 152.023C295.809 162.328 295.235 170.844 293.737 176.989C292.989 180.062 292.018 182.503 290.846 184.271C289.677 186.035 288.337 187.091 286.844 187.491C285.351 187.891 283.662 187.647 281.768 186.704C279.869 185.758 277.808 184.129 275.623 181.843C271.254 177.27 266.498 170.182 261.652 161.081C251.964 142.89 241.991 116.806 234.044 87.1456C226.096 57.4853 221.692 29.9097 220.985 9.3119C220.632 -0.993154 221.206 -9.50933 222.704 -15.6541C223.453 -18.7268 224.423 -21.1678 225.595 -22.9365C226.764 -24.6999 228.105 -25.756 229.597 -26.156Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.310345" d="M239.016 -29.1333C240.538 -29.4017 242.199 -29.0111 244.003 -27.9067C245.813 -26.7991 247.724 -24.997 249.702 -22.5286C253.656 -17.5925 257.775 -10.1169 261.81 -0.62804C269.875 18.3384 277.537 45.1919 282.869 75.432C288.201 105.672 290.186 133.527 289.094 154.108C288.548 164.404 287.234 172.838 285.206 178.829C284.193 181.825 283.013 184.172 281.691 185.832C280.373 187.486 278.946 188.422 277.424 188.69C275.902 188.958 274.241 188.568 272.436 187.463C270.627 186.356 268.715 184.554 266.738 182.085C262.784 177.149 258.664 169.674 254.629 160.185C246.564 141.218 238.902 114.365 233.57 84.1247C228.238 53.8846 226.254 26.03 227.345 5.44908C227.891 -4.84756 229.206 -13.2813 231.233 -19.2721C232.247 -22.2679 233.427 -24.615 234.748 -26.2748C236.066 -27.9297 237.494 -28.8649 239.016 -29.1333Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.344828" d="M248.582 -31.2813C250.122 -31.416 251.743 -30.8821 253.444 -29.6247C255.15 -28.3635 256.897 -26.4017 258.652 -23.7704C262.161 -18.5084 265.613 -10.7022 268.805 -0.897811C275.187 18.6993 280.479 46.1184 283.155 76.7082C285.831 107.298 285.381 135.22 282.5 155.627C281.058 165.837 279.014 174.124 276.472 179.915C275.201 182.811 273.821 185.047 272.36 186.585C270.903 188.119 269.399 188.926 267.859 189.061C266.32 189.195 264.699 188.661 262.998 187.404C261.291 186.143 259.544 184.181 257.79 181.55C254.281 176.288 250.829 168.482 247.636 158.677C241.255 139.08 235.962 111.661 233.286 81.0712C230.61 50.4814 231.061 22.5599 233.942 2.15235C235.383 -8.0575 237.428 -16.3446 239.97 -22.1359C241.241 -25.032 242.62 -27.2673 244.082 -28.8056C245.539 -30.3393 247.042 -31.1466 248.582 -31.2813Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.37931" d="M258.22 -32.5918C259.766 -32.5918 261.334 -31.9187 262.919 -30.5178C264.509 -29.1127 266.078 -27.0061 267.597 -24.2319C270.634 -18.6841 273.393 -10.6068 275.719 -0.561401C280.368 19.5173 283.25 47.2933 283.25 78C283.25 108.707 280.368 136.483 275.719 156.561C273.393 166.607 270.634 174.684 267.597 180.232C266.078 183.006 264.509 185.113 262.919 186.518C261.334 187.919 259.766 188.592 258.22 188.592C256.675 188.592 255.106 187.919 253.521 186.518C251.931 185.113 250.362 183.006 248.843 180.232C245.806 174.684 243.048 166.607 240.722 156.561C236.073 136.483 233.19 108.707 233.19 78C233.19 47.2933 236.073 19.5173 240.722 -0.561401C243.048 -10.6068 245.806 -18.6841 248.843 -24.2319C250.362 -27.0061 251.931 -29.1127 253.521 -30.5178C255.106 -31.9187 256.675 -32.5918 258.22 -32.5918Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.413793" d="M267.859 -33.06C269.399 -32.9253 270.903 -32.1181 272.36 -30.5844C273.821 -29.0461 275.201 -26.8107 276.472 -23.9147C279.014 -18.1233 281.058 -9.83625 282.5 0.373598C285.381 20.7811 285.831 48.7026 283.155 79.2924C280.479 109.882 275.187 137.301 268.805 156.898C265.613 166.703 262.161 174.509 258.652 179.771C256.897 182.402 255.15 184.364 253.444 185.625C251.743 186.883 250.122 187.417 248.582 187.282C247.042 187.147 245.539 186.34 244.082 184.806C242.62 183.268 241.241 181.033 239.97 178.137C237.428 172.345 235.383 164.058 233.942 153.848C231.061 133.441 230.61 105.519 233.286 74.9295C235.962 44.3397 241.255 16.9206 247.636 -2.67657C250.829 -12.481 254.281 -20.2872 257.79 -25.5492C259.544 -28.1805 261.291 -30.1422 262.998 -31.4034C264.699 -32.6608 266.32 -33.1947 267.859 -33.06Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.448276" d="M277.425 -32.6899C278.947 -32.4215 280.374 -31.4863 281.692 -29.8314C283.014 -28.1716 284.193 -25.8245 285.207 -22.8287C287.235 -16.8378 288.549 -8.40411 289.095 1.89252C290.187 22.4735 288.202 50.3281 282.87 80.5682C277.538 110.808 269.876 137.662 261.811 156.628C257.776 166.117 253.657 173.593 249.702 178.529C247.725 180.997 245.814 182.799 244.004 183.907C242.2 185.011 240.538 185.402 239.016 185.134C237.494 184.865 236.067 183.93 234.749 182.275C233.427 180.615 232.248 178.268 231.234 175.272C229.206 169.281 227.892 160.848 227.346 150.551C226.254 129.97 228.239 102.116 233.571 71.8755C238.903 41.6353 246.565 14.7818 254.63 -4.18459C258.665 -13.6735 262.784 -21.1491 266.739 -26.0852C268.716 -28.5536 270.627 -30.3556 272.437 -31.4633C274.241 -32.5676 275.902 -32.9582 277.425 -32.6899Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.482759" d="M286.844 -31.4902C288.337 -31.0902 289.677 -30.0341 290.846 -28.2706C292.018 -26.502 292.989 -24.061 293.737 -20.9882C295.235 -14.8435 295.809 -6.32729 295.456 3.97777C294.75 24.5756 290.345 52.1512 282.398 81.8115C274.45 111.472 264.477 137.555 254.79 155.747C249.943 164.848 245.188 171.936 240.818 176.509C238.633 178.795 236.572 180.424 234.673 181.37C232.779 182.313 231.09 182.557 229.597 182.157C228.105 181.757 226.764 180.701 225.595 178.937C224.423 177.169 223.453 174.728 222.704 171.655C221.206 165.51 220.632 156.994 220.985 146.689C221.692 126.091 226.096 98.5155 234.044 68.8552C241.991 39.1948 251.964 13.1113 261.652 -5.08005C266.498 -14.1811 271.254 -21.2693 275.623 -25.842C277.808 -28.1286 279.869 -29.7572 281.768 -30.7029C283.662 -31.6459 285.351 -31.8902 286.844 -31.4902Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.517241" d="M296.045 -29.4783C297.497 -28.9497 298.741 -27.7808 299.751 -25.9222C300.764 -24.0581 301.519 -21.5418 301.997 -18.4155C302.953 -12.1636 302.783 -3.62979 301.533 6.60526C299.034 27.0631 292.243 54.1499 281.741 83.0047C271.238 111.86 259.03 136.975 247.794 154.252C242.172 162.896 236.817 169.543 232.066 173.718C229.69 175.805 227.495 177.248 225.52 178.024C223.552 178.799 221.848 178.895 220.396 178.366C218.943 177.838 217.7 176.669 216.69 174.81C215.676 172.946 214.922 170.43 214.444 167.304C213.487 161.052 213.657 152.518 214.908 142.283C217.406 121.825 224.198 94.7381 234.7 65.8833C245.202 37.0285 257.411 11.9135 268.647 -5.36433C274.268 -14.0084 279.623 -20.6551 284.374 -24.8296C286.75 -26.9171 288.946 -28.3599 290.92 -29.1364C292.889 -29.9107 294.593 -30.0069 296.045 -29.4783Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.551724" d="M304.958 -26.6749C306.359 -26.0217 307.496 -24.7489 308.34 -22.8093C309.188 -20.864 309.72 -18.2916 309.924 -15.1354C310.331 -8.82398 309.418 -0.337471 307.281 9.74968C303.008 29.9119 293.882 56.3037 280.905 84.1334C267.928 111.963 253.577 135.918 240.878 152.151C234.524 160.272 228.61 166.427 223.513 170.172C220.965 172.044 218.652 173.29 216.617 173.892C214.589 174.491 212.883 174.439 211.482 173.786C210.081 173.132 208.945 171.86 208.1 169.92C207.253 167.975 206.721 165.402 206.517 162.246C206.109 155.935 207.022 147.448 209.16 137.361C213.432 117.199 222.558 90.807 235.536 62.9773C248.513 35.1476 262.864 11.1922 275.563 -5.04058C281.916 -13.1618 287.83 -19.3165 292.927 -23.061C295.476 -24.9335 297.789 -26.1794 299.823 -26.781C301.852 -27.3807 303.558 -27.3281 304.958 -26.6749Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.586207" d="M313.516 -23.1091C314.855 -22.3364 315.876 -20.9693 316.549 -18.9635C317.223 -16.9518 317.529 -14.3427 317.457 -11.1808C317.313 -4.85785 315.664 3.51676 312.655 13.3792C306.642 33.0924 295.25 58.5883 279.897 85.1811C264.544 111.774 248.159 134.387 234.094 149.452C227.057 156.988 220.629 162.604 215.225 165.89C212.523 167.533 210.11 168.573 208.031 168.995C205.958 169.415 204.263 169.214 202.925 168.442C201.586 167.669 200.565 166.302 199.892 164.296C199.218 162.284 198.912 159.675 198.984 156.513C199.128 150.19 200.777 141.816 203.786 131.953C209.799 112.24 221.191 86.7441 236.544 60.1513C251.897 33.5586 268.282 10.9451 282.347 -4.11913C289.384 -11.6557 295.812 -17.2716 301.216 -20.5576C303.918 -22.2008 306.331 -23.2405 308.41 -23.6624C310.483 -24.083 312.178 -23.8819 313.516 -23.1091Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.62069" d="M321.653 -18.8135C322.919 -17.927 323.817 -16.4761 324.312 -14.4194C324.809 -12.3565 324.886 -9.73072 324.539 -6.58714C323.844 -0.300754 321.471 7.89823 317.615 17.461C309.906 36.575 296.336 60.9811 278.723 86.1345C261.11 111.288 242.818 132.387 227.493 146.168C219.826 153.063 212.933 158.097 207.263 160.9C204.428 162.301 201.934 163.127 199.826 163.366C197.724 163.604 196.053 163.256 194.787 162.37C193.521 161.483 192.622 160.032 192.128 157.975C191.631 155.913 191.554 153.287 191.901 150.143C192.595 143.857 194.969 135.658 198.825 126.095C206.534 106.981 220.104 82.575 237.717 57.4216C255.329 32.2682 273.622 11.1687 288.947 -2.61232C296.614 -9.50694 303.507 -14.5412 309.177 -17.3437C312.012 -18.7452 314.506 -19.5706 316.614 -19.8097C318.716 -20.048 320.387 -19.7 321.653 -18.8135Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.655172" d="M329.307 -13.8298C330.491 -12.8363 331.26 -11.3127 331.573 -9.2206C331.888 -7.12232 331.736 -4.4998 331.116 -1.39844C329.877 4.80351 326.798 12.7645 322.123 21.9547C312.778 40.3242 297.132 63.4546 277.394 86.9773C257.656 110.5 237.594 129.925 221.126 142.318C212.887 148.518 205.582 152.932 199.69 155.23C196.743 156.379 194.187 156.984 192.066 157.038C189.951 157.093 188.317 156.6 187.133 155.607C185.949 154.613 185.18 153.09 184.867 150.998C184.552 148.899 184.704 146.277 185.324 143.175C186.563 136.973 189.642 129.012 194.317 119.822C203.662 101.453 219.308 78.3223 239.046 54.7997C258.784 31.277 278.846 11.8521 295.314 -0.540767C303.552 -6.74092 310.858 -11.1552 316.75 -13.453C319.697 -14.602 322.253 -15.2069 324.374 -15.2613C326.489 -15.3156 328.123 -14.8232 329.307 -13.8298Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.689655" d="M336.421 -8.20078C337.513 -7.10794 338.146 -5.52306 338.277 -3.41162C338.407 -1.29389 338.027 1.30542 337.14 4.34095C335.364 10.4113 331.603 18.0736 326.145 26.8214C315.234 44.3065 297.632 65.9853 275.919 87.6982C254.206 109.411 232.527 127.013 215.042 137.924C206.294 143.382 198.632 147.143 192.562 148.919C189.526 149.807 186.927 150.186 184.809 150.056C182.698 149.925 181.113 149.293 180.02 148.2C178.927 147.107 178.294 145.522 178.164 143.411C178.033 141.293 178.413 138.693 179.301 135.658C181.077 129.588 184.837 121.925 190.296 113.178C201.206 95.6924 218.809 74.0136 240.522 52.3007C262.235 30.5879 283.913 12.9854 301.398 2.07495C310.146 -3.38356 317.809 -7.14436 323.879 -8.91979C326.914 -9.80762 329.514 -10.1874 331.631 -10.0568C333.743 -9.92654 335.328 -9.29363 336.421 -8.20078Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.724138" d="M342.938 -1.97613C343.932 -0.792194 344.424 0.841809 344.37 2.95657C344.316 5.07762 343.711 7.63394 342.562 10.5805C340.264 16.473 335.85 23.7784 329.649 32.0172C317.256 48.4848 297.832 68.547 274.309 88.2848C250.786 108.023 227.656 123.669 209.286 133.014C200.096 137.689 192.135 140.768 185.933 142.007C182.832 142.627 180.209 142.779 178.111 142.464C176.019 142.151 174.495 141.382 173.502 140.198C172.508 139.014 172.016 137.38 172.07 135.265C172.125 133.144 172.73 130.588 173.879 127.641C176.176 121.749 180.591 114.443 186.791 106.205C199.184 89.737 218.609 69.6749 242.131 49.937C265.654 30.1992 288.784 14.5532 307.154 5.20812C316.344 0.532805 324.305 -2.54588 330.507 -3.78549C333.608 -4.40537 336.231 -4.5572 338.329 -4.24248C340.421 -3.9287 341.945 -3.16007 342.938 -1.97613Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.758621" d="M348.812 4.78842C349.698 6.05443 350.046 7.72513 349.808 9.82712C349.569 11.9354 348.743 14.4292 347.342 17.2645C344.539 22.9343 339.505 29.8271 332.61 37.4941C318.829 52.819 297.73 71.1118 272.577 88.7244C247.423 106.337 223.017 119.908 203.903 127.616C194.34 131.473 186.141 133.846 179.855 134.54C176.711 134.887 174.086 134.81 172.023 134.314C169.966 133.819 168.515 132.92 167.629 131.654C166.742 130.388 166.394 128.717 166.632 126.615C166.871 124.507 167.697 122.013 169.098 119.178C171.901 113.508 176.935 106.615 183.83 98.9484C197.611 83.6235 218.71 65.3307 243.864 47.7181C269.017 30.1055 293.423 16.535 312.537 8.82651C322.1 4.96996 330.299 2.59684 336.585 1.90248C339.729 1.55526 342.355 1.63257 344.417 2.12897C346.474 2.6239 347.925 3.5224 348.812 4.78842Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.793103" d="M353.995 12.0368C354.768 13.3753 354.969 15.07 354.549 17.1432C354.127 19.2226 353.087 21.635 351.444 24.3373C348.158 29.7413 342.542 36.1691 335.005 43.2061C319.941 57.2716 297.328 73.6558 270.735 89.0091C244.142 104.362 218.646 115.754 198.933 121.767C189.071 124.776 180.696 126.425 174.373 126.569C171.211 126.641 168.602 126.335 166.59 125.661C164.584 124.989 163.217 123.967 162.445 122.629C161.672 121.29 161.471 119.596 161.891 117.522C162.313 115.443 163.353 113.03 164.996 110.328C168.282 104.924 173.898 98.4963 181.435 91.4594C196.499 77.3939 219.112 61.0097 245.705 45.6563C272.298 30.303 297.794 18.9113 317.507 12.898C327.369 9.8896 335.744 8.2401 342.067 8.09628C345.229 8.02436 347.838 8.33023 349.85 9.00453C351.855 9.67683 353.223 10.6984 353.995 12.0368Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.827586" d="M358.45 19.7059C359.103 21.1067 359.156 22.8124 358.556 24.8411C357.955 26.8758 356.709 29.1884 354.836 31.7372C351.092 36.8342 344.937 42.7482 336.816 49.1015C320.583 61.8005 296.628 76.1515 268.798 89.1287C240.968 102.106 214.577 111.232 194.414 115.504C184.327 117.642 175.841 118.555 169.529 118.147C166.373 117.943 163.801 117.411 161.855 116.564C159.916 115.72 158.643 114.583 157.99 113.182C157.337 111.781 157.284 110.076 157.884 108.047C158.485 106.012 159.731 103.7 161.604 101.151C165.348 96.0539 171.503 90.1399 179.624 83.7866C195.857 71.0876 219.812 56.7366 247.642 43.7594C275.472 30.7822 301.863 21.6559 322.026 17.3837C332.113 15.2463 340.599 14.333 346.911 14.7408C350.067 14.9447 352.639 15.4768 354.585 16.3239C356.524 17.1684 357.797 18.3052 358.45 19.7059Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.862069" d="M362.143 27.7304C362.672 29.1827 362.575 30.8866 361.801 32.8552C361.025 34.8298 359.582 37.025 357.494 39.4009C353.32 44.1522 346.673 49.5072 338.029 55.1285C320.751 66.3645 295.636 78.573 266.781 89.0753C237.927 99.5776 210.84 106.369 190.382 108.868C180.147 110.118 171.613 110.288 165.361 109.332C162.235 108.853 159.718 108.099 157.854 107.086C155.996 106.075 154.827 104.832 154.298 103.38C153.77 101.927 153.866 100.223 154.64 98.2548C155.417 96.2803 156.86 94.085 158.947 91.7091C163.122 86.9579 169.768 81.6028 178.412 75.9815C195.69 64.7456 220.805 52.537 249.66 42.0348C278.515 31.5325 305.602 24.7411 326.059 22.2424C336.294 20.9923 344.828 20.822 351.08 21.7784C354.206 22.2566 356.723 23.0109 358.587 24.0243C360.445 25.0347 361.614 26.2781 362.143 27.7304Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.896552" d="M365.044 36.0427C365.444 37.5355 365.199 39.2245 364.257 41.1182C363.311 43.0176 361.682 45.0787 359.396 47.2637C354.823 51.633 347.735 56.3884 338.634 61.2349C320.442 70.9222 294.359 80.8954 264.698 88.8428C235.038 96.7903 207.462 101.195 186.865 101.901C176.56 102.255 168.043 101.68 161.899 100.183C158.826 99.4339 156.385 98.4632 154.616 97.2912C152.853 96.1226 151.797 94.7821 151.397 93.2892C150.997 91.7964 151.241 90.1074 152.184 88.2137C153.13 86.3144 154.758 84.2532 157.045 82.0683C161.618 77.6989 168.706 72.9436 177.807 68.097C195.998 58.4097 222.082 48.4366 251.742 40.4891C281.402 32.5416 308.978 28.1369 329.576 27.4307C339.881 27.0774 348.397 27.6516 354.542 29.1491C357.615 29.898 360.056 30.8688 361.824 32.0408C363.588 33.2093 364.644 34.5498 365.044 36.0427Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.931035" d="M367.132 44.5724C367.401 46.0944 367.01 47.7557 365.906 49.56C364.798 51.3697 362.996 53.281 360.528 55.2584C355.592 59.2125 348.116 63.332 338.627 67.3669C319.661 75.4319 292.807 83.0938 262.567 88.4259C232.327 93.7581 204.472 95.7427 183.891 94.651C173.595 94.1048 165.161 92.7906 159.17 90.7631C156.174 89.7493 153.827 88.5695 152.167 87.2478C150.513 85.93 149.577 84.5026 149.309 82.9805C149.041 81.4585 149.431 79.7972 150.536 77.9929C151.643 76.1832 153.445 74.2718 155.914 72.2945C160.85 68.3404 168.325 64.2209 177.814 60.186C196.781 52.121 223.634 44.4591 253.874 39.127C284.114 33.7948 311.969 31.8102 332.55 32.9019C342.847 33.4481 351.28 34.7623 357.271 36.7898C360.267 37.8036 362.614 38.9834 364.274 40.3051C365.929 41.6228 366.864 43.0503 367.132 44.5724Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path opacity="0.965517" d="M368.392 53.249C368.526 54.7886 367.992 56.4096 366.735 58.1107C365.474 59.817 363.512 61.564 360.881 63.3187C355.619 66.8276 347.813 70.2799 338.008 73.4724C318.411 79.8537 290.992 85.146 260.402 87.8222C229.812 90.4985 201.891 90.0479 181.483 87.1666C171.273 85.7251 162.986 83.6808 157.195 81.1389C154.299 79.8678 152.064 78.488 150.525 77.0266C148.992 75.5696 148.184 74.0661 148.05 72.5264C147.915 70.9868 148.449 69.3659 149.706 67.6647C150.967 65.9585 152.929 64.2114 155.561 62.4567C160.823 58.9478 168.629 55.4956 178.433 52.303C198.03 45.9218 225.449 40.6295 256.039 37.9532C286.629 35.277 314.55 35.7276 334.958 38.6089C345.168 40.0504 353.455 42.0947 359.246 44.6365C362.142 45.9076 364.378 47.2875 365.916 48.7488C367.45 50.2058 368.257 51.7094 368.392 53.249Z" stroke="#80C3B1" stroke-width="1.5"/>
+<path d="M368.813 61.9995C368.813 63.545 368.139 65.1132 366.738 66.6983C365.333 68.2882 363.227 69.8576 360.453 71.3762C354.905 74.4132 346.827 77.172 336.782 79.4978C316.703 84.1468 288.927 87.0292 258.221 87.0292C227.514 87.0292 199.738 84.1468 179.659 79.4978C169.614 77.172 161.537 74.4132 155.989 71.3762C153.215 69.8576 151.108 68.2882 149.703 66.6983C148.302 65.1132 147.629 63.545 147.629 61.9995C147.629 60.454 148.302 58.8857 149.703 57.3006C151.108 55.7108 153.215 54.1414 155.989 52.6227C161.537 49.5858 169.614 46.827 179.659 44.5011C199.738 39.8521 227.514 36.9697 258.221 36.9697C288.927 36.9697 316.703 39.8521 336.782 44.5011C346.827 46.827 354.905 49.5858 360.453 52.6227C363.227 54.1414 365.333 55.7108 366.738 57.3006C368.139 58.8857 368.813 60.454 368.813 61.9995Z" stroke="#80C3B1" stroke-width="1.5"/>
+</g>
+</svg>
diff --git a/apps/web/public/images/pattern/poly.svg b/apps/web/public/images/pattern/poly.svg
new file mode 100644
index 0000000..29d8174
--- /dev/null
+++ b/apps/web/public/images/pattern/poly.svg
@@ -0,0 +1,33 @@
+<svg width="814" height="660" viewBox="0 0 814 660" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_214_28" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="814" height="660">
+<rect width="814" height="660" fill="white"/>
+</mask>
+<g mask="url(#mask0_214_28)">
+<g opacity="0.5">
+<circle cx="1232.98" cy="407.195" r="488.667" transform="rotate(-30.0783 1232.98 407.195)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1208.34" cy="375.334" r="488.667" transform="rotate(-30.0783 1208.34 375.334)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1183.71" cy="343.474" r="488.667" transform="rotate(-30.0783 1183.71 343.474)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1159.08" cy="311.614" r="488.667" transform="rotate(-30.0783 1159.08 311.614)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1134.44" cy="279.754" r="488.667" transform="rotate(-30.0783 1134.44 279.754)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1109.81" cy="247.893" r="488.667" transform="rotate(-30.0783 1109.81 247.893)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1085.18" cy="216.033" r="488.667" transform="rotate(-30.0783 1085.18 216.033)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1060.54" cy="184.173" r="488.667" transform="rotate(-30.0783 1060.54 184.173)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1035.91" cy="152.313" r="488.667" transform="rotate(-30.0783 1035.91 152.313)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="1011.28" cy="120.452" r="488.667" transform="rotate(-30.0783 1011.28 120.452)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="986.645" cy="88.592" r="488.667" transform="rotate(-30.0783 986.645 88.592)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="962.012" cy="56.7317" r="488.667" transform="rotate(-30.0783 962.012 56.7317)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="937.375" cy="24.8714" r="488.667" transform="rotate(-30.0783 937.375 24.8714)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="912.745" cy="-6.98884" r="488.667" transform="rotate(-30.0783 912.745 -6.98884)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="888.108" cy="-38.8491" r="488.667" transform="rotate(-30.0783 888.108 -38.8491)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="863.477" cy="-70.7094" r="488.667" transform="rotate(-30.0783 863.477 -70.7094)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="838.844" cy="-102.57" r="488.667" transform="rotate(-30.0783 838.844 -102.57)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="814.209" cy="-134.43" r="488.667" transform="rotate(-30.0783 814.209 -134.43)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="789.577" cy="-166.29" r="488.667" transform="rotate(-30.0783 789.577 -166.29)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="764.942" cy="-198.15" r="488.667" transform="rotate(-30.0783 764.942 -198.15)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="740.309" cy="-230.011" r="488.667" transform="rotate(-30.0783 740.309 -230.011)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="715.676" cy="-261.871" r="488.667" transform="rotate(-30.0783 715.676 -261.871)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="691.041" cy="-293.731" r="488.667" transform="rotate(-30.0783 691.041 -293.731)" stroke="#E6E6E6" stroke-width="2"/>
+<circle cx="666.409" cy="-325.591" r="488.667" transform="rotate(-30.0783 666.409 -325.591)" stroke="#E6E6E6" stroke-width="2"/>
+</g>
+</g>
+</svg>
diff --git a/apps/web/types/component.d.ts b/apps/web/types/component.d.ts
index cd51573..53ad69c 100644
--- a/apps/web/types/component.d.ts
+++ b/apps/web/types/component.d.ts
@@ -1,6 +1,7 @@
 export interface BaseButtonProps {
   class?: string
   type?: 'button' | 'submit'
+  link?: string
 }
 
 export interface BaseButtonEmits {
diff --git a/package-lock.json b/package-lock.json
index e2b6628..228c3ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,11 +45,13 @@
       "hasInstallScript": true,
       "dependencies": {
         "@flaticon/flaticon-uicons": "^2.2.0",
+        "defu": "^6.1.2",
         "gsap": "^3.11.5",
         "highlight.js": "^11.8.0",
         "markdown-it": "^13.0.1",
         "markdown-it-attrs": "^4.1.6",
-        "vee-validate": "^4.9.5"
+        "vee-validate": "^4.9.5",
+        "yup": "^1.2.0"
       },
       "devDependencies": {
         "@nuxt/devtools": "^0.5.5",
@@ -78,6 +80,28 @@
       "integrity": "sha512-NpaM49IGQQAUlBhHMF82QH80J08os4ZmyF9MkpCzWAGuOHqE4gTEbhzd7L3l5LmWuZ6E0OiC1FweQ4tsiW35+g==",
       "dev": true
     },
+    "apps/web/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/web/node_modules/yup": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.2.0.tgz",
+      "integrity": "sha512-PPqYKSAXjpRCgLgLKVGPA33v5c/WgEx3wi6NFjIiegz90zSwyMpvTFp/uGcVnnbx6to28pgnzp/q8ih3QRjLMQ==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -10823,8 +10847,7 @@
     "node_modules/defu": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.2.tgz",
-      "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==",
-      "dev": true
+      "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ=="
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
@@ -23461,6 +23484,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",