V5.21

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "type": "module",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -11,26 +11,26 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
-    "@astrojs/mdx": "^3.0.1",
-    "@astrojs/rss": "^4.0.6",
-    "@astrojs/sitemap": "^3.1.5",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fontsource-variable/instrument-sans": "^5.1.0",
-    "@fontsource-variable/space-grotesk": "^5.0.18",
-    "@fontsource/instrument-serif": "^5.0.22",
-    "astro": "^4.9.2",
-    "astro-critters": "^2.1.10",
-    "astro-pagefind": "^1.5.0",
+    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/rss": "^4.0.11",
+    "@astrojs/sitemap": "^3.3.0",
+    "@astrojs/tailwind": "^5.1.5",
+    "@fontsource-variable/instrument-sans": "^5.2.5",
+    "@fontsource-variable/space-grotesk": "^5.2.6",
+    "@fontsource/instrument-serif": "^5.2.5",
+    "astro": "^4.16.18",
+    "astro-critters": "^2.2.1",
+    "astro-pagefind": "^1.8.3",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.16",
     "astro-robots-txt": "^1.0.0",
-    "pagefind": "^1.1.0",
-    "prettier": "^3.2.5",
+    "pagefind": "^1.3.0",
+    "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.14",

src/components/Footer.astro

@@ -4,7 +4,7 @@ import {
     useTranslations,
     useTranslatedPath,
 } from "@i18n/utils";
-import FutureblurLogo from "./Navigation/FutureblurLogo.astro";
+import FutureblurLogo from "./Icons/FutureblurLogo.astro";
 import BackToTop from "./News/BackToTop.astro";
 
 import { footerGroup } from "@consts";

src/components/Header.astro

@@ -3,7 +3,7 @@ import LocaleHeader from "./LocaleHeader.astro";
 import NavBar from "./Navigation/NavBar.astro";
 ---
 
-<LocaleHeader />
 <header>
+    <LocaleHeader />
     <NavBar />
 </header>

src/components/Home/Promotion.astro

@@ -0,0 +1,59 @@
+---
+import { Image } from "astro:assets";
+
+import type { ImageMetadata } from "astro";
+import type { InferEntrySchema } from "astro:content";
+
+type Props = {
+    data: InferEntrySchema<"promotion">;
+};
+
+const { data } = Astro.props;
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+    "/src/assets/home/*.{png,jpg,jpeg,gif,webp,svg}",
+    {
+        eager: true,
+    },
+);
+
+const promotionImagePath = `/src/assets/home/${data.image}`;
+const promotionImage = images[promotionImagePath];
+if (!promotionImage) {
+    throw new Error(`Image not found: ${promotionImagePath}`);
+}
+---
+
+<a
+    class="relative flex items-center justify-center bg-black"
+    href={data.url}
+    target="_blank"
+>
+    <Image
+        class:list={[
+            "pointer-events-none h-[600px] min-h-[40vh] object-cover md:min-h-0 lg:h-[900px]",
+            data.dimLevel === 1 && "opacity-80",
+            data.dimLevel === 2 && "opacity-60",
+            data.dimLevel === 3 && "opacity-40",
+        ]}
+        alt={data.alt}
+        src={promotionImage.default}
+    />
+    <div class="absolute flex flex-col justify-center gap-3">
+        <h1
+            class="text-center font-serif text-5xl tracking-tight text-white md:text-6xl xl:text-7xl"
+        >
+            {data.title}
+        </h1>
+        <p
+            class="mx-auto max-w-xs text-center text-white md:max-w-md md:text-lg"
+        >
+            {data.subtitle}
+        </p>
+        <span
+            class="button-secondary button-large md:button-larger mx-auto mt-2"
+        >
+            {data.cta}
+        </span>
+    </div>
+</a>

src/components/Navigation/FutureblurLogo.astro → src/components/Icons/FutureblurLogo.astro

@@ -4,10 +4,10 @@ const { lang } = Astro.props;
 
 <a
     href=`/${lang}`
-    class="scale-[85%] fill-black py-2 dark:fill-white"
+    class="scale-[90%] fill-black dark:fill-white"
     aria-label="Go back home"
 >
-    <svg width="28" height="16.263" viewBox="0 0 28 16.263">
+    <svg width="28" height="28" viewBox="0 0 28 16.263">
         <path
             fill-rule="evenodd"
             clip-rule="evenodd"

src/components/LocaleHeader.astro

@@ -3,20 +3,24 @@ import CloseIcon from "./Icons/CloseIcon.astro";
 ---
 
 <div
-    class="mx-auto hidden w-full max-w-screen-lg items-center justify-between gap-3 px-4 py-3 font-mono text-xs text-black"
+    class="mx-auto hidden w-full py-3 font-mono text-xs text-black"
     id="locale-header"
 >
-    <span id="locale-description"
-        >Based on your location, the English version of our site might be a
-        better fit.</span
+    <div
+        class="mx-auto flex w-full max-w-screen-lg items-center justify-between gap-3 px-4"
     >
-    <div class="flex items-center gap-1">
-        <a
-            class="rounded-full bg-black/85 p-1.5 px-3 text-sm text-white"
-            id="locale-switch-button"
-            type="button">Switch</a
+        <span id="locale-description"
+            >Based on your location, the English version of our site might be a
+            better fit.</span
         >
-        <button class="p-2" id="locale-close-button"><CloseIcon /></button>
+        <div class="flex items-center gap-1">
+            <a
+                class="rounded-full bg-black/85 p-1.5 px-3 text-sm text-white"
+                id="locale-switch-button"
+                type="button">Switch</a
+            >
+            <button class="p-2" id="locale-close-button"><CloseIcon /></button>
+        </div>
     </div>
 </div>