chore: Remove unused components and update configuration files

.nuxt/components.d.ts

@@ -2,8 +2,6 @@
 interface _GlobalComponents {
       'Footer': typeof import("../components/Footer.vue")['default']
     'Header': typeof import("../components/Header.vue")['default']
-    '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']
@@ -205,8 +203,6 @@ interface _GlobalComponents {
     'USlideovers': typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
       'LazyFooter': typeof import("../components/Footer.vue")['default']
     'LazyHeader': typeof import("../components/Header.vue")['default']
-    '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']
@@ -422,8 +418,6 @@ declare module 'vue' {
 
 export const Footer: typeof import("../components/Footer.vue")['default']
 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']
@@ -625,8 +619,6 @@ export const UModals: typeof import("../node_modules/nuxt/dist/app/components/se
 export const USlideovers: typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
 export const LazyFooter: typeof import("../components/Footer.vue")['default']
 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']

.nuxt/tailwind.config.cjs

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

app.vue

@@ -31,11 +31,8 @@ useSeoMeta({
 <template>
   <div>
     <NuxtLoadingIndicator />
-
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-
-    <Notification />
   </div>
 </template>

components/Header.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { NavItem } from "@nuxt/content/dist/runtime/types";
-import { useAppConfig } from "#imports";
+import { useAppConfig, useColorMode } from "#imports";
 const appConfig = useAppConfig();
 const navigation = inject<Ref<NavItem[]>>("navigation", ref([]));
+const colorMode = useColorMode();
 
 const links = [
   {
@@ -40,23 +41,23 @@ function mapContentNavigation(navigation: NavItem[]): NavItem[] {
     <template #logo>
       <div class="flex items-center">
         <img
-          v-if="$colorMode.preference === 'light'"
-          src="/public/nav-logo-black.png"
+          v-if="colorMode.preference === 'light'"
+          src="/nav-logo-dark.png"
           alt="Logo"
           class="h-7 w-auto mr-3"
         />
-        <img v-else src="/public/nav-logo-light.png" alt="Logo" class="h-7 w-auto mr-3" />
+        <img v-else src="/nav-logo-light.png" alt="Logo" class="h-7 w-auto mr-3" />
       </div>
     </template>
 
     <!-- Header Right -->
     <template #right>
-      <UColorModeToggle />
-      <UButton label="Support" color="gray" to="/donate" />
+      <UColorModeButton />
+      <!-- <UButton label="Support" color="gray" to="/donate" /> -->
     </template>
 
     <UButton
-      v-for="(link, index) of links"
+      v-for="(link, index) in links"
       :key="index"
       v-bind="{ color: 'gray', variant: 'ghost', ...link }"
     />

error.vue

@@ -1,29 +1,36 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { NuxtError } from "#app";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 
 useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
-})
+  title: "Page not found",
+  description: "We are sorry but this page could not be found.",
+});
 
 defineProps({
   error: {
     type: Object as PropType<NuxtError>,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
 useHead({
   htmlAttrs: {
-    lang: 'en'
-  }
-})
-
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
-
-provide('navigation', navigation)
+    lang: "en",
+  },
+});
+
+const { data: navigation } = await useAsyncData(
+  "navigation",
+  () => fetchContentNavigation(),
+  { default: () => [] }
+);
+const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
+  default: () => [],
+  server: false,
+});
+
+provide("navigation", navigation);
 </script>
 
 <template>
@@ -43,7 +50,5 @@ provide('navigation', navigation)
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
-
-    <UNotifications />
   </div>
 </template>

pages/index.vue

@@ -14,29 +14,33 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="page">
+  <div
+    v-if="page"
+    class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-500"
+  >
     <ULandingHero
       :title="page.hero.title"
       :description="page.hero.description"
       :links="page.hero.links"
     >
       <div
-        class="absolute inset-0 landing-grid z-[-1] [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+        class="absolute inset-0 landing-grid z-[-1] [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:[mask-image:radial-gradient(100%_100%_at_top_right,black,transparent)]"
       />
 
       <!--------- SITE SECTION --------->
       <template #title>
         <span class="font-montserrat font-bold text-5xl">
           Discover the
           <span
-            class="bg-gradient-to-r from-blue-200 to-yellow-600 bg-clip-text text-transparent"
-            >Wisdom</span
+            class="bg-gradient-to-r from-primary-300 via-primary-400 to-primary-500 dark:from-primary-500 dark:via-primary-600 dark:to-primary-700 bg-clip-text text-transparent"
           >
+            Wisdom
+          </span>
           of
         </span>
         <br />
         <span
-          class="font-Playfair Display font-bold text-5xl bg-gradient-to-r from-blue-100 to-yellow-600 bg-clip-text text-transparent"
+          class="font-playfair-display font-bold text-5xl bg-gradient-to-r from-primary-200 via-primary-300 to-primary-500 dark:from-primary-400 dark:via-primary-500 dark:to-primary-700 bg-clip-text text-transparent"
         >
           Nahj al-Balagha
         </span>
@@ -48,7 +52,7 @@ useSeoMeta({
           v-if="page.hero.headline"
           variant="subtle"
           size="lg"
-          class="relative rounded-full font-semibold"
+          class="relative rounded-full font-semibold bg-gray-200 dark:bg-gray-700"
         >
           <NuxtLink
             :to="page.hero.headline.to"
@@ -81,23 +85,25 @@ useSeoMeta({
       v-for="(section, index) in page.sections"
       :key="index"
       :title="section.title"
-      class=""
       :description="section.description"
       :align="section.align"
       :features="section.features"
+      class="bg-gray-50 dark:bg-gray-900"
     >
       <Placeholder1 />
     </ULandingSection>
     <!--------- SITE SECTION --------->
     <ULandingSection
       :title="page.features.title"
       :description="page.features.description"
+      class="bg-gray-50 dark:bg-gray-900"
     >
       <UPageGrid>
         <ULandingCard
           v-for="(item, index) in page.features.items"
           :key="index"
           v-bind="item"
+          class="bg-white dark:bg-gray-800"
         />
       </UPageGrid>
     </ULandingSection>
@@ -106,6 +112,7 @@ useSeoMeta({
       :headline="page.testimonials.headline"
       :title="page.testimonials.title"
       :description="page.testimonials.description"
+      class="bg-gray-50 dark:bg-gray-900"
     >
       <UPageColumns class="xl:columns-4">
         <div
@@ -115,26 +122,22 @@ useSeoMeta({
         >
           <ULandingTestimonial
             v-bind="testimonial"
-            class="bg-gray-100/50 dark:bg-gray-800/50"
+            class="bg-gray-200 dark:bg-gray-700"
           />
         </div>
       </UPageColumns>
     </ULandingSection>
     <!--------- SITE SECTION --------->
-    <ULandingSection>
-      <ULandingCTA v-bind="page.cta" class="bg-gray-100/50 dark:bg-gray-800/50" />
+    <ULandingSection class="bg-gray-50 dark:bg-gray-900">
+      <ULandingCTA v-bind="page.cta" class="bg-gray-200 dark:bg-gray-700" />
     </ULandingSection>
   </div>
 </template>
 
 <style scoped>
 .landing-grid {
   background-size: 100px 100px;
-  background-image: linear-gradient(
-      to right,
-      rgb(var(--color-gray-800)) 1px,
-      transparent 1px
-    ),
-    linear-gradient(to bottom, rgb(var(--color-gray-800)) 1px, transparent 1px);
+  background-image: linear-gradient(to left, rgb(100, 100, 100) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(100, 100, 100) 1px, transparent 1px);
 }
 </style>