Merge develop into main

README.md

@@ -16,6 +16,16 @@ Welcome to the Redot Game Engine Website project! This repository is the front-e
 - 🌍 **Community Hub**: Engage with other Redot users through discord, FAQs, and community events.
 - 💻 **Responsive Design**: A fully responsive site that looks great on any device.
 
+## Running locally
+
+### Prerequisites
+Make sure [nodejs](https://nodejs.org/en/download/) is installed.
+
+### To build and run
+```
+npm install
+npm run dev
+```
 
 ## 🛠️ Technologies Used
 

components/MainPage/HeroSlideshow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :style="{ backgroundImage: `url(${currentImage})` }" class="hero-background">
-    <slot></slot>
+  <div ref="heroBackground" :style="backgroundStyle" class="hero-background">
+    <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 
 import gamePreview01 from "@/assets/images/game_preview/game_preview_01.avif";
 import gamePreview02 from "@/assets/images/game_preview/game_preview_02.avif";
@@ -23,12 +23,23 @@ const images = [
   gamePreview07,
 ];
 
+const heroBackground = ref(null);
+const isImageLoaded = ref(false);
 const currentImage = ref(images[0]);
 let currentIndex = 0;
 
+const backgroundStyle = computed(() => ({
+  backgroundImage: isImageLoaded.value ? `url(${currentImage.value})` : "none",
+  backgroundColor: "#000", // Fallback color while image is loading
+  height: "100vh", // Ensure the background takes up the full viewport height
+}));
+
 const preloadImages = () => {
   images.forEach((src) => {
     const img = new Image();
+    img.onload = () => {
+      isImageLoaded.value = true;
+    };
     img.src = src;
   });
 };
@@ -38,23 +49,38 @@ const changeBackground = () => {
   currentImage.value = images[currentIndex];
 };
 
+const updateHeight = () => {
+  if (heroBackground.value) {
+    heroBackground.value.style.height = `${window.innerHeight}px`;
+  }
+};
+
 onMounted(() => {
   preloadImages();
-  setInterval(changeBackground, 5000); // Change image every 5 seconds
+  setInterval(changeBackground, 5000);
+  updateHeight();
+  window.addEventListener("resize", updateHeight);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateHeight);
 });
 </script>
 
 <style scoped lang="scss">
 .hero-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  position: relative;
+  width: 100%;
   background-size: cover;
   background-position: center;
   transition: background-image 1s ease-in-out;
 
+  @media only screen and (max-width: 600px) {
+    &::before {
+      backdrop-filter: blur(10px);
+    }
+  }
+
   &::before {
     content: "";
     position: absolute;
@@ -68,6 +94,7 @@ onMounted(() => {
         #0000 calc(100% - 100px),
         #000f 100%
     );
+    pointer-events: none;
   }
 }
 </style>

components/MainPage/MainPageGetInvolvedItem.vue

