refactor: update favicon and integrate new fonts in documentation

- Replaced the Angular logo with a new favicon in the Astro configuration and documentation.
- Added BungeeInline and BungeeHairline font styles to global CSS for enhanced typography.
- Updated hero section in documentation to utilize the new fonts and improved layout.
- Adjusted color variables in global CSS for better visual consistency across themes.

Author: geromegrignon

astro.config.mjs

@@ -11,9 +11,9 @@ export default defineConfig({
   integrations: [
     starlight({
       title: "Angular Tutorials",
-      favicon: "/public/angular-logo.png",
+      favicon: "/public/favicon.svg",
       logo: {
-        src: "/public/angular-logo.png",
+        src: "/public/favicon.svg",
       },
       social: [
         {

public/favicon.svg

@@ -4,14 +4,14 @@ description: Get started learning Angular with our community tutorial
 template: splash
 hero:
   title: |
-    Start learning
+    <span class="font-[BungeeHairline]">Start learning</span>
     <span
-      class="text-7xl text-[var(--sl-color-accent)] uppercase font-bold">
+      class="text-7xl text-[var(--sl-color-accent)] uppercase font-bold font-[BungeeInline]">
       Angular
     </span>
   tagline: Discover Angular with our community tutorial
   image:
-    file: /public/angular-logo.png
+    file: /public/favicon.svg
   actions:
     - text: Getting Started
       link: en/getting-started/introduction
@@ -21,3 +21,15 @@ hero:
       icon: external
       variant: minimal
 ---
+
+<div class="flex items-end text-3xl font-bold">
+  <span class="font-[BungeeHairline] ">Angular Courses</span>
+  <span class="text-[var(--sl-color-accent)] ml-2 font-[BungeeInline]">
+    Lab
+  </span>
+  <span class="ml-2 text-base font-normal">Initiative</span>
+</div>
+
+This tutorial is part of the **Angular Courses Lab** initiative - a community-driven effort to create comprehensive, hands-on learning experiences for Angular developers of all skill levels. Our mission is to provide practical, real-world tutorials that bridge the gap between Angular concepts and actual application development.
+
+Through this initiative, we're building a collection of interactive tutorials that cover everything from basic Angular concepts to advanced patterns, helping developers master Angular through guided, project-based learning.

public/fonts/BungeeHairline-Regular.ttf

@@ -4,34 +4,64 @@
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 
+/* Font faces */
+@font-face {
+  font-family: "BungeeInline";
+  src: url("/fonts/BungeeInline-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "BungeeHairline";
+  src: url("/fonts/BungeeHairline-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Dark mode colors. */
 :root {
-  --sl-color-accent-low: #36113e;
-  --sl-color-accent: #a400c0;
-  --sl-color-accent-high: #e3b6ed;
+  --sl-color-accent-low: #451a03;
+  --sl-color-accent: #f59e0b;
+  --sl-color-accent-high: #f59e0b;
   --sl-color-white: #ffffff;
-  --sl-color-gray-1: #f2e9fd;
-  --sl-color-gray-2: #c7bdd5;
-  --sl-color-gray-3: #9581ae;
-  --sl-color-gray-4: #614e78;
-  --sl-color-gray-5: #412e55;
-  --sl-color-gray-6: #2f1c42;
-  --sl-color-black: #1c1425;
+  --sl-color-gray-1: #f0fdfa;
+  --sl-color-gray-2: #ccfbf1;
+  --sl-color-gray-3: #99f6e4;
+  --sl-color-gray-4: #5eead4;
+  --sl-color-gray-5: #2dd4bf;
+  --sl-color-gray-6: #0f766e;
+  --sl-color-black: #0d1f1f;
+  --sl-color-bg-nav: #0b4f4a;
+  --sl-color-bg-sidebar: #0b4f4a;
+  --sl-color-bg-inline-code: #0b4f4a;
+  --sl-color-hairline: #0d1f1e;
 }
 /* Light mode colors. */
 :root[data-theme="light"] {
-  --sl-color-accent-low: #ebc9f3;
-  --sl-color-accent: #a700c3;
-  --sl-color-accent-high: #4e0e5b;
-  --sl-color-white: #1c1425;
-  --sl-color-gray-1: #2f1c42;
-  --sl-color-gray-2: #412e55;
-  --sl-color-gray-3: #614e78;
-  --sl-color-gray-4: #9581ae;
-  --sl-color-gray-5: #c7bdd5;
-  --sl-color-gray-6: #f2e9fd;
-  --sl-color-gray-7: #f8f4fe;
+  --sl-color-accent-low: #fef3c7;
+  --sl-color-accent: #d97706;
+  --sl-color-accent-high: #451a03;
+  --sl-color-white: #0d1f1f;
+  --sl-color-gray-1: #134e4a;
+  --sl-color-gray-2: #0f766e;
+  --sl-color-gray-3: #0d9488;
+  --sl-color-gray-4: #14b8a6;
+  --sl-color-gray-5: #5eead4;
+  --sl-color-gray-6: #ccfbf1;
+  --sl-color-gray-7: #f0fdfa;
   --sl-color-black: #ffffff;
+  --code-background: red;
+}
+
+.expressive-code .frame pre {
+  background: #01302f !important;
+}
+
+main .content-panel {
+  padding-block-end: 0 !important;
 }
 
 @theme {
@@ -45,3 +75,7 @@
 Add additional Tailwind styles to this file:
 https://tailwindcss.com/docs/adding-custom-styles#using-custom-css
 */
+
+.site-title {
+  font-family: "BungeeInline", sans-serif;
+}