Enhance Website with Overhauled Download Page, New Branding Section, and UI Improvements

.example.env

@@ -1,4 +1,6 @@
 NEXT_PUBLIC_GTM_ID=
 NEXT_PUBLIC_SANITY_DATASET=
 NEXT_PUBLIC_SANITY_PROJECT_ID=
-NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_BASE_URL=
+GITHUB_ACCESS_TOKEN=
+ANALYZE=

.gitignore

@@ -9,6 +9,8 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+package-lock.json
+yarn.lock
 
 # testing
 /coverage
@@ -24,10 +26,12 @@
 .DS_Store
 *.pem
 
-# debug
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+.pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
 .env*
@@ -39,5 +43,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# IDE environments
+.vscode
 .idea
 .open-next
+.vimrc
+.nanorc
+.stackblitzrc
+sandbox.config.json

.husky/pre-commit

@@ -16,15 +16,6 @@ if [ $? -ne 0 ]; then
     exit 1
 fi
 
-# Stage changes made by Prettier
-echo "📂 Staging formatting changes..."
-git add .
-
-# Ensure there are staged changes before proceeding
-if git diff --cached --quiet; then
-    echo "❌ No changes to commit."
-    exit 1
-fi
 
 echo "✅ All pre-commit checks passed! 🎉"
 exit 0

CONTRIBUTING.md

@@ -73,6 +73,32 @@ feature/#1-init
 
 - https://gist.github.com/seunggabi/87f8c722d35cd07deb3f649d45a31082
 
+### Constant Naming
+
+We follow specific patterns for naming constants based on their structure and usage:
+
+#### Interface Names
+
+- Use PascalCase
+- Descriptive of the data structure
+- Example: `HeaderLink`, `SettingsSidebarItem`, `Footer`
+
+#### Constant Arrays/Objects
+
+- Use UPPER_SNAKE_CASE for global constants
+- Use camelCase for exported object instances
+- Examples:
+
+  ```typescript
+  // Global constants
+  export const SETTINGS_SIDEBAR_ITEMS: SettingsSidebarItem[];
+  export const LINKS: Record<string, string>;
+
+  // Object instances
+  export const header: HeaderLink[];
+  export const footer: Footer[];
+  ```
+
 ## Development Environmental Variables
 
 Place .env file in the root of project. File content:

README.md

