added library and new tone

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "dev": "vite --port=3000",
     "build": "vite build",
+    "build:watch": "vite build --watch & vite preview",
     "preview": "vite build && vite preview",
     "start": "pnpm dev",
     "type-check": "vue-tsc --noEmit --composite false",

src/components/Layout/AppHeader.vue

@@ -25,7 +25,7 @@
               :key="item.name"
               :class="[
                 index === currentActiveIndex
-                  ? 'border-indigo-500 text-gray-900'
+                  ? 'border-emerald-500 text-gray-900'
                   : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
                 'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium',
               ]"
@@ -41,7 +41,7 @@
           <a
             href="https://github.com/shipsaas"
             target="_blank"
-            class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex gap-1"
+            class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 flex gap-1"
           >
             <span>GitHub</span>
             <LinkIcon class="h-6 w-6" aria-hidden="true" />
@@ -50,7 +50,7 @@
         <div class="-mr-2 flex items-center sm:hidden">
           <!-- Mobile menu button -->
           <DisclosureButton
-            class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
           >
             <span class="sr-only">Open main menu</span>
             <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
@@ -69,7 +69,7 @@
           href="javascript:void(0);"
           :class="[
             index === currentActiveIndex
-              ? 'border-indigo-500 bg-indigo-50 text-indigo-700'
+              ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
               : 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800',
             'block border-l-4 py-2 pl-3 pr-4 text-base font-medium',
           ]"

src/pages/HomePage/components/FounderSharing.vue

@@ -3,20 +3,24 @@
     class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8"
   >
     <div
-      class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"
+      class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.emerald.100),white)] opacity-20"
     />
     <div
-      class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"
+      class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-emerald-600/10 ring-1 ring-emerald-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"
     />
     <div class="mx-auto max-w-2xl lg:max-w-4xl">
       <figure class="mt-10">
         <blockquote
           class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9"
         >
           <p>
-            “I've been using OSS for my whole career and I'm happily adding some
-            of my honest work to the OSS world.
+            “OSS is there in every project of mine, for my whole career.
+            <br />
+            <br />
+            Now, I'm happily contributing some
+            of my honest work from the real life experience & give back to the the OSS community & world.
 
+            <br />
             <br />
 
             I hope ShipSaaS can become everyone's helpful and reliable
@@ -42,7 +46,7 @@
             >
               <circle cx="1" cy="1" r="1" />
             </svg>
-            <div class="text-gray-600">Main Leader of ShipSaaS</div>
+            <div class="text-gray-600">Founder & Leader of ShipSaaS</div>
           </div>
         </figcaption>
       </figure>

src/pages/HomePage/components/HeroBanner.vue

@@ -51,7 +51,7 @@
             :to="{
               name: 'project-page',
             }"
-            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            class="rounded-md bg-emerald-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600"
           >
             Check out our work 🚀
           </router-link>

src/pages/HomePage/components/OurTeam.vue

@@ -122,10 +122,10 @@ type PersonInfo = {
   githubUrl?: string;
 };
 
-const people = ref<PersonInfo>([
+const people = ref<PersonInfo[]>([
   {
     name: 'Seth Phat',
-    role: 'Main Leader of ShipSaaS',
+    role: 'Founder & Leader of ShipSaaS',
     imageUrl: 'https://github.com/sethsandaru.png',
     bio: `
       A Sr. Software Engineer who deeply passionate about Technologies

src/pages/HomePage/components/OurWorks.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="bg-gray-50 py-24 sm:py-32">
+  <div class="bg-emerald-50 py-24 sm:py-32">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div
         class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"
       >
         <div>
-          <h2 class="text-base font-semibold leading-7 text-indigo-600">
+          <h2 class="text-base font-semibold leading-7 text-emerald-600">
             What's we do?
           </h2>
           <p
@@ -36,7 +36,7 @@
           >
             <dt class="font-semibold text-gray-900">
               <CheckIcon
-                class="absolute left-0 top-1 h-5 w-5 text-indigo-500"
+                class="absolute left-0 top-1 h-5 w-5 text-emerald-500"
                 aria-hidden="true"
               />
               {{ feature.name }}

src/pages/ProjectPage/components/ProjectBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white px-6 py-24 sm:py-32 lg:px-8">
     <div class="mx-auto max-w-2xl text-center">
-      <p class="text-base font-semibold leading-7 text-indigo-600">
+      <p class="text-base font-semibold leading-7 text-emerald-600">
         ShipSaaS Proudest Present
       </p>
       <h2
@@ -13,6 +13,13 @@
         We empower every application by offering exceptional and dependable
         helpers, libraries, and even sustainably implemented systems.
       </p>
+      <p class="mt-6 text-lg leading-8 text-gray-600">
+        Crafted based on <strong>real life hands-on experience</strong>.
+        We hope ShipSaaS's libraries & systems will be your
+        reliable companions & help you guys scale to the freaking MOON 🚀😎
+      </p>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+</script>

src/pages/ProjectPage/components/ProjectList.vue

@@ -72,6 +72,8 @@ function getTagType(tag: string): BadgeType {
       return 'primary';
     case 'Best practice':
       return 'lovely';
+    case 'Optimization':
+      return 'error';
     default:
       return 'default';
   }
@@ -103,7 +105,23 @@ const products = [
       'https://raw.githubusercontent.com/shipsaas/safe-dispatcher/main/docs/SafeDispatcher.png',
     repository: 'shipsaas/safe-dispatcher',
     description: `Laravel SafeDispatcher dispatches your Queue Jobs in a safer & recoverable way.`,
-    tags: ['Library', 'Reliability', 'Stability'],
+    tags: ['Library', 'Infrastructure'],
+  },
+  {
+    id: 9,
+    name: 'Laravel Inbox Process',
+    imageSrc: 'https://raw.githubusercontent.com/shipsaas/laravel-inbox-process/main/.github/logo.png',
+    repository: 'shipsaas/laravel-inbox-process',
+    description: `The Inbox Pattern/Process for Laravel projects. Ensure the ordering, uniqueness, and reliable handling of webhook requests.`,
+    tags: ['Library', 'Infrastructure'],
+  },
+  {
+    id: 10,
+    name: 'Laravel Resource Reducer',
+    imageSrc: 'https://repository-images.githubusercontent.com/686591897/bfc31be0-ca7c-4e1b-9cd6-8ce4e98d0108',
+    repository: 'shipsaas/laravel-resource-reducer',
+    description: `Resource Reducer optimizes your API endpoint responses by return what consumers need, defer execution and no more BIG FAT JSON.`,
+    tags: ['Library', 'Optimization', 'Best practice'],
   },
   {
     id: 4,