update: main.css since the body element is set to flex, which causes …

app/assets/css/main.css

@@ -34,11 +34,7 @@ html,
 body {
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   min-height: 100dvh;
-  align-items: center;
-  justify-content: center;
 }
 
 body {

app/components/app/AppFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <footer class="w-full">
+    <USeparator />
+    <div class="flex flex-col lg:gap-0 lg:px-20 py-5 lg:py-10 lg:flex-row gap-5 justify-between items-center">
+      <p>All of the 3D assets are under MIT License</p>
+      <NuxtLink to="https://github.com/Yncy0/monthsary" external>
+        <UIcon name="i-simple-icons-github" class="size-5" />
+      </NuxtLink>
+    </div>
+  </footer>
+</template>

app/components/app/AppHeader.vue

@@ -2,8 +2,6 @@
 For more infor: visit https://ui3.nuxt.dev/getting-started -->
 
 <script setup lang="ts">
-const user = useSupabaseUser();
-
 const open = ref<boolean>(false)
 
 const items = ref([

app/components/index/GallerySection.vue

@@ -31,7 +31,7 @@ onMounted(async () => {
       </p>
     </div>
     <div class="w-full max-w-screen lg:w-[1000px] px-4">
-      <GalleryCarousel :items="items" :is-user="isUser" />
+      <GalleryCarousel :items="items" />
     </div>
   </section>
 </template>

app/components/index/Roadmap/RoadmapStack.vue

@@ -10,8 +10,11 @@ const flexDir = ref(props.isReversed ? "row-reverse" : "row");
 </script>
 
 <template>
-  <div class="flex flex-wrap flex-row justify-between gap-5 lg:gap-40" :style="{ flexDirection: flexDir }">
-    <img :src="props.imgSource" class="flex flex-1 max-w-screen h-[320px] lg:size-[360px] rounded-lg">
+  <div 
+    class="flex flex-wrap flex-row justify-between gap-5 lg:gap-40 lg:px-56"
+    :style="{ flexDirection: flexDir }"
+  >
+    <img :src="props.imgSource" class="flex flex-1 max-w-screen h-[320px] lg:size-[360px] rounded-lg" >
     <div class="flex flex-col justify-center flex-1 lg:w-[360px]">
       <HeadingGlow :level="3" :text="props.header" class="text-2xl lg:text-4xl text-start" />
       <p class="text-start">{{ props.body }}</p>

app/components/index/RoadmapSection.vue

@@ -18,14 +18,32 @@ onMounted(async () => {
   <section id="roadmap" class="flex flex-col items-center justify-center py-10 min-w-full">
     <HeadingGlow :level="2" text="Roadmap" class="text-4xl lg:text-7xl" />
     <p class="text-sm lg:text-lg">Lists of accomplished goals</p>
-    <section v-for="(item, index) in items" :key="index"
-      class="px-6 pt-10 lg:px-20 lg:pt-20 mb-10 w-full flex flex-col">
-      <RoadmapStack v-if="!userAuth" :is-reversed="evenOrOdd(index)" :img-source="item.img" :header="item.header"
-        :body="item.body" />
-      <RoadmapStack v-if="userAuth" :is-reversed="evenOrOdd(index)" :img-source="item.images.image_url"
-        :header="item.header" :body="item.body" />
+    <section 
+      v-for="(item, index) in items" 
+      :key="index"
+      class="px-6 pt-10 lg:px-20 lg:pt-20 mb-10 w-full max-w-screen flex flex-col"
+    >
+      <RoadmapStack 
+        v-if="!userAuth" 
+        :is-reversed="evenOrOdd(index)" 
+        :img-source="item.img" 
+        :header="item.header"
+        :body="item.body"
+      />
+      <RoadmapStack
+        v-if="userAuth"
+        :is-reversed="evenOrOdd(index)"
+        :img-source="item.images.image_url"
+        :header="item.header" 
+        :body="item.body"
+      />
     </section>
-    <UButton label="See More..." trailing-icon="i-lucide-arrow-right" variant="subtle" :block="false"
-      @click="navigateTo('/roadmap')" />
+    <UButton
+      label="See More..."
+      trailing-icon="i-lucide-arrow-right" 
+      variant="subtle"
+      :block="false"
+      @click="navigateTo('/roadmap')"
+    />
   </section>
 </template>

app/layouts/default.vue

@@ -1,4 +1,5 @@
 <template>
   <AppHeader />
   <slot />
+  <AppFooter />
 </template>

app/pages/gallery.vue

@@ -7,7 +7,7 @@ definePageMeta({
 <template>
   <main class="flex flex-col gap-64">
     <GalleryHero class="z-10" />
-    <section class="flex flex-col gap-2 z-20">
+    <section class="flex flex-col gap-2 z-20 pb-24">
       <GalleryImages />
     </section>
   </main>

app/pages/roadmap.vue

@@ -48,7 +48,7 @@ function moveCamera() {
 </script>
 
 <template>
-  <main class="mt-32 pb-32">
+  <main class="flex flex-col items-center justify-center mt-32 pb-32">
     <canvas id="bg"/>
     <section class="text-center mb-10">
       <h1 class="text-5xl lg:text-6xl text-latte-primary font-bold">Roadmap</h1>

package.json

@@ -13,6 +13,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@iconify-json/simple-icons": "^1.2.47",
     "@nuxt/content": "3.4.0",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "^0.11.4",