Merge pull request #26 from mearashadowfax/add-i18n

Add  internationalization (i18n) features and refactor codebase

astro.config.mjs

@@ -12,6 +12,13 @@ export default defineConfig({
   image: {
     domains: ["images.unsplash.com"],
   },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "fr"],
+    routing: {
+      prefixDefaultLocale: false
+    }
+  },
   prefetch: true,
   integrations: [
     tailwind(),

src/components/sections/ContactSection.astro

@@ -6,6 +6,7 @@ import TextInput from "../ui/forms/input/TextInput.astro";
 import EmailContactInput from "../ui/forms/input/EmailContactInput.astro";
 import PhoneInput from "../ui/forms/input/PhoneInput.astro";
 import TextAreaInput from "../ui/forms/input/TextAreaInput.astro";
+import Icon from "../ui/icons/Icon.astro";
 
 // Define the variables that will be used in this component
 const title: string = "Contact us";
@@ -82,19 +83,7 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
           linkTitle="Visit guides & tutorials"
           linkURL="#"
           isArrowVisible={true}
-          ><svg
-            class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
-            ></path>
-          </svg>
+          ><Icon name="question" />
         </ContactIconBlock>
 
         <ContactIconBlock
@@ -104,43 +93,15 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
           linkTitle="Visit FAQ"
           linkURL="#"
           isArrowVisible={true}
-          ><svg
-            class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
-            ></path>
-          </svg>
+          ><Icon name="chatBubble" />
         </ContactIconBlock>
 
         <ContactIconBlock
           heading="Visit our office"
           content="UK ScrewFast"
           isAddressVisible={true}
           addressContent="72 Union Terrace, E10 4PE London"
-          ><svg
-            class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
-            ></path>
-          </svg>
+          ><Icon name="mapPin" />
         </ContactIconBlock>
 
         <ContactIconBlock
@@ -149,19 +110,7 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
           isLinkVisible={true}
           linkTitle="[email protected]"
           linkURL="#"
-          ><svg
-            class="mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z"
-            ></path>
-          </svg>
+          ><Icon name="envelopeOpen" />
         </ContactIconBlock>
       </div>
     </div>

src/components/sections/ContactSection_fr.astro

@@ -0,0 +1,119 @@
+---
+// Import the necessary dependencies.
+import AuthBtn from "../ui/buttons/AuthBtn.astro";
+import ContactIconBlock from "../ui/blocks/ContactIconBlock.astro";
+import TextInput from "../ui/forms/input/TextInput.astro";
+import EmailContactInput from "../ui/forms/input/EmailContactInput.astro";
+import PhoneInput from "../ui/forms/input/PhoneInput.astro";
+import TextAreaInput from "../ui/forms/input/TextAreaInput.astro";
+import Icon from "../ui/icons/Icon.astro";
+
+// Define the variables that will be used in this component
+const title: string = "Contactez-nous";
+const subTitle: string =
+  "Vous avez des questions ou souhaitez discuter d'un projet ? Contactez-nous et laissons-nous élaborer la solution parfaite avec nos outils et services.";
+const formTitle: string = "Remplissez le formulaire ci-dessous";
+const formSubTitle: string =
+  "Nous vous répondrons dans un délai de 1 à 2 jours ouvrables.";
+---
+
+<!-- Contact Us -->
+<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+  <div class="mx-auto max-w-2xl lg:max-w-5xl">
+    <div class="text-center">
+      <h1
+        class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+      >
+        {title}
+      </h1>
+      <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
+        {subTitle}
+      </p>
+    </div>
+
+    <div class="mt-12 grid items-center gap-6 lg:grid-cols-2 lg:gap-16">
+      <div class="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8">
+        <h2
+          class="mb-8 text-xl font-bold text-neutral-700 dark:text-neutral-300"
+        >
+          {formTitle}
+        </h2>
+        <!-- Form for user input with various input fields.-->
+        <!-- Each field utilizes a different input component for the specific type of input (text, email, phone, and textarea)-->
+        <form>
+          <div class="grid gap-4">
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <TextInput
+                id="hs-firstname-contacts"
+                label="Prénom"
+                name="hs-firstname-contacts"
+              />
+              <TextInput
+                id="hs-lastname-contacts"
+                label="Nom"
+                name="hs-firstname-contacts"
+              />
+            </div>
+            <EmailContactInput id="hs-email-contacts" />
+            <PhoneInput id="hs-phone-number" />
+            <TextAreaInput
+              id="hs-about-contacts"
+              label="Détails"
+              name="hs-about-contacts"
+            />
+          </div>
+
+          <div class="mt-4 grid">
+            <AuthBtn title="Envoyer un message" />
+          </div>
+
+          <div class="mt-3 text-center">
+            <p class="text-sm text-neutral-600 dark:text-neutral-400">
+              {formSubTitle}
+            </p>
+          </div>
+        </form>
+      </div>
+
+      <!--ContactIconBlocks are used to display different methods of contacting, including visiting office, email, browsing knowledgebase, and FAQ.-->
+      <div class="divide-y divide-neutral-300 dark:divide-neutral-700">
+        <ContactIconBlock
+          heading="Base de connaissances"
+          content="Parcourez tous nos articles de base de connaissances."
+          isLinkVisible={true}
+          linkTitle="Visiter les guides et tutoriels"
+          linkURL="#"
+          isArrowVisible={true}
+          ><Icon name="question" />
+        </ContactIconBlock>
+
+        <ContactIconBlock
+          heading="FAQ"
+          content="Explorez notre FAQ pour des réponses rapides et claires aux questions courantes."
+          isLinkVisible={true}
+          linkTitle="Visiter la FAQ"
+          linkURL="#"
+          isArrowVisible={true}
+          ><Icon name="chatBubble" />
+        </ContactIconBlock>
+
+        <ContactIconBlock
+          heading="Visitez notre bureau"
+          content="ScrewFast UK"
+          isAddressVisible={true}
+          addressContent="72 Union Terrace, E10 4PE London"
+          ><Icon name="mapPin" />
+        </ContactIconBlock>
+
+        <ContactIconBlock
+          heading="Contactez-nous par e-mail"
+          content="Préférez-vous le texte écrit ? Envoyez-nous un e-mail à"
+          isLinkVisible={true}
+          linkTitle="[email protected]"
+          linkURL="#"
+          ><Icon name="envelopeOpen" />
+        </ContactIconBlock>
+      </div>
+    </div>
+  </div>
+</section>

src/components/sections/FooterSection.astro

@@ -2,7 +2,7 @@
 // Import the necessary dependencies
 import FooterSocialLink from "../ui/links/FooterSocialLink.astro";
 import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
-import { footerLinks, socialLinks } from "../../utils/navigation.ts";
+import { footerLinks, socialLinks } from "@/utils/navigation.ts";
 import Icon from "../ui/icons/Icon.astro";
 
 // Define the variables that will be used in this component

src/components/sections/Navbar.astro

@@ -3,7 +3,7 @@
 import ThemeIcon from "../ThemeIcon.astro";
 import NavLink from "../ui/links/NavLink.astro";
 import Authentication from "./Authentication.astro";
-import { navBarLinks } from "../../utils/navigation.ts";
+import { navBarLinks } from "@/utils/navigation.ts";
 ---
 
 <!-- Main header component -->

src/components/sections/features/FeaturesStatsAlt.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import product5 from "../../../images/features-image.avif";
+import product5 from "@/images/features-image.avif";
 
 // Define props from Astro
 const { title, subTitle, benefits } = Astro.props;

src/components/ui/cards/CardBlog.astro

@@ -2,7 +2,7 @@
 // Import necessary components and utilities
 import AvatarBlog from "../avatars/AvatarBlog.astro";
 import { Image } from "astro:assets";
-import { formatDate } from "../../../utils/utils";
+import { formatDate } from "@/utils/utils";
 import type { CollectionEntry } from "astro:content";
 
 const { blogEntry } = Astro.props;

src/components/ui/cards/CardRelated.astro

@@ -1,7 +1,7 @@
 ---
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
-import { formatDate } from "../../../utils/utils";
+import { formatDate } from "@/utils/utils";
 import type { CollectionEntry } from "astro:content";
 
 const { blogEntry } = Astro.props;

src/components/ui/icons/icons.ts

@@ -343,4 +343,67 @@ export const Icons = {
     viewBox: "0 0 16 16",
     fill: "currentColor",
   },
+  question: {
+    paths: [
+      {
+        d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z",
+      },
+    ],
+    class:
+      "mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+  },
+  chatBubble: {
+    paths: [
+      {
+        d: "M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155",
+      },
+    ],
+    class:
+      "mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+  },
+  mapPin: {
+    paths: [
+      {
+        d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
+      },
+      {
+        d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z",
+      },
+    ],
+    class:
+      "mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+  },
+  envelopeOpen: {
+    paths: [
+      {
+        d: "M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z",
+      },
+    ],
+    class:
+      "mt-1.5 h-6 w-6 flex-shrink-0 text-neutral-600 dark:text-neutral-400",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+  },
 };

src/components/ui/starlight/SiteTitle.astro

@@ -1,6 +1,6 @@
 ---
-import logo from "../../../images/starlight/screwfast_logo_dark.svg?raw";
-import docs from "../../../images/starlight/docs_logo.svg?raw";
+import logo from "@/images/starlight/screwfast_logo_dark.svg?raw";
+import docs from "@/images/starlight/docs_logo.svg?raw";
 import type { Props } from "@astrojs/starlight/props";
 
 const main = "/";

src/content/blog/post-1.md

@@ -2,10 +2,10 @@
 title: "Maximizing Efficiency with ScrewFast's Cutting-Edge Tools"
 description: "Innovating Construction Efficiency with Precision Tools & Support"
 author: "Jacob"
-authorImage: "../../images/blog/jacob.avif"
+authorImage: "@/images/blog/jacob.avif"
 authorImageAlt: "Avatar Description"
 pubDate: 2024-02-06
-cardImage: "../../images/blog/post-1.avif"
+cardImage: "@/images/blog/post-1.avif"
 cardImageAlt: "Top view mechanical tools arrangement"
 readTime: 4
 tags: ["tools", "construction", "workflow" ]

src/content/blog/post-2.md

@@ -2,10 +2,10 @@
 title: "Enhancing Safety and Workmanship with ScrewFast Construction Services"
 description: "Quality construction services for lasting results"
 author: "Brad"
-authorImage: "../../images/blog/brad.avif"
+authorImage: "@/images/blog/brad.avif"
 authorImageAlt: "Avatar Description"
 pubDate: 2024-02-10
-cardImage: "../../images/blog/post-2.avif"
+cardImage: "@/images/blog/post-2.avif"
 cardImageAlt: "Man in black sweatpants using DEWALT circular saw and cutting a wood plank"
 readTime: 5
 tags: ["safety", "craftsmanship", "management" ]

src/content/blog/post-3.md

@@ -3,10 +3,10 @@ title: "Simplify Procurement and Stay Within Budget with ScrewFast"
 description: "Affordable, durable tools for efficient construction projects"
 author: "Olga Zabegina"
 role: "Strategic Marketing Manager"
-authorImage: "../../images/blog/anna.avif"
+authorImage: "@/images/blog/anna.avif"
 authorImageAlt: "Avatar Description"
 pubDate: 2024-02-18
-cardImage: "../../images/blog/post-3.avif"
+cardImage: "@/images/blog/post-3.avif"
 cardImageAlt: "Side view worker wearing gloves"
 readTime: 3
 tags: ["procurement", "affordable", "efficiency" ]

src/content/insights/insight-1.md

@@ -1,7 +1,7 @@
 ---
 title: "The Future of Construction Technology"
 description: "Explore ScrewFast's pioneering role in revolutionizing construction through advanced technology and innovative solutions."
-cardImage: "../../images/insights/insight-1.avif"
+cardImage: "@/images/insights/insight-1.avif"
 cardImageAlt: "Top view mechanical tools arrangement"
 contents: [
         "As technology continues to evolve, so too does the construction industry. From advanced robotics to augmented reality, the possibilities for innovation are endless. At ScrewFast, we're at the forefront of this technological revolution, developing cutting-edge tools and solutions to drive the industry forward.",