From 9bd4ff79ace32a66705494e1fc3f86ae1b5cf5d2 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 30 Mar 2024 01:18:02 +0400
Subject: [PATCH] Add BrandLogo and LanguagePicker components

Introduced two new components (BrandLogo and LanguagePicker) to the Navbar component. This refactor improves readability and maintainability of the code. Additionally, SVG icons are extracted into reusable components
---
 src/components/BrandLogo.astro              | 61 ++++++++++++++++
 src/components/sections/FooterSection.astro | 55 +-------------
 src/components/sections/Navbar.astro        | 59 ++-------------
 src/components/ui/LanguagePicker.astro      | 79 +++++++++++++++++++++
 src/components/ui/icons/icons.ts            | 15 ++++
 src/components/ui/links/NavLink.astro       | 43 ++++++-----
 src/utils/fr/navigation.ts                  |  2 +-
 src/utils/navigation.ts                     |  2 +-
 src/utils/ui.ts                             |  4 ++
 9 files changed, 193 insertions(+), 127 deletions(-)
 create mode 100644 src/components/BrandLogo.astro
 create mode 100644 src/components/ui/LanguagePicker.astro
 create mode 100644 src/utils/ui.ts

diff --git a/src/components/BrandLogo.astro b/src/components/BrandLogo.astro
new file mode 100644
index 0000000..3a65828
--- /dev/null
+++ b/src/components/BrandLogo.astro
@@ -0,0 +1,61 @@
+---
+const { width } = Astro.props;
+
+interface Props {
+  width: string;
+}
+---
+
+<svg class=`h-auto ${width}` viewBox="0 0 521 226" fill="none">
+  <rect
+    width="78.937"
+    height="18.485"
+    x="269"
+    y="154.911"
+    class="fill-current text-yellow-500 dark:text-yellow-400"
+    fill="currentColor"
+    rx="9.242"
+    transform="rotate(-43.075 269 154.911)"></rect>
+  <rect
+    width="78.937"
+    height="18.485"
+    x="319"
+    y="154.911"
+    class="fill-current text-yellow-500 dark:text-yellow-400"
+    fill="currentColor"
+    rx="9.242"
+    transform="rotate(-43.075 319 154.911)"></rect>
+  <rect
+    width="78.937"
+    height="18.485"
+    x="369.285"
+    y="154.911"
+    class="fill-current text-yellow-500 dark:text-yellow-400"
+    fill="currentColor"
+    rx="9.242"
+    transform="rotate(-43.075 369.285 154.911)"></rect>
+  <rect
+    width="28.464"
+    height="18.485"
+    x="419.57"
+    y="154.911"
+    class="fill-current text-yellow-500 dark:text-yellow-400"
+    fill="currentColor"
+    rx="9.242"
+    transform="rotate(-43.075 419.57 154.911)"></rect>
+  <path
+    class="fill-current text-yellow-500 dark:text-yellow-400"
+    fill="currentColor"
+    d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
+  ></path>
+  <path
+    class="fill-current text-neutral-700 dark:text-neutral-300"
+    fill="currentColor"
+    d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
+  ></path>
+  <path
+    class="fill-current text-neutral-700 dark:text-neutral-300"
+    fill="currentColor"
+    d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
+  ></path>
+</svg>
diff --git a/src/components/sections/FooterSection.astro b/src/components/sections/FooterSection.astro
index fddaf56..96fe575 100644
--- a/src/components/sections/FooterSection.astro
+++ b/src/components/sections/FooterSection.astro
@@ -5,6 +5,7 @@ import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
 import enStrings from "@/utils/navigation.ts";
 import frStrings from "@/utils/fr/navigation.ts";
 import Icon from "../ui/icons/Icon.astro";
+import BrandLogo from "@/components/BrandLogo.astro";
 import { SITE } from "@/data_files/constants";
 
 // Select the correct translation based on the page's lang prop:
@@ -24,59 +25,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
     <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
       <div class="col-span-full lg:col-span-1">
         <!-- Brand Logo -->
