Add French translations of new pages and update site configuration

Introduced French translations of new pages including 404, contact, products index, home, and services. Also updated site configuration to handle French translations and added a new ContactSection_fr.astro component for the French version of the Contact Us section.

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_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/pages/fr/404.astro

@@ -0,0 +1,45 @@
+---
+// Import section components
+import MainLayout from "@/layouts/MainLayout.astro";
+import Btn404 from "@/components/ui/buttons/Btn404.astro";
+
+// Define variables for page content
+const title: string = "404";
+const subTitle: string = "Oops, ce n'est pas l'outil que vous recherchiez !";
+const content: string =
+  "Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre.";
+const btnTitle: string = "Retournez";
+---
+
+<MainLayout title="Page Not Found | ScrewFast" lang="fr">
+  <section class="grid h-svh place-content-center">
+    <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+      <div class="mx-auto max-w-screen-sm text-center">
+        <h1
+          class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
+        >
+          {title}
+        </h1>
+        <p
+          class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
+        >
+          {subTitle}
+        </p>
+
+        <p
+          class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
+        >
+          {content}
+        </p>
+        <!--Display a button that navigates user back to the previous page-->
+        <Btn404 title={btnTitle} id="go-back" />
+      </div>
+    </div>
+  </section>
+</MainLayout>
+<!--JavaScript code that adds click event to the Button, resulting in going back to the previous page in history-->
+<script>
+  document.getElementById("go-back")?.addEventListener("click", () => {
+    history.back();
+  });
+</script>

src/pages/fr/contact.astro

@@ -0,0 +1,30 @@
+---
+// Import the necessary components
+import MainLayout from "@/layouts/MainLayout.astro";
+import ContactSection from "@/components/sections/ContactSection_fr.astro";
+---
+
+<!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
+<MainLayout
+  title="Contact | ScrewFast"
+  lang="fr"
+  structuredData={{
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "@id": "https://screwfast.uk/contact",
+    url: "https://screwfast.uk/contact",
+    name: "Contact Us | ScrewFast",
+    description:
+      "Have questions or want to discuss a project? Reach out, and let's craft the perfect solution with our tools and services.",
+    isPartOf: {
+      "@type": "WebSite",
+      url: "https://screwfast.uk",
+      name: "ScrewFast",
+      description:
+        "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
+    },
+    inLanguage: "en-US",
+  }}
+>
+  <ContactSection />
+</MainLayout>

src/pages/fr/index.astro

