<template>
  <div class="font-logo bg-gray-950 min-h-screen">
    <Suspense>
      <template #default>
        <div>
          <NavBar />
          <Hero />
          <Services />
          <About />
          <Skills />
          <Projects />
          <!-- <Testimonials /> -->
          <Contact />
          <Footer />
          <BackToTop />
        </div>
      </template>
      <template #fallback>
        <div class="flex justify-center items-center min-h-screen">
          <LoadingSpinner />
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

const NavBar = defineAsyncComponent(() => import("@/components/Navbar.vue"));
const Hero = defineAsyncComponent(() => import("@/components/Hero.vue"));
const Services = defineAsyncComponent(() =>
  import("@/components/Services.vue")
);
const About = defineAsyncComponent(() => import("@/components/About.vue"));
const Skills = defineAsyncComponent(() => import("@/components/Skills.vue"));
const Projects = defineAsyncComponent(() =>
  import("@/components/Projects.vue")
);
// const Testimonials = defineAsyncComponent(() =>
//   import("@/components/Testemonial.vue")
// );
const Contact = defineAsyncComponent(() => import("@/components/Contact.vue"));
const Footer = defineAsyncComponent(() => import("@/components/Footer.vue"));
const BackToTop = defineAsyncComponent(() =>
  import("@/components/BackToTop.vue")
);

import LoadingSpinner from "@/components/LoadingSpinner.vue";
</script>

<style>
* {
  scrollbar-width: thin;
  scrollbar-color: #111827 #f1f1f1;
}
</style>
