consistency checks and upload to github pages

Author: JianZcar

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run generate
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: ./.output/public
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps: deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

app/components/CardLarge.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full bg-base-200/80 rounded-2xl shadow-2xl mb-12 p-8">
-    <div class="flex flex-col lg:flex-row items-center gap-8">
+  <div class="w-full bg-base-200/80 rounded-2xl shadow-2xl mb-12 p-8 md:p-12">
+    <div class="flex flex-col w-full">
       <slot></slot>
     </div>
   </div>

app/components/home/Download.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="download"
-    class="p-8 md:p-12 bg-linear-to-r from-primary/20 to-secondary/20 rounded-3xl mb-12 border border-primary/20 shadow-2xl">
+    class="p-8 md:p-12 bg-linear-to-r from-primary/20 to-secondary/20 rounded-2xl mb-12 border border-primary/20 shadow-2xl">
     <div class="text-center">
       <h2 class="text-4xl font-bold mb-4">
         <Icon name="lucide:download" class="mr-2 align-middle" />

app/components/home/Gaming.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="gaming"
-    class="w-full bg-linear-to-r from-purple-900/20 to-pink-900/20 rounded-3xl shadow-2xl mb-12 p-8 md:p-12 border border-purple-500/20">
+    class="w-full bg-linear-to-r from-purple-900/20 to-pink-900/20 rounded-2xl shadow-2xl mb-12 p-8 md:p-12 border border-purple-500/20">
     <div class="flex flex-col">
       <h2 class="text-4xl font-bold mb-6">
         <Icon name="lucide:gamepad-2" class="text-purple-400 mr-3 align-middle" />

app/components/home/Hero.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-center items-center">
+  <div class="flex justify-center items-center mb-12">
     <img src="/images/logo.png" class="w-25 lg:w-50" alt="Zena OS Logo" />
     <h1
       class="text-6xl lg:text-9xl font-bold bg-linear-to-t from-blue-400 to-primary bg-clip-text text-transparent -mb-5 lg:-mb-6 scale-x-110">

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-12 w-full">
+  <div class="flex flex-col w-full">
     <HomeHero />
 
     <HomeIntro />
@@ -10,12 +10,12 @@
 
     <HomeUpdates />
 
-    <HomeGetStarted />
-
     <HomeIsolation />
 
     <HomeGaming />
 
+    <HomeGetStarted />
+
     <HomeDownload />
 
     <HomeSupport />

nuxt.config.ts

@@ -2,10 +2,14 @@
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineNuxtConfig({
+  ssr: false,
   modules: ['@nuxt/content', '@nuxt/icon', '@nuxtjs/color-mode'],
   devtools: { enabled: true },
   compatibilityDate: '2024-04-03',
   css: ['~/assets/main.css'],
+  nitro: {
+    preset: 'github-pages'
+  },
   vite: {
     plugins: [
       tailwindcss() as any,
@@ -21,6 +25,7 @@ export default defineNuxtConfig({
     }
   },
   app: {
+    baseURL: '/',
     pageTransition: { name: 'page', mode: 'out-in', duration: 500 }
   }
 })