@@ -13,9 +13,15 @@ const { buttonText = "Join" } = defineProps<{
 
 <template>
   <div class="get-involved-item">
-    <img :src="image" alt="" class="get-involved-item-image">
-    <SectionTitle class="get-involved-item-title" small>{{ title }}</SectionTitle>
-    <SectionDescription class="get-involved-item-description">{{ description }}</SectionDescription>
+    <a :href="link">
+      <img :src="image" alt="" class="get-involved-item-image" />
+    </a>
+    <SectionTitle class="get-involved-item-title" small>
+      {{ title }}
+    </SectionTitle>
+    <SectionDescription class="get-involved-item-description">
+      {{ description }}
+    </SectionDescription>
     <LinkButton :href="link" :type="buttonType">
       {{ buttonText }}
       <Icon name="arrow" />

components/MainPage/MainPageHero.vue

@@ -1,90 +1,94 @@
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
 import HeroSlideshow from "~/components/MainPage/HeroSlideshow.vue";
+
 const links = useLinks();
 const isMobile = useIsMobile();
-</script>
 
-<template>
-  <HeroSlideshow class="hero">
-    <Header/>
+const heroHeight = ref("100vh");
 
-    <div class="hero-center">
-      <img alt="" class="hero-center-logo" src="~/assets/images/redot-logo-white.svg">
+const updateHeroHeight = () => {
+  heroHeight.value = `${window.innerHeight}px`;
+};
 
-      <SectionTitle small>Open‑source game engine for&nbsp;everyone.</SectionTitle>
+onMounted(() => {
+  updateHeroHeight();
+  window.addEventListener("resize", updateHeroHeight);
+});
 
-      <SectionDescription>No strings attached.</SectionDescription>
+onUnmounted(() => {
+  window.removeEventListener("resize", updateHeroHeight);
+});
+</script>
 
-      <LinkButton :href="links.releasePage" class="hero-center-button" type="red">
-        Download
-        <Icon name="arrow"/>
-      </LinkButton>
-    </div>
+<template>
+  <HeroSlideshow :style="{ height: heroHeight }" class="hero">
+    <Header/>
 
-    <div class="hero-center hero-center--socials">
-      <NuxtLink :href="links.githubUrl" class="social-info">
-        <div class="social-icon">
-          <img alt="GitHub" src="~/assets/images/social-github.svg">
-        </div>
-        4.1k<br v-if="isMobile"> stars
-      </NuxtLink>
-      <NuxtLink :href="links.discordUrl" class="social-info">
-        <div class="social-icon">
-          <img alt="Discord" src="~/assets/images/social-discord.svg">
-        </div>
-        8.5k<br v-if="isMobile"> members
-      </NuxtLink>
-      <NuxtLink :href="links.twitterUrl" class="social-info">
-        <div class="social-icon">
-          <img alt="Twitter" src="~/assets/images/social-twitter.svg">
-        </div>
-        20.4k<br v-if="isMobile"> followers
-      </NuxtLink>
-      <NuxtLink :href="links.redditUrl" class="social-info">
-        <div class="social-icon">
-          <img alt="Reddit" src="~/assets/images/social-reddit.svg">
-        </div>
-        680<br v-if="isMobile"> members
-      </NuxtLink>
+    <div class="hero-content">
+      <div class="hero-center">
+        <img alt="" class="hero-center-logo" src="~/assets/images/redot-logo-white.svg">
+
+        <SectionTitle small>Open‑source game engine for&nbsp;everyone.</SectionTitle>
+
+        <SectionDescription>No strings attached.</SectionDescription>
+
+        <LinkButton :href="links.releasePage" class="hero-center-button" type="red">
+          Download
+          <Icon name="arrow"/>
+        </LinkButton>
+      </div>
+
+      <div class="hero-center hero-center--socials">
+        <NuxtLink :href="links.githubUrl" class="social-info">
+          <div class="social-icon">
+            <img alt="GitHub" src="~/assets/images/social-github.svg">
+          </div>
+          4.2k<br v-if="isMobile"> stars
+        </NuxtLink>
+        <NuxtLink :href="links.discordUrl" class="social-info">
+          <div class="social-icon">
+            <img alt="Discord" src="~/assets/images/social-discord.svg">
+          </div>
+          9.1k<br v-if="isMobile"> members
+        </NuxtLink>
+        <NuxtLink :href="links.twitterUrl" class="social-info">
+          <div class="social-icon">
+            <img alt="Twitter" src="~/assets/images/social-twitter.svg">
+          </div>
+          20.6k<br v-if="isMobile"> followers
+        </NuxtLink>
+        <NuxtLink :href="links.redditUrl" class="social-info">
+          <div class="social-icon">
+            <img alt="Reddit" src="~/assets/images/social-reddit.svg">
+          </div>
+          771<br v-if="isMobile"> members
+        </NuxtLink>
+      </div>
+
+      <div class="hero-game-name">Game name</div>
     </div>
-
-    <div class="hero-game-name">Game name</div>
   </HeroSlideshow>
 </template>
 
-
 <style scoped lang="scss">
 @use "@/assets/styles/mixins";
 
 .hero {
   position: relative;
-  height: 100dvh;
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  justify-content: center;
-
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(to bottom,
-        #000f 0%,
-        #0000 100px,
-        #0000 calc(100% - 100px),
-        #000f 100%
-    );
-  }
-
+}
 
-  @media (max-width: 410px) {
-    padding: 0 10px;
-  }
+.hero-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  position: relative;
 }
 
 .hero-center {
@@ -116,7 +120,7 @@ const isMobile = useIsMobile();
 }
 
 .social-info {
-  font-size: clamp(12px, calc(20px + (36–20) * (100vw - 768px)/(1920–768)), 48px);
+  font-size: clamp(12px, calc(20px + (36–20) * (100vw - 768px) / (1920–768)), 48px);
   margin: auto;
   display: flex;
   flex-direction: row;
@@ -136,7 +140,6 @@ const isMobile = useIsMobile();
   @include mixins.mobile-and-smaller {
     flex-direction: column;
   }
-
 }
 
 .hero-center-logo {
@@ -159,4 +162,10 @@ const isMobile = useIsMobile();
   bottom: 10px;
   right: 10px;
 }
-</style>
+
+@media (max-width: 410px) {
+  .hero-content {
+    padding: 10px;
+  }
+}
+</style>