chore: making tweaks according to request on the website landing page

Signed-off-by: Type-32 <[email protected]>

app/app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
     ui: {
-        primary: 'orange',
-        gray: 'stone'
+        primary: 'cyan',
+        gray: 'slate'
     }
 })

app/assets/css/tailwind.css

@@ -0,0 +1,63 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
+}
+
+
+.animate-typing {
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 0.15em solid #fff;
+    animation:
+            typing 3.5s steps(40, end);
+}
+
+/* Adjust the animation duration based on text length */
+.animate-typing[data-length="short"] { animation-duration: 2s; }
+.animate-typing[data-length="medium"] { animation-duration: 3.5s; }
+.animate-typing[data-length="long"] { animation-duration: 5s; }
+
+.text-glow {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff;
+}
+
+/* Or for colored glow */
+.text-glow-purple {
+    text-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2, 0 0 15px #8a2be2, 0 0 20px #8a2be2;
+}
+
+.fade-in-from-top {
+    animation: fadeInFromTop 1s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromTop {
+    from {
+        opacity: 0;
+        transform: translateY(-20px); /* Move slightly above */
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in-from-bottom {
+    animation: fadeInFromBottom 1s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromBottom {
+    from {
+        opacity: 0;
+        transform: translateY(20px); /* Move slightly above */
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

app/components/WebsiteFooter.vue

@@ -11,12 +11,15 @@ const props = defineProps({
 </script>
 
 <template>
-    <UFooter :links="props.links" class="w-full mt-8">
+    <UFooter :links="props.links" class="w-full mt-8 border-t">
         <template #left>
             The SHUL Team, Copyright © 2023-{{ new Date().getFullYear() }}
         </template>
         <template #right>
-            <UButton icon="i-lucide-github" color="gray" variant="ghost" to="https://github.com/Type-32/UltimateFrisbee" target="_blank" />
+            <div class="flex items-center justify-center gap-3">
+                <span class="text-sm opacity-75">View Source on GitHub</span>
+                <UButton icon="i-lucide-github" color="gray" variant="ghost" to="https://github.com/Type-32/UltimateFrisbee" target="_blank" />
+            </div>
         </template>
     </UFooter>
 </template>

app/components/WebsiteHeader.vue

@@ -20,9 +20,6 @@ const props = defineProps({
 <!--                class="mb-0.5"-->
 <!--            />-->
         </template>
-        <template #right>
-            <UButton icon="i-lucide-github" color="gray" variant="ghost" to="https://github.com/Type-32/UltimateFrisbee" target="_blank" />
-        </template>
     </UHeader>
 </template>
 

app/layouts/MainLayout.vue

@@ -5,24 +5,34 @@ const route = useRoute()
 
 const links = [
     {
-        label: 'Articles',
-        icon: 'i-lucide-newspaper',
-        to: '/articles'
-    },
-    {
-        label: 'Matches',
-        icon: 'i-lucide-radio',
-        to: `/matches`
-    },
-    {
-        label: 'Tables',
-        icon: 'i-lucide-users',
-        to: `/tables`
-    },
-    {
-        label: 'Galleries',
-        icon: 'i-lucide-album',
-        to: `/galleries`
+        label: "From Us",
+        icon: 'i-lucide-info',
+        children: [
+            {
+                label: 'Articles',
+                icon: 'i-lucide-newspaper',
+                to: '/articles',
+                description: 'Our articles that records matches, fun facts, and more information regarding the sport of Frisbee.'
+            },
+            {
+                label: 'Matches',
+                icon: 'i-lucide-radio',
+                to: `/matches`,
+                description: 'The matches we have hosted in this league.'
+            },
+            {
+                label: 'Tables',
+                icon: 'i-lucide-users',
+                to: `/tables`,
+                description: 'The statistics of the teams in this league. Updated Real-time.'
+            },
+            {
+                label: 'Media',
+                icon: 'i-lucide-album',
+                to: `/medias`,
+                description: 'Collections of photos, videos, and media recorded in the league.'
+            }
+        ]
     },
     {
         label: 'Rules',
@@ -35,7 +45,7 @@ const links = [
 </script>
 
 <template>
-    <WebsiteHeader :links="links"/>
+    <WebsiteHeader :links="links" class="bg-slate-100/80 backdrop-blur-lg" />
     <UMain>
         <slot/>
     </UMain>

app/pages/index.vue

@@ -134,10 +134,19 @@ onMounted(() => {
 <template>
     <MainLayout>
         <div class="flex flex-col gap-20">
+            <LandingSection class="min-h-screen items-center justify-center align-middle">
+                <div class="">
+                    <span class="font-bold text-7xl text-pretty text-center text-transparent bg-gradient-to-r from-cyan-400 to-blue-700 bg-clip-text fade-in-from-top">SHUL is Back</span>
+                </div>
+                <div class="flex flex-col items-center justify-center">
+                    <img src="~/assets/cap.png" class="object-contain size-96 hover:scale-105 active:scale-95 duration-200 fade-in-from-top hover:cursor-pointer" alt="billed cap"/>
+                    <span class="text-center w-full fade-in-from-bottom">...with our first-ever hat.</span>
+                </div>
+            </LandingSection>
             <LandingSection>
                 <ULandingHero
                     icon="i-lucide-rocket"
-                    title="South China High School Ultimate Frisbee League"
+                    title="South China's Largest High School Ultimate Frisbee League"
                     description="A platform for organized competition between south China high schools and improve opportunities for female high school students in China to do sports."
                 >
                     <UCard>
@@ -179,11 +188,24 @@ onMounted(() => {
             <LandingSection>
                 <div class="font-bold text-center text-3xl">Sponsorship</div>
                 <div class="items-center justify-center w-full grid grid-cols-3 gap-20">
-                    <img class="object-contain w-full" src="~/assets/images/rela1.png" alt="1"/>
-                    <img class="object-contain w-full" src="~/assets/images/rela2.png" alt="1"/>
-                    <img class="object-contain w-full" src="~/assets/images/rela3.png" alt="1"/>
+                    <div class="w-full flex flex-col items-center gap-5">
+                        <img class="object-contain w-full" src="~/assets/images/rela1.png" alt="1"/>
+                        <span>The World Flying Disc Federation (WFDF) is the international governing body for flying disc
+                            sports, including Ultimate and Disc Golf.</span>
+                    </div>
+                    <div class="w-full flex flex-col items-center gap-5">
+                        <img class="object-contain w-full" src="~/assets/images/rela2.png" alt="2"/>
+                        <span>USA Ultimate is the governing body for the sport of ultimate frisbee in the United States.
+                            Founded in 1979, it organizes competitions and promotes the sport at various levels,
+                            including youth, college, and club divisions.</span>
+                    </div>
+                    <div class="w-full flex flex-col items-center gap-5">
+                        <img class="object-contain w-full" src="~/assets/images/rela3.png" alt="3"/>
+                        <span>The XCOM Ultimate Frisbee League is a competitive league that focuses on promoting and organizing ultimate frisbee events.</span>
+                    </div>
                 </div>
             </LandingSection>
+            <div/>
         </div>
     </MainLayout>
 </template>

app/pages/galleries/index.vue → app/pages/medias/index.vue

@@ -39,7 +39,7 @@ function parseAndFormatDate(dateString: string): string {
         <UContainer>
             <UPage>
                 <UPageHeader
-                    title="Galleries"
+                    title="Medias"
                     description="A section of where we put collections of media at."
                 />
                 <UPageBody class="flex flex-col max-w-none min-w-none w-full max-h-none h-full gap-5 items-center">
@@ -53,7 +53,7 @@ function parseAndFormatDate(dateString: string): string {
                                     :image="getImageLink()"
                                     :date="parseAndFormatDate(gallery.createdAt)"
                                     :title="gallery.name"
-                                    :to="`/galleries/${gallery.id}`"
+                                    :to="`/medias/${gallery.id}`"
                                 />
                             </div>
                             <div class="w-full text-center font-light opacity-60" v-else>There are no galleries under this category.</div>

nuxt.config.ts

@@ -7,6 +7,10 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   extends: ['@nuxt/ui-pro'],
 
+  colorMode: {
+    preference: 'light'
+  },
+
   modules: [
     "@nuxt/ui",
     "@nuxt/fonts",