style: update CustomHeader and documentation hero section

- Added a link to the homepage in the CustomHeader component for improved navigation.
- Updated the hero section title in documentation to use a consistent color scheme and adjusted the variant for better visual hierarchy.

Author: geromegrignon

src/components/ui/CustomHeader.astro

@@ -5,11 +5,13 @@ import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 ---
 
 <nav class="flex items-center justify-between">
+  <a class="no-underline hover:underline text-inherit" href="/">
 <h1 class="font-[Geist] text-base lg:text-xl flex items-center">
      <span>tutorials.</span>
     <span class="text-[#02BCFF]">angular.</span>
     <span>courses</span>
 </h1>
+</a>
 <Search />
 <div class="flex items-center gap-6">
     <div class="flex items-center gap-4">

src/content/docs/en/index.mdx

@@ -6,7 +6,7 @@ hero:
   title: |
     Start learning
     <span
-      class="text-7xl text-[var(--sl-color-accent)] uppercase font-bold">
+      class="text-7xl text-[#02BCFF] uppercase font-bold">
       Angular
     </span>
   tagline: Discover Angular with our community tutorial
@@ -16,10 +16,7 @@ hero:
     - text: Getting Started
       link: en/getting-started/introduction
       icon: right-arrow
-    - text: Discover official tutorials
-      link: https://angular.dev/tutorials
-      icon: external
-      variant: minimal
+      variant: secondary
 ---
 
 <div class="flex items-end text-3xl font-bold">

src/content/docs/index.mdx

@@ -6,18 +6,15 @@ hero:
   title: |
     <span class="font-[BungeeHairline]">Start learning</span>
     <span
-      class="text-7xl uppercase font-bold font-[BungeeInline]">
+      class="text-7xl uppercase font-bold font-[BungeeInline] text-[#02BCFF]">
       Angular
     </span>
   tagline: Discover Angular with our community tutorial
   actions:
     - text: Getting Started
       link: en/getting-started/introduction
       icon: right-arrow
-    - text: Discover official tutorials
-      link: https://angular.dev/tutorials
-      icon: external
-      variant: minimal
+      variant: secondary
 ---
 
 <div class="flex items-end text-3xl font-[Geist]">

src/styles/global.css

@@ -42,6 +42,10 @@ html {
   --sl-icon-color: black;
 }
 
+:root:not([data-theme="light"]) {
+  --sl-icon-color: white;
+}
+
 @theme {
   /*
 	Configure your Tailwind theme that will be used by Starlight.