@@ -0,0 +1,143 @@
+---
+// Import the necessary components
+import MainLayout from "@/layouts/MainLayout.astro";
+import HeroSection from "@/components/sections/landing/HeroSection.astro";
+import HeroSectionAlt from "@/components/sections/landing/HeroSectionAlt.astro";
+import ClientsSection from "@/components/sections/landing/ClientsSection.astro";
+import FeaturesGeneral from "@/components/sections/features/FeaturesGeneral.astro";
+import FeaturesNavs from "@/components/sections/features/FeaturesNavs.astro";
+import TestimonialsSection from "@/components/sections/testimonials/TestimonialsSection.astro";
+import PricingSection from "@/components/sections/pricing/PricingSection.astro";
+import FAQ from "@/components/sections/FAQ.astro";
+import AnnouncementBanner from "@/components/ui/banners/AnnouncementBanner.astro";
+import heroImage from "@/images/hero-image.avif";
+import faqs from "@/data_files/faqs.json";
+import features from "@/data_files/features.json";
+import featureImage from "@/images/features-image.avif";
+import construction from "@/images/construction-image.avif";
+import tools from "@/images/automated-tools.avif";
+import dashboard from "@/images/dashboard-image.avif";
+
+const avatarSrcs: Array<string> = [
+  "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
+  "https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
+  "https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80",
+  "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
+];
+---
+
+<MainLayout lang="fr">
+  <AnnouncementBanner
+    btnId="dismiss-button"
+    btnTitle="Découvrez ScrewFast sur GitHub"
+    url="https://github.com/mearashadowfax/ScrewFast"
+  />
+
+  <HeroSection
+    title=`Équipez vos projets avec <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`
+    subTitle="Outils matériels de haute qualité et services de construction experts pour tous les besoins en projet."
+    primaryBtn="Commencez à explorer"
+    primaryBtnURL="/products"
+    secondaryBtn="Contacter l'équipe commerciale"
+    secondaryBtnURL="/contact"
+    withReview={true}
+    avatars={avatarSrcs}
+    rating=`<span class="font-bold">4.8</span> / 5`
+    starCount={4}
+    reviews=`À partir de plus de <span class="font-bold">12,8k</span> avis`
+    src={heroImage}
+    alt="Pile de boîtes de produits ScrewFast contenant des outils matériels assortis"
+  />
+
+  <ClientsSection
+    title="Faites confiance aux leaders de l'industrie"
+    subTitle="Découvrez la fiabilité choisie par les géants de l'industrie."
+  />
+
+  <FeaturesGeneral
+    title="Répondre aux exigences de l'industrie"
+    subTitle="Chez ScrewFast, nous relevons les défis uniques rencontrés dans les secteurs du matériel et de la construction. Des outils de pointe aux services experts, nous sommes déterminés à vous aider à surmonter les obstacles et à atteindre vos objectifs."
+    src={featureImage}
+    alt="Produits ScrewFast dans des boîtes flottantes"
+    features={features}
+  />
+
+  <FeaturesNavs
+    title=`Personnalisez les offres de <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span> pour répondre parfaitement à vos besoins en matériel et en construction.`
+    tabs={[
+      {
+        heading: "Outils de pointe",
+        content:
+          "Optimisez vos projets avec les outils de pointe de ScrewFast. Faites l'expérience d'une efficacité accrue dans la gestion de la construction avec nos solutions automatisées sophistiquées.",
+        svg: "tools",
+        src: tools,
+        alt: "Équipement lourd jaune et noir sur un champ d'herbe brune",
+        first: true,
+      },
+      {
+        heading: "Tableaux de bord intuitifs",
+        content:
+          "Naviguez facilement avec les tableaux de bord intuitifs de ScrewFast. Configurez et supervisez vos projets de manière transparente, avec des interfaces conviviales conçues pour une gestion efficace des flux de travail rapide et efficace.",
+        svg: "dashboard",
+        src: dashboard,
+        alt: "Capture d'écran ou représentation graphique du tableau de bord intuitif",
+        second: true,
+      },
+      {
+        heading: "Fonctionnalités robustes",
+        content:
+          "Minimisez la complexité, maximisez la productivité. Les fonctionnalités robustes de ScrewFast sont conçues pour rationaliser votre processus de construction, offrant des résultats qui se distinguent par leur excellence.",
+        svg: "house",
+        src: construction,
+        alt: "Structure métallique grise d'un bâtiment près d'une grue à tour pendant la journée",
+      },
+    ]}
+  />
+
+  <TestimonialsSection
+    title="Accélérez vos projets"
+    subTitle="Chez ScrewFast, nous assurons un démarrage rapide avec une configuration de compte instantanée. Découvrez la vitesse de la construction redéfinie."
+    testimonials={[
+      {
+        content:
+          "ScrewFast a considérablement augmenté l'efficacité de notre projet. La configuration a été instantanée et leurs temps de réponse rapides sont phénoménaux. Vraiment un changement de jeu dans le support matériel et de construction !",
+        author: "Samantha Ruiz",
+        role: "Directrice des opérations | ConstructIt Inc.",
+        avatarSrc:
+          "https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?q=80&w=1453&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
+      },
+    ]}
+    statistics={[
+      {
+        count: "70k+",
+        description:
+          "clients équipés — des bricoleurs aux grandes entreprises de construction",
+      },
+      {
+        count: "35%",
+        description:
+          "hausse de l'efficacité des projets avec les outils et services de ScrewFast",
+      },
+      {
+        count: "15,3%",
+        description:
+          "réduction des coûts de maintenance rapportée par des clients à long terme",
+      },
+      {
+        count: "2x",
+        description:
+          "assemblage plus rapide grâce à des solutions de fixation innovantes",
+      },
+    ]}
+  />
+
+  <PricingSection />
+
+  <FAQ title="Questions<br />fréquemment posées" faqs={faqs} />
+
+  <HeroSectionAlt
+    title="Construisons ensemble"
+    subTitle="ScrewFast est un modèle open source, méticuleusement conçu avec les frameworks Astro, Tailwind CSS et Preline UI."
+    url="https://github.com/mearashadowfax/ScrewFast"
+  />
+</MainLayout>