feat: update fonts and homepage image (#1851)

* This commit addresses feature request #1848, update homepage messaging + visuals
#1848

Update index.md: Revise hero section with new text and tagline, and change image source

* feat: update fonts to Youth and Untitled Sans

Addresses #1850

- Replace Ruberoid with Youth for titles
- Replace Inter with Untitled Sans for body text
- Update font paths and formats in style.css and config.ts
- Add font-display: swap for better loading performance
- Add specific font family classes for VPDoc and VPHome components

Youth is now used for titles (h1-h6) and Untitled Sans for regular text,
following the typography guidelines.

* Apply suggestions from code review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update .vitepress/theme/style.css

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: font path

---------

Co-authored-by: Josh Stein <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

.vitepress/config.ts

@@ -150,54 +150,57 @@ export default {
     ],
 
     transformHead(assets: string[]): HeadConfig[] {
-      const ruberoidLightFont = assets.find(
-        (file) => /Ruberoid-Light\.\w+\.otf/,
+      const youthRegularFont = assets.find(
+        (file) => /youth\/Youth-Regular\.\w+\.woff2/
       );
-      const ruberoidRegularFont = assets.find(
-        (file) => /Ruberoid-Regular\.\w+\.otf/,
+      const untitledSansRegularFont = assets.find(
+        (file) => /Untitled-Sans-Regular\.\w+\.woff2/
+      );
+      const untitledSansMediumFont = assets.find(
+        (file) => /Unititled-Sans-Medium\.\w+\.woff2/
       );
-      const ruberoidBoldFont = assets.find((file) => /Ruberoid-Bold\.\w+\.otf/);
 
       const headConfig: HeadConfig[] = [];
 
-      if (ruberoidLightFont) {
+      if (youthRegularFont) {
         headConfig.push([
           "link",
           {
             rel: "preload",
-            href: ruberoidLightFont,
+            href: youthRegularFont,
             as: "font",
-            type: "font/opentype",
+            type: "font/woff2",
             crossorigin: "",
           },
         ]);
       }
 
-      if (ruberoidRegularFont) {
+      if (untitledSansRegularFont) {
         headConfig.push([
           "link",
           {
             rel: "preload",
-            href: ruberoidRegularFont,
+            href: untitledSansRegularFont,
             as: "font",
-            type: "font/opentype",
+            type: "font/woff2",
             crossorigin: "",
           },
         ]);
       }
 
-      if (ruberoidBoldFont) {
+      if (untitledSansMediumFont) {
         headConfig.push([
           "link",
           {
             rel: "preload",
-            href: ruberoidBoldFont,
+            href: untitledSansMediumFont,
             as: "font",
-            type: "font/opentype",
+            type: "font/woff2",
             crossorigin: "",
           },
         ]);
       }
+
       return headConfig;
     },
   },

.vitepress/theme/style.css

@@ -92,12 +92,32 @@
 }
 
 @font-face {
-  font-family: "RuberoidBold";
-  src: url("/fonts/Ruberoid/Ruberoid-Bold.otf") format("opentype");
+  font-family: "Untitled-Sans";
+  src: url("/fonts/untitled-sans/untitled-sans-regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Untitled-Sans";
+  src: url("/fonts/untitled-sans/untitled-sans-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Youth";
+  src: url("/fonts/youth/Youth-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 :root {
-  --font-primary: "RuberoidBold", sans-serif;
+  --font-primary: "Youth", sans-serif;
+  --font-body: "Untitled-Sans", sans-serif;
 }
 
 h1,
@@ -126,3 +146,15 @@ h6 {
   height: 100%;
   border: none;
 }
+
+body {
+  font-family: var(--font-body);
+}
+
+.VPDoc {
+  font-family: var(--font-body);
+}
+
+.VPHome {
+  font-family: var(--font-body);
+}

index.md

@@ -5,10 +5,10 @@ titleTemplate: ":title"
 
 hero:
   name: "Celestia"
-  text: "The first modular blockchain network"
-  tagline: Celestia is a modular data availability network that securely scales with the number of users, making it easy for anyone to launch their own blockchain.
+  text: "Build whatever"
+  tagline: Celestia is the modular blockchain powering unstoppable applications with full-stack customizability.
   image:
-    src: /modular.svg
+    src: /Blobspace.png
     alt: Celestia
   actions:
     - theme: brand

public/fonts/youth/Youth-Regular.woff

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ttFont sfntVersion="OTTO" ttLibVersion="4.55">
+
+</ttFont>