Merge pull request #120 from Redot-Engine/develop

Merge develop into main

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,14 @@
+---
+name: Bug report
+about: Report incorrect or outdated documentation
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Issue description:**
+
+**URL to the web page:**
+
+If you know how to fix the issue you are reporting please
+consider opening a pull request. 

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+
+contact_links:
+  - name: Redot community channels
+    url: https://discord.gg/redot
+    about: Please ask for technical support on one of the other community channels, not here.
+
+  - name: Redot proposals
+    url: https://github.com/redot-engine/redot-proposals
+    about: Please submit engine feature proposals on the Redot proposals repository, not here.
+
+  - name: Main Redot repository
+    url: https://github.com/Redot-Engine
+    about: Report engine bugs on the main Redot repository

.github/ISSUE_TEMPLATE/enhancement_request.md

@@ -0,0 +1,11 @@
+---
+name: Enhancement request
+about: Suggest new documentation or improving existing documentation
+title: ''
+labels: enhancement
+assignees: ''
+---
+
+**Issue description:**
+
+**URL to the web page (if already existing):**

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+## Issue number
+> If applicable, link the issue number here by typing '#'
+
+## Description
+Enter short description

README.md

@@ -8,7 +8,6 @@ Welcome to the Redot Game Engine Website project! This repository is the front-e
   <img src="./assets/images/readme/screenshot.png" width="80%">
 </div>
 
-
 ## 🚀 Features
 
 - 🌟 **Comprehensive Documentation**: Easily browse and search through Redot's game engine documentation.
@@ -19,14 +18,28 @@ Welcome to the Redot Game Engine Website project! This repository is the front-e
 ## Running locally
 
 ### Prerequisites
+
 Make sure [nodejs](https://nodejs.org/en/download/) is installed.
 
 ### To build and run
+
 ```
 npm install
 npm run dev
 ```
 
+### Public images and image compression
+
+Place public images in `public_images` folder.
+
+For compressing image,
+
+```
+npm run compress-image
+```
+
+⚠️ Most of time you wouldn't need to run this. This is going to remove old images and create new compressed images.
+
 ## 🛠️ Technologies Used
 
 This project uses the following technologies:
@@ -37,5 +50,6 @@ This project uses the following technologies:
 - **Node.js & npm**: For package management and running development tools.
 
 ### 🙌 Contributing:
+
 We welcome contributions from everyone! To get started, please read our [Contributing information](https://github.com/redot-engine/redot-landing-page/blob/main/CONTRIBUTING.md) to learn how to contribute to the project, set up the development environment, and submit pull requests.
-We expect all contributors to uphold our community standards. Please review our [Code of Conduct](https://github.com/redot-engine/redot-landing-page/blob/main/CODE_OF_CONDUCT.md) to learn more about our expectations regarding respectful collaboration and behavior.
+We expect all contributors to uphold our community standards. Please review our [Code of Conduct](https://github.com/redot-engine/redot-landing-page/blob/main/CODE_OF_CONDUCT.md) to learn more about our expectations regarding respectful collaboration and behavior.

app.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 useHead({
-  titleTemplate: title => title ? `${title} · Redot Engine` : "Redot Engine: Open source game engine for everyone.",
+  titleTemplate: (title) =>
+    title
+      ? `${title} · Redot Engine`
+      : "Redot Engine: Open source game engine for everyone.",
   meta: [
     { name: "viewport", content: "width=device-width, initial-scale=1" },
-    { name: "description", content: "Open source game engine for everyone. No strings attached." },
+    {
+      name: "description",
+      content: "Open source game engine for everyone. No strings attached.",
+    },
   ],
   htmlAttrs: {
     lang: "en",
@@ -13,11 +19,12 @@ useHead({
 useSeoMeta({
   ogType: "website",
   ogTitle: "Redot Engine",
-  ogImage: "/img/seo/banner.png",
+  ogImage: "https://www.redotengine.org/img/seo/banner.avif",
   twitterCard: "summary_large_image",
   twitterTitle: "Redot Engine",
-  twitterDescription: "Open source game engine for everyone. No strings attached.",
-  twitterImage: "/img/seo/banner.png",
+  twitterDescription:
+    "Open source game engine for everyone. No strings attached.",
+  twitterImage: "https://www.redotengine.org/img/seo/banner.avif",
 });
 </script>
 
@@ -30,14 +37,14 @@ useSeoMeta({
 
 <style>
 @import "@/assets/styles/reset.css";
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.2;
   color: #fff;

assets/styles/_mixins.scss

@@ -9,3 +9,9 @@
         @content;
     }
 }
+
+@mixin desktop-and-larger {
+    @media (min-width: 1024px) {
+        @content;
+    }
+}

components/DownloadPage/DownloadPageHero.vue

@@ -0,0 +1,119 @@
+<template>
+  <section class="download-hero">
+    <div class="download-hero__content">
+      <div class="download-hero__header">
+        <span class="download-hero__subtitle">
+          Download Redot for {{ platform }}
+        </span>
+        <h1 class="download-hero__title">Ignite Your Imagination</h1>
+      </div>
+      <span class="download-hero__description">
+        Download Redot Engine, the powerful platform for building 2D and 3D
+        cross-platform games and interactive <br />
+        experiences.
+      </span>
+      <div class="download-hero__buttons">
+        <LinkButton :href="downloadLink" type="white">
+          Download latest
+          <Icon :name="platformIcons[platform] ?? 'windows'" />
+        </LinkButton>
+        <LinkButton :href="links.releasePage" type="ghost">
+          Other versions
+          <Icon name="arrow" />
+        </LinkButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { getPlatformDownloadLink } from "~/lib/platformDownloadLink";
+
+const links = useLinks();
+
+const { platform } = defineProps<{
+  platform: string;
+}>();
+
+const downloadLink = computed(() => getPlatformDownloadLink(platform));
+
+const platformIcons = {
+  windows: "windows",
+  mac: "apple",
+  apple: "apple",
+  linux: "linux",
+  android: "android",
+  ios: "apple",
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/assets/styles/mixins";
+
+.download-hero {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1.5rem;
+    overflow: hidden;
+    padding: 4.5rem 3.5rem;
+    border-radius: 1rem;
+    background-size: cover;
+    background-image: url("/img/download/background-hero.avif");
+
+    @include mixins.tablet-and-smaller {
+      padding: 4.5rem 1.5rem;
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+  }
+
+  &__title {
+    font-weight: 800;
+    font-size: 2.25rem;
+    letter-spacing: -1px;
+    line-height: 2.5rem;
+
+    @include mixins.mobile-and-smaller {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: 0;
+    }
+  }
+
+  &__subtitle {
+    font-size: 1rem;
+    font-weight: 200;
+    line-height: 1.5rem;
+    color: rgba(#fff, 80%);
+    letter-spacing: 0.15rem;
+    text-transform: uppercase;
+
+    @include mixins.mobile-and-smaller {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+
+  &__description {
+    font-weight: 200;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: row;
+    column-gap: 1rem;
+
+    @include mixins.mobile-and-smaller {
+      flex-direction: column;
+      row-gap: 1rem;
+    }
+  }
+}
+</style>