Update fonts and colors

assets/styles/colors.scss

@@ -1,7 +1,4 @@
-$white: #f0f3f5;
-$white-2: #c7c7c8;
-$grey: #414141;
-$green: #4ab6a1;
-$green-opacity: #4ab6a07c;
-$black: #000000;
-$dark-blue: #021d30;
+$white: #ffffff;
+$black: #232323;
+$blue: #00e2ed;
+$grey: #707070;

assets/styles/fonts.scss

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500&display=swap');
+@font-face {
+  font-family: 'NimbusMono';
+  src: url('../fonts/nimbusmono-regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'NimbusMono';
+  src: url('../fonts/nimbusmono-bold.woff') format('woff');
+  font-weight: bold;
+  font-style: bold;
+  font-display: swap;
+}

assets/styles/main.scss

@@ -1,21 +1,10 @@
 @import '~/assets/styles/colors.scss';
-@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap');
+@import '~/assets/styles/fonts.scss';
 
 html {
   height: 100%;
   margin: 0;
   padding: 0;
-  color: white;
-  background-color: black;
-}
-
-body {
-  font-family: 'Almarai';
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-h3 {
-  margin: 0;
+  color: $white;
+  background-color: $black;
 }

assets/styles/tailwind.css

@@ -1,3 +1,33 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  /* Titles */
+  .title-h1 {
+    @apply font-title text-4xl;
+  }
+  .title-h2 {
+    @apply font-title text-2xl;
+  }
+  /* Button */
+  .btn {
+    @apply w-full py-sm px-md cursor-pointer;
+  }
+  .btn-primary {
+    @apply font-semibold rounded-full shadow-md bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80;
+  }
+  .btn-secondary {
+    @apply font-semibold rounded-full shadow-md bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2;
+  }
+  .btn-disabled {
+    @apply cursor-not-allowed font-semibold rounded-full shadow-md bg-wit-blue-500 text-black-950 bg-opacity-80;
+  }
+  /* Navbar */
+  .navbar-links {
+    @apply bg-black-950;
+  }
+  .nav-link {
+    @apply text-white-50 hover:text-gray-500;
+  }
+}

components/CustomButton.vue

@@ -1,15 +1,11 @@
 <template>
-  <button class="btn" :class="[type]">
-    <div class="btn-content">
-      <slot> </slot>
-      <ArrowIcon />
-    </div>
+  <button class="btn" :class="`btn-${type}`">
+    <slot> </slot>
   </button>
 </template>
 
 <script setup>
 import { ButtonType } from '@/types'
-import ArrowIcon from '@/assets/svg/arrow.svg?component'
 
 defineProps({
   type: {
@@ -21,59 +17,3 @@ defineProps({
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.btn {
-  width: 100%;
-  color: $white;
-  padding: 8px 24px;
-  border-radius: 24px;
-  border: none;
-  cursor: pointer;
-  &:hover .arrow-right {
-    transform: translateX(4px) translateY(-2px);
-  }
-  .arrow-right {
-    width: 24px;
-  }
-  .btn-content {
-    font-size: 16px;
-    justify-content: center;
-    align-items: center;
-    display: grid;
-    grid-template-columns: repeat(2, max-content);
-  }
-  &.primary {
-    color: $white;
-    -webkit-transition: all 3ms linear;
-    -ms-transition: all 3ms linear;
-    transition: all 3ms linear;
-    background-color: $green;
-    border: 1.5px solid $green;
-    .arrow {
-      stroke: $white;
-    }
-  }
-  &.secondary {
-    color: $white;
-    -webkit-transition: all 3ms linear;
-    -ms-transition: all 3ms linear;
-    transition: all 3ms linear;
-    border: 1.5px solid $green;
-    background-color: transparent;
-    .arrow {
-      stroke: $white;
-    }
-  }
-  &.disabled {
-    color: $black;
-    -webkit-transition: all 3ms linear;
-    -ms-transition: all 3ms linear;
-    transition: all 3ms linear;
-    background-color: $white;
-    border: none;
-    cursor: no-drop;
-    opacity: 0.7;
-  }
-}
-</style>

components/FooterSection.vue

@@ -1,15 +1,6 @@
 <template>
-  <div class="footer-container">
-    <h2>Footer</h2>
+  <div class="grid grid-cols-[max-content_max-content] place-content-between">
+    <h2 class="title-h2">Footer</h2>
     <LanguageSwitcher />
   </div>
 </template>
-
-<style>
-.footer-container {
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  justify-content: space-between;
-  color: white;
-}
-</style>

components/IconExternalLink.vue

@@ -0,0 +1,17 @@
+<template>
+  <a class="link" :href="url" target="_blank">
+    <icon class="h-auto w-lg" />
+  </a>
+</template>
+<script setup lang="ts">
+defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: Object,
+    required: true,
+  },
+})
+</script>

components/LanguageSwitcher.vue

@@ -6,17 +6,22 @@
     :filterable="false"
     :searchable="false"
     class="language-selector"
+    :class="{ flag: flag }"
   >
     <template #selected-option-container="{ option }">
-      <span class="vs__selected">
+      <span v-if="flag" class="vs__selected">
         <component :is="iconMap[(option as Option).label]" />
       </span>
+      <span v-else class="vs__selected">
+        {{ languageLocales[(option as Option).label].name }}
+      </span>
     </template>
 
     <template #option="option">
       <div class="option">
         <component
           :is="iconMap[(option as Option).label]"
+          v-if="flag"
           class="dropdown-items"
         />
         <span>{{ languageLocales[(option as Option).label].name }}</span>
@@ -33,6 +38,13 @@ import enUSIcon from '@/assets/svg/flag-eeuu.svg?component'
 import 'vue-select/dist/vue-select.css'
 const { locale, setLocale } = useI18n()
 
+defineProps({
+  flag: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 type Option = {
   label: localeCodes
 }
@@ -42,7 +54,7 @@ interface Dictionary {
 
 const language = computed({
   get: () => locale.value,
-  set: (value) => {
+  set: (value: any) => {
     setLocale(value)
   },
 })
@@ -89,7 +101,14 @@ const iconMap: Dictionary = computed(() => {
   .vs__dropdown-menu {
     width: 80px;
     top: -90px;
-    left: -110px;
+    left: -16px;
+  }
+  &.flag {
+    .vs__dropdown-menu {
+      width: 80px;
+      top: -90px;
+      left: -110px;
+    }
   }
   .vs__open-indicator {
     font-size: 8px;
@@ -130,6 +149,7 @@ const iconMap: Dictionary = computed(() => {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    font-size: 16px;
   }
   &:hover {
     .vs__selected {