-        <svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
-          <rect
-            width="78.937"
-            height="18.485"
-            x="269"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 269 154.911)"></rect>
-          <rect
-            width="78.937"
-            height="18.485"
-            x="319"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 319 154.911)"></rect>
-          <rect
-            width="78.937"
-            height="18.485"
-            x="369.285"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 369.285 154.911)"></rect>
-          <rect
-            width="28.464"
-            height="18.485"
-            x="419.57"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 419.57 154.911)"></rect>
-          <path
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
-          ></path>
-          <path
-            class="fill-current text-neutral-700 dark:text-neutral-300"
-            fill="currentColor"
-            d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
-          ></path>
-          <path
-            class="fill-current text-neutral-700 dark:text-neutral-300"
-            fill="currentColor"
-            d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
-          ></path>
-        </svg>
+        <BrandLogo width="w-32" />
       </div>
       <!-- An array of links for Product and Company sections -->
       {
diff --git a/src/components/sections/Navbar.astro b/src/components/sections/Navbar.astro
index 4adadf0..babbf26 100644
--- a/src/components/sections/Navbar.astro
+++ b/src/components/sections/Navbar.astro
@@ -5,6 +5,8 @@ import NavLink from "../ui/links/NavLink.astro";
 import Authentication from "./Authentication.astro";
 import enStrings from "@/utils/navigation.ts";
 import frStrings from "@/utils/fr/navigation.ts";
+import BrandLogo from "../BrandLogo.astro";
+import LanguagePicker from "../ui/LanguagePicker.astro";
 
 // Select the correct translation based on the page's lang prop:
 const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
@@ -27,59 +29,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
         href={homeUrl}
         aria-label="Brand"
       >
-        <svg class="h-auto w-24" viewBox="0 0 521 226" fill="none">
-          <rect
-            width="78.937"
-            height="18.485"
-            x="269"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 269 154.911)"></rect>
-          <rect
-            width="78.937"
-            height="18.485"
-            x="319"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 319 154.911)"></rect>
-          <rect
-            width="78.937"
-            height="18.485"
-            x="369.285"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 369.285 154.911)"></rect>
-          <rect
-            width="28.464"
-            height="18.485"
-            x="419.57"
-            y="154.911"
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            rx="9.242"
-            transform="rotate(-43.075 419.57 154.911)"></rect>
-          <path
-            class="fill-current text-yellow-500 dark:text-yellow-400"
-            fill="currentColor"
-            d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
-          ></path>
-          <path
-            class="fill-current text-neutral-700 dark:text-neutral-300"
-            fill="currentColor"
-            d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
-          ></path>
-          <path
-            class="fill-current text-neutral-700 dark:text-neutral-300"
-            fill="currentColor"
-            d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
-          ></path>
-        </svg>
+        <BrandLogo width="w-24" />
       </a>
       <!-- Collapse toggle for smaller screens -->
       <div class="ml-auto mr-5 md:hidden">
@@ -133,7 +83,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
     >
       <!-- Navigation links container -->
       <div
-        class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-7 md:gap-y-0 md:ps-7"
+        class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 lg:gap-x-7 md:gap-y-0 md:ps-7"
       >
         <!-- Navigation links and Authentication component -->
         {strings.navBarLinks.map(link => (
@@ -141,6 +91,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
         ))}
 
         <Authentication />
+        <LanguagePicker />
         <!-- ThemeIcon component specifically for larger screens -->
         <span class="hidden md:inline-block">
           <ThemeIcon />
diff --git a/src/components/ui/LanguagePicker.astro b/src/components/ui/LanguagePicker.astro
new file mode 100644
index 0000000..8a78cb7
--- /dev/null
+++ b/src/components/ui/LanguagePicker.astro
@@ -0,0 +1,79 @@
+---
+import { languages } from "@/utils//ui";
+import Icon from "./icons/Icon.astro";
+---
+
+<div class="hs-dropdown relative inline-flex">
+  <button
+    id="hs-dropdown-default"
+    type="button"
+    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  >
+    <Icon name="earth" />
+    <svg
+      class="size-4 hs-dropdown-open:rotate-180"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
+    >
+  </button>
+
+  <div
+    class="hs-dropdown-menu duration mt-2 hidden rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] before:absolute before:-top-4 before:start-0 before:h-4 before:w-full after:absolute after:-bottom-4 after:start-0 after:h-4 after:w-full hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
+    aria-labelledby="hs-dropdown-hover-event"
+  >
+    {
+      Object.entries(languages).map(([lang, label]) => (
+        <a
+          class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
+          href={`/${lang === "en" ? "" : lang}`}
+        >
+          {label}
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<!--Import the necessary Dropdown plugin-->
+<!--https://preline.co/plugins/html/dropdown.html-->
+<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>
+
+<script>
+  type TLanguage = "en" | "fr";
+  const languages: TLanguage[] = ["en", "fr"];
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const languageLinks = document.querySelectorAll(".hs-dropdown-menu a");
+    languageLinks.forEach((element) => {
+      const link = element as HTMLAnchorElement;
+      const lang = link
+        .getAttribute("href")
+        ?.replace("/", "")
+        .replace("/", "") as TLanguage;
+
+      link.addEventListener("click", function (event) {
+        event.preventDefault();
+
+        const url = new URL(window.location.href);
+        const pathParts = url.pathname
+          .split("/")
+          .filter((part) => part && !languages.includes(part as TLanguage));
+
+        if (lang === url.pathname.split("/")[1]) return;
+
+        if (lang !== "en") {
+          pathParts.unshift(lang);
+        }
+
+        url.pathname = pathParts.join("/");
+        window.location.href = url.toString();
+      });
+    });
+  });
+</script>
diff --git a/src/components/ui/icons/icons.ts b/src/components/ui/icons/icons.ts
index 5669891..8e55dd0 100644
--- a/src/components/ui/icons/icons.ts
+++ b/src/components/ui/icons/icons.ts
@@ -406,4 +406,19 @@ export const Icons = {
     strokeLinejoin: "round",
     stroke: "currentColor",
   },
+  earth: {
+    paths: [
+      {
+        d: "m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525",
+      },
+    ],
+    class:
+        "w-4 h-4 flex-shrink-0",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+  },
 };
