🎉 Setup ✨ Landing page

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

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>

content.config.ts

@@ -0,0 +1,21 @@
+import { defineCollection, defineContentConfig, z } from "@nuxt/content";
+
+export default defineContentConfig({
+  collections: {
+    products: defineCollection({
+      type: "data",
+      source: "products/**.json",
+      schema: z.object({
+        icon: z.string(),
+        background: z.string().optional(),
+        name: z.string().nonempty(),
+        description: z.string().optional(),
+        url: z.string(),
+        repo: z.string().optional(),
+        releasedDate: z.date().optional(),
+        version: z.string().optional(),
+        updatedDate: z.date().optional()
+      }),
+    }),
+  },
+});

content/products/solar-network-drive.json

@@ -0,0 +1,11 @@
+{
+    "icon": "/solar-network/icon-alternative.png",
+    "background": "/solar-network/satelite.jpg",
+    "name": "Solar Network Drive",
+    "description": "The way to host and transfer files with ease in mind.",
+    "url": "https://fs.solian.app",
+    "repo": "https://github.com/Solsynth/Solian",
+    "releasedDate": "2025-07-28T08:00:00.000Z",
+    "version": "1.0.0.0",
+    "updatedDate": "2025-07-28T08:00:00.000Z"
+}

content/products/solar-network.json

@@ -0,0 +1,11 @@
+{
+    "icon": "/solar-network/icon.png",
+    "background": "/solar-network/kp.jpg",
+    "name": "Solar Network",
+    "description": "The amazing social network for technology, programming, ACG fans.",
+    "url": "https://solian.app",
+    "repo": "https://github.com/Solsynth/Solian",
+    "releasedDate": "2024-01-27T08:00:00.000Z",
+    "version": "3.1.0",
+    "updatedDate": "2025-07-28T08:00:00.000Z"
+}

eslint.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+  {
+    rules: {
+      'vue/html-self-closing': 'off'
+    }
+  }
+)

nuxt.config.ts

@@ -0,0 +1,20 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: "2025-07-15",
+  devtools: { enabled: true },
+  app: {
+    head: {
+      link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
+    },
+  },
+  modules: [
+    "@nuxt/content",
+    "@nuxt/eslint",
+    "@nuxt/image",
+    "@nuxt/scripts",
+    "@nuxtjs/tailwindcss",
+    "nuxtjs-naive-ui",
+    "@vueuse/nuxt",
+    "@eschricht/nuxt-color-mode",
+  ],
+});

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@eschricht/nuxt-color-mode": "1.2.0",
+    "@fontsource-variable/nunito": "^5.2.6",
+    "@nuxt/content": "3.6.3",
+    "@nuxt/eslint": "1.7.1",
+    "@nuxt/image": "1.10.0",
+    "@nuxt/scripts": "0.11.10",
+    "@nuxtjs/tailwindcss": "6.14.0",
+    "@unhead/vue": "^2.0.3",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/nuxt": "13.6.0",
+    "eslint": "^9.0.0",
+    "nuxt": "^4.0.1",
+    "nuxtjs-naive-ui": "1.0.2",
+    "typed.js": "^2.1.0",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}