@@ -7,16 +7,35 @@
 ![Commit Activity](https://img.shields.io/github/commit-activity/m/Redot-Engine/redot-website?color=FFA726&label=commits&style=for-the-badge)
 ![Last Commit](https://img.shields.io/github/last-commit/Redot-Engine/redot-website?color=FFA726&label=last%20commit&style=for-the-badge)
 
+<br />
 <div align="center">
+  <a href="https://github.com/Redot-Engine/redot-website">
+    <img src=".github/assets/logo.png" alt="Logo" width="60" height="60">
+  </a>
+  <h1 align="center">Redot Website</h1>
+  <p align="center">
+    This is the official website for the <strong>Redot Engine</strong>, providing information, resources, and updates about the engine.
+    <br />
+    <a href="https://github.com/Redot-Engine/redot-website/issues/new?template=bug_report.yml">Report Bug</a>
+    &middot;
+    <a href="https://github.com/Redot-Engine/redot-website/issues/new?template=feature_request.yml">Request Feature</a>
+  </p>
+</div>
 
-<h1 align="center">Redot Engine Website</h1>
+## Built With
 
-This is the official website for the **Redot Engine**, providing information, resources, and updates about the engine.
+This project leverages a variety of modern web frameworks and libraries to deliver a robust and flexible website. Below are the primary technologies used:
 
-</div>
+- [![Next][Next.js]][Next-url]
+- [![React][React.js]][React-url]
+- [![TailwindCSS][TailwindCSS]][TailwindCSS-url]
+- [![Sanity][Sanity]][Sanity-url]
+- [![FramerMotion][FramerMotion]][FramerMotion-url]
 
 ## Build from source
 
+Bun, Node.js, Deno and others can be used, but we are using Bun.
+
 ### Install Bun
 
 Bun is a fast JavaScript runtime like Node.js, but with a built-in package manager. If you haven't installed it yet, you can do so by running:
@@ -40,7 +59,7 @@ cd redot-website
 bun install
 ```
 
-### Read CONTRIBUTING.md and Setting up .env for development
+## Read CONTRIBUTING.md and Setting up .env for development
 
 Please read [CONTRIBUTING.md](CONTRIBUTING.md) before you start your contribution development.
 
@@ -60,6 +79,10 @@ Build the Next.js application for production using the following command:
 bun build
 ```
 
+## Hardware Requirement
+
+Unfortunately this project does not work with old hardwares. We recommend to use recent hardware.
+
 ## Contributors
 
 <a href="https://github.com/Redot-Engine/redot-website/graphs/contributors">
@@ -69,3 +92,14 @@ bun build
 ## License
 
 The Redot Engine Website is licensed under the [MIT License](LICENSE).
+
+[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+[Next-url]: https://nextjs.org/
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/
+[TailwindCSS]: https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white
+[TailwindCSS-url]: https://tailwindcss.com/
+[Sanity]: https://img.shields.io/badge/Sanity-FF1943?style=for-the-badge&logo=sanity&logoColor=white
+[Sanity-url]: https://www.sanity.io/
+[FramerMotion]: https://img.shields.io/badge/Framer%20Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white
+[FramerMotion-url]: https://www.framer.com/motion/

SECURITY.md

@@ -5,4 +5,6 @@ If you find any security-related vulnerabilities, please let us know through one
 - Open an issue directly (ensure sensitive information, such as site details and the actual project, is hidden).
 - Contact us via our [Discord server](https://discord.gg/redot).
 
+Also, you can find ways to contact us on our [contact page](https://www.redotengine.org/contact).
+
 Thank you for your cooperation!

actions/cookieConsent.ts

@@ -0,0 +1,20 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { COOKIE_CONSENT_MAX_AGE } from "@/constants/common/cookie";
+
+export async function setCookieConsent() {
+  const cookieStore = await cookies();
+  cookieStore.set({
+    name: "cookieConsent",
+    value: "true",
+    path: "/",
+    maxAge: COOKIE_CONSENT_MAX_AGE,
+    sameSite: "lax",
+  });
+}
+
+export async function getCookieConsent(): Promise<string | undefined> {
+  const cookieStore = await cookies();
+  return cookieStore.get("cookieConsent")?.value;
+}

actions/language.ts

@@ -1,13 +1,27 @@
 "use server";
 
 import { cookies } from "next/headers";
+import { getCookieConsent } from "@/actions/cookieConsent";
+import { COOKIE_CONSENT_MAX_AGE } from "@/constants/common/cookie";
 
 export async function setLanguage(value: string) {
+  const consent = (await getCookieConsent()) === "true";
   const cookieStore = await cookies();
-  cookieStore.set("locale", value);
+  if (consent) {
+    cookieStore.set("locale", value, {
+      maxAge: COOKIE_CONSENT_MAX_AGE,
+      path: "/",
+      sameSite: "lax",
+    });
+  } else {
+    cookieStore.set("locale", value, {
+      path: "/",
+      sameSite: "lax",
+    });
+  }
 }
 
 export async function getLanguage() {
   const cookieStore = await cookies();
-  return cookieStore.get("locale")?.value || "en";
+  return cookieStore.get("locale")?.value ?? "en";
 }

actions/settings.ts

@@ -1,19 +1,52 @@
 "use server";
 
 import { cookies } from "next/headers";
+import { getCookieConsent } from "@/actions/cookieConsent";
+import { SETTINGS_COOKIE_MAX_AGE } from "@/constants/common/cookie";
 
-export async function saveSettingsBlogLayout(layout: string) {
+type Settings = {
+  blogLayout: string;
+};
+
+type CookieOptions = {
+  httpOnly: boolean;
+  secure: boolean;
+  sameSite: "strict" | "lax" | "none";
+  path: string;
+  maxAge?: number;
+};
+
+const SETTINGS_COOKIE = "settings";
+const DEFAULT_SETTINGS: Settings = {
+  blogLayout: "new",
+};
+
+export async function saveSettings(
+  newSettings: Partial<typeof DEFAULT_SETTINGS>
+) {
+  const consent = (await getCookieConsent()) === "true";
   const cookieStore = await cookies();
-  cookieStore.set("blogLayout", layout, {
+  const current = await getSettings();
+  const updated = { ...current, ...newSettings };
+  const cookieOptions: CookieOptions = {
     httpOnly: true,
     secure: process.env.NODE_ENV === "production",
     sameSite: "strict",
-    maxAge: 60 * 60 * 24 * 30,
     path: "/",
-  });
+  };
+  if (consent) {
+    cookieOptions.maxAge = SETTINGS_COOKIE_MAX_AGE;
+  }
+  cookieStore.set(SETTINGS_COOKIE, JSON.stringify(updated), cookieOptions);
 }
 
-export async function getSettingsBlogLayout() {
+export async function getSettings(): Promise<typeof DEFAULT_SETTINGS> {
   const cookieStore = await cookies();
-  return cookieStore.get("blogLayout")?.value || "new";
+  const raw = cookieStore.get(SETTINGS_COOKIE)?.value;
+  if (!raw) return { ...DEFAULT_SETTINGS };
+  try {
+    return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
+  } catch {
+    return { ...DEFAULT_SETTINGS };
+  }
 }

app/(admin)/studio/[[...tool]]/page.tsx

@@ -1,22 +1,9 @@
-/**
- * This route is responsible for the built-in authoring environment using Sanity Studio.
- * All routes under your studio path is handled by this file using Next.js' catch-all routes:
- * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
- *
- * You can learn more about the next-sanity package here:
- * https://github.com/sanity-io/next-sanity
- */
-
 import { NextStudio } from "next-sanity/studio";
 import config from "../../../../sanity.config";
-import { Metadata } from "next";
 
-export const metadata: Metadata = {
-  robots: {
-    index: false,
-    follow: true,
-  },
-};
+export const dynamic = "force-static";
+
+export { metadata, viewport } from "next-sanity/studio";
 
 export default function StudioPage() {
   return <NextStudio config={config} />;

app/(main)/blog/[slug]/not-found.tsx

@@ -1,35 +1,48 @@
 "use client";
 
-import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
+import { MascotImage } from "@/components/shared/MascotImage";
+import { useRouter } from "next/navigation";
+import { IconArrowLeft } from "@tabler/icons-react";
 
 export default function NotFound() {
-  const t = useTranslations("articleNotFound");
+  const router = useRouter();
+  const t = useTranslations("blog.notFound");
 
   return (
     <section className="flex min-h-screen flex-col">
       <div className="flex-grow overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-32 dark:from-background dark:to-[#9F1E1E]/20">
         <div className="mx-auto max-w-[540px]">
-          <div className="flex flex-col items-center justify-center gap-4">
-            <Image
-              src="https://image.redotengine.org/redotchan.png"
-              alt="Redotchan"
-              width={160}
-              height={160}
-            />
-            <div className="flex flex-col">
-              <h2 className="mt-5 text-center text-4xl font-bold tracking-tighter md:text-[54px] md:leading-[60px]">
-                {t("title")}
-              </h2>
-              <p className="mt-5 text-center text-xl tracking-tighter text-muted-foreground md:text-[22px] md:leading-[30px]">
-                {t("description")}
-              </p>
+          <div className="flex flex-col items-center justify-center gap-6">
+            <MascotImage />
+            <div className="flex flex-col items-center justify-center gap-4">
+              <div className="space-y-2">
+                <h2 className="text-center text-4xl font-bold tracking-tighter md:text-[54px] md:leading-[60px]">
+                  {t("title")}
+                </h2>
+                <p className="text-center text-xl tracking-tighter text-muted-foreground md:text-[22px] md:leading-[30px]">
+                  {t("description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
+              <Button
+                size="lg"
+                variant="outline"
+                onClick={() => router.back()}
+                asChild
+              >
+                <Link href="#" onClick={() => router.back()}>
+                  <IconArrowLeft />
+                  {t("goBack")}
+                </Link>
+              </Button>
+              <Button size="lg" asChild>
+                <Link href="/">{t("goHome")}</Link>
+              </Button>
             </div>
-            <Button asChild>
-              <Link href="/blog">{t("backButton")}</Link>
-            </Button>
           </div>
         </div>
       </div>