chore: Add new components and update configuration files

.nuxt/components.d.ts

@@ -5,6 +5,8 @@ interface _GlobalComponents {
     'KoFiButton': typeof import("../components/KoFiButton.vue")['default']
     'LandingPageImageBook': typeof import("../components/LandingPageImage-Book.vue")['default']
     'Placeholder': typeof import("../components/Placeholder.vue")['default']
+    'Placeholder1': typeof import("../components/Placeholder1.vue")['default']
+    'Placeholder2': typeof import("../components/Placeholder2.vue")['default']
     'UAside': typeof import("../node_modules/@nuxt/ui-pro/components/aside/Aside.vue")['default']
     'UAsideLinks': typeof import("../node_modules/@nuxt/ui-pro/components/aside/AsideLinks.vue")['default']
     'UAuthForm': typeof import("../node_modules/@nuxt/ui-pro/components/auth/AuthForm.vue")['default']
@@ -206,6 +208,8 @@ interface _GlobalComponents {
     'LazyKoFiButton': typeof import("../components/KoFiButton.vue")['default']
     'LazyLandingPageImageBook': typeof import("../components/LandingPageImage-Book.vue")['default']
     'LazyPlaceholder': typeof import("../components/Placeholder.vue")['default']
+    'LazyPlaceholder1': typeof import("../components/Placeholder1.vue")['default']
+    'LazyPlaceholder2': typeof import("../components/Placeholder2.vue")['default']
     'LazyUAside': typeof import("../node_modules/@nuxt/ui-pro/components/aside/Aside.vue")['default']
     'LazyUAsideLinks': typeof import("../node_modules/@nuxt/ui-pro/components/aside/AsideLinks.vue")['default']
     'LazyUAuthForm': typeof import("../node_modules/@nuxt/ui-pro/components/auth/AuthForm.vue")['default']
@@ -421,6 +425,8 @@ export const Header: typeof import("../components/Header.vue")['default']
 export const KoFiButton: typeof import("../components/KoFiButton.vue")['default']
 export const LandingPageImageBook: typeof import("../components/LandingPageImage-Book.vue")['default']
 export const Placeholder: typeof import("../components/Placeholder.vue")['default']
+export const Placeholder1: typeof import("../components/Placeholder1.vue")['default']
+export const Placeholder2: typeof import("../components/Placeholder2.vue")['default']
 export const UAside: typeof import("../node_modules/@nuxt/ui-pro/components/aside/Aside.vue")['default']
 export const UAsideLinks: typeof import("../node_modules/@nuxt/ui-pro/components/aside/AsideLinks.vue")['default']
 export const UAuthForm: typeof import("../node_modules/@nuxt/ui-pro/components/auth/AuthForm.vue")['default']
@@ -622,6 +628,8 @@ export const LazyHeader: typeof import("../components/Header.vue")['default']
 export const LazyKoFiButton: typeof import("../components/KoFiButton.vue")['default']
 export const LazyLandingPageImageBook: typeof import("../components/LandingPageImage-Book.vue")['default']
 export const LazyPlaceholder: typeof import("../components/Placeholder.vue")['default']
+export const LazyPlaceholder1: typeof import("../components/Placeholder1.vue")['default']
+export const LazyPlaceholder2: typeof import("../components/Placeholder2.vue")['default']
 export const LazyUAside: typeof import("../node_modules/@nuxt/ui-pro/components/aside/Aside.vue")['default']
 export const LazyUAsideLinks: typeof import("../node_modules/@nuxt/ui-pro/components/aside/AsideLinks.vue")['default']
 export const LazyUAuthForm: typeof import("../node_modules/@nuxt/ui-pro/components/auth/AuthForm.vue")['default']

.nuxt/tailwind.config.cjs

@@ -1,4 +1,4 @@
-// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 5/23/2024, 1:28:40 PM
+// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 5/23/2024, 2:42:36 PM
 const configMerger = require("/Users/rezajafar/peakofeloquence-app/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.mjs");
 
 const inlineConfig = {"content":[],"theme":{"extend":{}},"plugins":[],"darkMode":"class"};

components/Placeholder.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
-    <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10">
+  <div
+    class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4"
+  >
+    <div
+      class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10"
+    >
       <!-- NuxtImg component to display the image -->
       <NuxtImg
         width="1792"
-        height="1024" 
+        height="1024"
         src="/landing.webp"
-        class="absolute inset-0 h-full w-full object-cover rounded-lg" 
+        class="absolute inset-0 h-full w-full object-cover rounded-lg"
       />
     </div>
   </div>

components/Placeholder1.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4"
+  >
+    <div
+      class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10"
+    >
+      <!-- NuxtImg component to display the image -->
+      <NuxtImg
+        width="1792"
+        height="1024"
+        src="/landing3.png"
+        class="absolute inset-0 h-full w-full object-cover rounded-lg"
+      />
+    </div>
+  </div>
+</template>

components/Placeholder2.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4"
+  >
+    <div
+      class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10"
+    >
+      <!-- NuxtImg component to display the image -->
+      <NuxtImg
+        width="1792"
+        height="1024"
+        src="/landing2.png"
+        class="absolute inset-0 h-full w-full object-cover rounded-lg"
+      />
+    </div>
+  </div>
+</template>

pages/index.vue

@@ -42,7 +42,7 @@ useSeoMeta({
         </span>
       </template>
 
-      <!--------- SITE SECTION --------->
+      <!--------- HERO SECTION --------->
       <template #headline>
         <UBadge
           v-if="page.hero.headline"
@@ -67,12 +67,15 @@ useSeoMeta({
         </UBadge>
       </template>
     </ULandingHero>
-    <!--------- SITE SECTION --------->
+
+    <!-------IMG----------->
 
     <ULandingSection>
       <Placeholder />
     </ULandingSection>
 
+    <!------------------>
+
     <!--------- SITE SECTION --------->
     <ULandingSection
       v-for="(section, index) in page.sections"
@@ -83,7 +86,7 @@ useSeoMeta({
       :align="section.align"
       :features="section.features"
     >
-      <Placeholder />
+      <Placeholder1 />
     </ULandingSection>
     <!--------- SITE SECTION --------->
     <ULandingSection