🎉 Setup ✨ Landing page

app/app.vue

@@ -0,0 +1,52 @@
+<template>
+  <n-config-provider
+    :theme-overrides="themeOverrides"
+    :theme="theme.value === 'dark' ? darkTheme : lightTheme"
+  >
+    <n-global-style />
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-message-provider placement="bottom">
+          <nuxt-layout>
+            <nuxt-page />
+          </nuxt-layout>
+        </n-message-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import {
+  darkTheme,
+  lightTheme,
+  NConfigProvider,
+  NGlobalStyle,
+  NLoadingBarProvider,
+  NDialogProvider,
+  NMessageProvider,
+} from "naive-ui";
+
+import '@fontsource-variable/nunito';
+
+const themeOverrides = {
+  common: {
+    fontFamily: "Nunito Variable, v-sans, ui-system, -apple-system, sans-serif",
+    primaryColor: "#7D80BAFF",
+    primaryColorHover: "#9294C5FF",
+    primaryColorPressed: "#575B9DFF",
+    primaryColorSuppl: "#6B6FC1FF",
+  },
+};
+
+const theme = useColorMode();
+</script>
+
+<style>
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: Nunito Variable, sans-serif;
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,31 @@
+<template>
+  <n-layout class="h-screen">
+    <n-layout-header class="border-b-1">
+      <div class="flex justify-between items-center container mx-auto">
+        <router-link to="/" class="text-lg font-bold"> Solsynth </router-link>
+      </div>
+    </n-layout-header>
+
+    <n-layout-content>
+      <slot />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { NLayout, NLayoutHeader, NLayoutContent } from "naive-ui";
+</script>
+
+<style scoped>
+.n-layout-header {
+  padding: 8px 24px;
+  border-color: var(--n-border-color);
+  height: 57px; /* Fixed height */
+  display: flex;
+  align-items: center;
+}
+
+.n-layout-content {
+  height: calc(100vh - 57px); /* Adjust based on header height */
+}
+</style>

app/pages/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <main class="container mx-auto h-full px-8 flex flex-col gap-16">
+    <div class="text-center py-56 flex flex-col items-center justify-center">
+      <img src="/favicon.png" class="w-28 h-28 mb-4" />
+      <h1 class="text-5xl font-extrabold mb-3">We <span id="who-are-we" /></h1>
+      <p class="text-xl mb-8">
+        We are a group of friends that make software, hardware and any stuff
+        that interesting.
+      </p>
+      <n-space justify="center">
+        <n-button type="primary" size="large" round>Explore around</n-button>
+        <n-button type="default" size="large" round>About us</n-button>
+      </n-space>
+    </div>
+    <div id="about" class="pb-36">
+      <client-only>
+        <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
+          <n-gi>
+            <div class="flex items-center justify-center">
+              <n-carousel
+                show-arrow
+                draggable
+                dot-type="line"
+                class="rounded-xl w-full max-h-[360px] aspect-video flex-shrink-1"
+              >
+                <n-carousel-item
+                  v-for="product in products"
+                  :key="product.path"
+                  class="rounded-xl w-full max-h-[360px] aspect-video relative"
+                  :style="`background-color: ${product.background ? 'transparent' : themeVar.baseColor}`"
+                >
+                  <img
+                    :src="product.background"
+                    class="absolute left-0 right-0 top-0 bottom-0 object-cover aspect-video"
+                    style="z-index: -1"
+                  />
+                  <div
+                    style="
+                      background: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 0.7),
+                        transparent
+                      );
+                      z-index: 1;
+                    "
+                    class="absolute left-0 right-0 top-1/2 bottom-0"
+                  />
+                  <div
+                    class="absolute bottom-0 px-6 py-8 w-full"
+                    style="z-index: 2"
+                  >
+                    <nuxt-img :src="product.icon" class="w-12 h-12" />
+                    <p class="text-lg text-white line-height-1">
+                      {{ product.name }}
+                    </p>
+                    <p>{{ product.description }}</p>
+                  </div>
+                </n-carousel-item>
+              </n-carousel>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div
+              class="flex justify-center text-right h-full py-8 px-4 flex flex-col"
+            >
+              <h2 class="text-3xl font-bold mb-3">Our products</h2>
+              <p class="text-lg mb-1">The made various of software, from social network to cloud drive.</p>
+              <p class="text-lg">Take a look of them on the left on your own <code>ヽ(&gt;∀&lt;☆)ノ</code></p>
+            </div>
+          </n-gi>
+        </n-grid>
+      </client-only>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import {
+  NSpace,
+  NButton,
+  NGrid,
+  NGi,
+  NCarousel,
+  NCarouselItem,
+  useThemeVars,
+} from "naive-ui";
+import Typed from "typed.js";
+
+const route = useRoute();
+const themeVar = useThemeVars();
+
+const { data: products } = await useAsyncData(route.path, () => {
+  return queryCollection("products").all();
+});
+
+onMounted(() => {
+  new Typed("#who-are-we", {
+    strings: [
+      "make software",
+      "make hardware",
+      "make experience",
+      "write stories",
+      "are Solsynth^3000",
+    ],
+    typeSpeed: 40,
+    backDelay: 1000,
+    backSpeed: 40,
+    smartBackspace: true,
+    loop: true,
+    showCursor: false,
+    autoInsertCss: false,
+  });
+});
+</script>