Add files via upload................. Translated the doc into French (FR) for the french speaking community closes #362

src/pages/fr/[...redirect].astro.txt

@@ -0,0 +1,30 @@
+---
+import { changeLanguage } from "i18next"
+import { GetStaticPathsResult } from "astro"
+import redirects from "../../features/redirects/redirects.json"
+
+changeLanguage("fr")
+
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
+  const sanitizeSource = (source: string) => {
+    let newSource = source
+    if (newSource[newSource.length - 1] === "/") newSource = newSource.slice(0, newSource.length - 1)
+    if (newSource[0] === "/") return newSource.slice(1, newSource.length)
+    return newSource
+  }
+  return redirects.redirects.map((entry) => {
+    return {
+      params: { redirect: sanitizeSource(entry.source) },
+      props: {
+        to:
+          entry.destination.charAt(0) === "/" || entry.destination.includes("https://")
+            ? entry.destination
+            : "/" + entry.destination,
+      },
+    }
+  })
+}
+const { to } = Astro.props
+---
+
+<meta http-equiv="refresh" content={`0; url=${to}`} />

src/pages/fr/home/ContactUs.astro.txt

@@ -0,0 +1,159 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw"
+import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw"
+import ForumSvg from "~/assets/svgs/home/Forum.svg?raw"
+import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw"
+import NoteSvg from "~/assets/svgs/home/Note.svg?raw"
+
+const mediaList = [
+  {
+    icon: DiscordSvg,
+    name: "Rejoindre notre Discord",
+    content: "Connectez-vous avec d'autres développeurs et utilisateurs de Scroll.",
+    link: "https://discord.gg/scroll",
+  },
+  {
+    icon: NoteSvg,
+    name: "Prendre contact",
+    content: "Contactez-nous directement si vous avez besoin d'un soutien supplémentaire pour votre projet.",
+    link: "https://tally.so/r/waxLBW",
+  },
+  {
+    icon: ForumSvg,
+    name: "Forum de la communauté",
+    content: "Discutez et proposez des modifications aux protocoles de base du Scroll.",
+    link: "http://community.scroll.io/",
+  },
+  {
+    icon: ContributeSvg,
+    name: "Contribuer à Scroll",
+    content: "Construisez avec d'autres développeurs.",
+    link: "https://github.com/scroll-tech/contribute-to-scroll",
+  },
+]
+
+
+<div class="connect-us">
+  <SectionHeader
+    title="Connectez-vous à nous"
+    content="Restez informés des dernières nouvelles et développements de la communauté Scroll."
+  />
+  <div class="medias">
+    {
+      mediaList.map(({ icon, name, content, link }) => (
+        <a class="media-item" href={link} target="_blank">
+          <div class="media-item-header">
+            <span class="media-item-link">
+              <Fragment set:html={LinkArrowSvg} />
+            </span>
+            <span class="media-item-icon">
+              <Fragment set:html={icon} />
+            </span>
+          </div>
+
+          <span class="media-item-title">{name}</span>
+          <span class="media-item-content">{content}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .connect-us {
+    margin-top: 155px;
+  }
+
+  .medias {
+    display: flex;
+    gap: 1.6rem;
+    margin-top: 90px;
+  }
+  .media-item {
+    width: 325px;
+    height: 325px;
+    padding: 30px;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+
+  .media-item:hover {
+    @apply bg-highlight dark:bg-dark-highlight;
+  }
+
+  .media-item-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .media-item-link {
+    width: 23px;
+    height: 23px;
+    background-size: contain;
+    align-self: flex-end;
+    @apply text-black dark:text-white-800;
+  }
+
+  .media-item-icon {
+    display: inline-flex;
+    width: 35px;
+    height: 35px;
+    align-items: center;
+  }
+  .media-item-title {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 22px;
+    line-height: normal;
+    margin-bottom: 6px;
+  }
+  .media-item-content {
+    font-size: 20px;
+    line-height: normal;
+    height: 84px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .connect-us {
+      margin-top: 112px;
+    }
+    .medias {
+      flex-direction: column;
+      gap: 3rem;
+    }
+    .media-item {
+      width: 100%;
+      height: 150px;
+      padding: 20px;
+    }
+    .media-item-header {
+      flex-direction: row-reverse;
+      flex: unset;
+    }
+    .media-item-link {
+      width: 13px;
+      height: 13px;
+      align-self: flex-start;
+    }
+    .media-item-icon {
+      width: 26px;
+      height: 26px;
+    }
+    .media-item-title {
+      font-size: 20px;
+      margin-top: 8px;
+      margin-bottom: 0px;
+    }
+    .media-item-content {
+      font-size: 16px;
+      height: auto;
+    }
+  }
+</style>

src/pages/fr/home/Navigate.astro.txt

@@ -0,0 +1,91 @@
+<div>
+  <SectionHeader
+    title="Démarrage rapide du développeur"
+    content="Commencez à développer sur Scroll avec tous vos outils favoris pour la création et le test de contrats intelligents."
+  />
+  <div class="tools">
+    {
+      toolList.map(({ icon, name, quickstartAnchor, color }) => (
+        <a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
+          <figure class={color ? "p-[18px]" : ""}>
+            {color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
+          </figure>
+          <span>{name}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .tools {
+    margin-top: 96px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .tools-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 22px;
+  }
+  .tools-item figure {
+    font-size: 0;
+    width: 140px;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+  .tools-item figure:hover {
+    @apply dark:bg-dark-highlight;
+  }
+
+  .tools-item figure svg {
+    width: 80% !important;
+  }
+  .tools-item span {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 72em) {
+    .tools-item figure {
+      font-size: 0;
+      width: 12vw;
+      height: 12vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+
+    .tools-item figure img {
+      width: 8vw;
+    }
+
+    .tools-item span {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .tools {
+      flex-wrap: wrap;
+      gap: 50px;
+      justify-content: center;
+    }
+    .tools-item figure {
+      width: 116px;
+      height: 116px;
+    }
+    .tools-item figure img {
+      width: 78px;
+    }
+    .tools-item span {
+      font-size: 16px;
+    }
+  }
+</style>

src/pages/fr/home/QuickStart.astro.txt

@@ -0,0 +1,106 @@
+const toolList = [
+  { icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/", quickstartAnchor: "hardhat" },
+  { icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/", quickstartAnchor: "foundry" },
+  { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
+  {
+    icon: EtherSvg,
+    color: "text-[#2A4B78] dark:text-white-800",
+    name: "EthersJS",
+    link: "https://ethers.org/",
+    quickstartAnchor: "ethersjs",
+  },
+  { icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie", quickstartAnchor: "brownie" },
+  { icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/", quickstartAnchor: "truffle" },
+]
+
+<div>
+  <SectionHeader
+    title="Démarrage rapide du développeur"
+    content="Commencez à développer sur Scroll avec tous vos outils favoris pour la création et le test de contrats intelligents."
+  />
+  <div class="tools">
+    {
+      toolList.map(({ icon, name, quickstartAnchor, color }) => (
+        <a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
+          <figure class={color ? "p-[18px]" : ""}>
+            {color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
+          </figure>
+          <span>{name}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .tools {
+    margin-top: 96px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .tools-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 22px;
+  }
+  .tools-item figure {
+    font-size: 0;
+    width: 140px;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+  .tools-item figure:hover {
+    @apply dark:bg-dark-highlight;
+  }
+
+  .tools-item figure svg {
+    width: 80% !important;
+  }
+  .tools-item span {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 72em) {
+    .tools-item figure {
+      font-size: 0;
+      width: 12vw;
+      height: 12vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+
+    .tools-item figure img {
+      width: 8vw;
+    }
+
+    .tools-item span {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .tools {
+      flex-wrap: wrap;
+      gap: 50px;
+      justify-content: center;
+    }
+    .tools-item figure {
+      width: 116px;
+      height: 116px;
+    }
+    .tools-item figure img {
+      width: 78px;
+    }
+    .tools-item span {
+      font-size: 16px;
+    }
+  }
+</style>