diff --git a/src/components/ui/links/NavLink.astro b/src/components/ui/links/NavLink.astro
index dc17b0c..e1c5411 100644
--- a/src/components/ui/links/NavLink.astro
+++ b/src/components/ui/links/NavLink.astro
@@ -16,7 +16,7 @@ We assign an ID matching the URL for easy reference in our script.
 If URL is '/' (home page), assign ID as 'home' 
 -->
 <a
-  id={url === "/" ? "home" : url.split("/")[1]}
+  id={url === "/" ? "home" : url.replace("/", "")}
   href={url}
   data-astro-prefetch
   class="rounded-lg text-base font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 md:text-sm 2xl:text-base"
@@ -25,21 +25,28 @@ If URL is '/' (home page), assign ID as 'home'
 </a>
 
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
-        let url = window.location.pathname;
-        let urlSegments = url.split("/");
-        let navId = urlSegments[1] === 'fr' ? urlSegments[2] : urlSegments[1];
-        navId = navId ? navId : 'home';
-        let nav = document.getElementById(navId);
-        if (nav) {
-            nav.classList.remove(
-                "text-neutral-600",
-                "dark:text-neutral-400",
-                "hover:text-neutral-500",
-                "dark:hover:text-neutral-500",
-            );
-            nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
-            nav.setAttribute("aria-current", "page");
-        }
-    });
+  document.addEventListener("DOMContentLoaded", function () {
+    let url = window.location.pathname;
+    let urlSegments = url.split("/");
+    let navId;
+
+    if (url === "/") {
+      navId = "home";
+    } else {
+      navId = url.replace("/", "");
+    }
+
+    let nav = document.getElementById(navId);
+
+    if (nav) {
+      nav.classList.remove(
+        "text-neutral-600",
+        "dark:text-neutral-400",
+        "hover:text-neutral-500",
+        "dark:hover:text-neutral-500"
+      );
+      nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
+      nav.setAttribute("aria-current", "page");
+    }
+  });
 </script>
diff --git a/src/utils/fr/navigation.ts b/src/utils/fr/navigation.ts
index df1086e..06ae24b 100644
--- a/src/utils/fr/navigation.ts
+++ b/src/utils/fr/navigation.ts
@@ -20,7 +20,7 @@ const footerLinks = [
     section: "Société",
     links: [
       { name: "À propos de nous", url: "#" },
-      { name: "Blog", url: "#" },
+      { name: "Blog", url: "/fr/blog" },
       { name: "Carrières", url: "#" },
       { name: "Clients", url: "#" },
     ],
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index d324f9b..3124a97 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -20,7 +20,7 @@ const footerLinks = [
     section: "Company",
     links: [
       { name: "About us", url: "#" },
-      { name: "Blog", url: "#" },
+      { name: "Blog", url: "/blog" },
       { name: "Careers", url: "#" },
       { name: "Customers", url: "#" },
     ],
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
new file mode 100644
index 0000000..ba9ba6a
--- /dev/null
+++ b/src/utils/ui.ts
@@ -0,0 +1,4 @@
+export const languages = {
+    en: "English",
+    fr: "Français",
+};
\ No newline at end of file