Merge pull request #449 from reactjs/copy/homepage-atf

Homepage: traduction au-dessus du fold

src/components/Layout/HomeContent.js

@@ -3,31 +3,31 @@
  */
 
 import {
+  Fragment,
+  Suspense,
   createContext,
   memo,
-  useState,
   useContext,
-  useId,
-  Fragment,
-  Suspense,
   useEffect,
+  useId,
+  useReducer,
   useRef,
+  useState,
   useTransition,
-  useReducer,
 } from 'react';
-import cn from 'classnames';
-import NextLink from 'next/link';
 
-import ButtonLink from '../ButtonLink';
-import {IconRestart} from '../Icon/IconRestart';
 import BlogCard from 'components/MDX/BlogCard';
+import ButtonLink from '../ButtonLink';
+import CodeBlock from 'components/MDX/CodeBlock';
+import {ExternalLink} from 'components/ExternalLink';
 import {IconChevron} from 'components/Icon/IconChevron';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+import {IconRestart} from '../Icon/IconRestart';
 import {IconSearch} from 'components/Icon/IconSearch';
-import {Logo} from 'components/Logo';
 import Link from 'components/MDX/Link';
-import CodeBlock from 'components/MDX/CodeBlock';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
-import {ExternalLink} from 'components/ExternalLink';
+import {Logo} from 'components/Logo';
+import NextLink from 'next/link';
+import cn from 'classnames';
 import sidebarBlog from '../../sidebarBlog.json';
 
 function Section({children, background = null}) {
@@ -131,48 +131,51 @@ export function HomeContent() {
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
-            The library for web and native user interfaces
+            La bibliothèque pour des interfaces utilisateurs web et natives
           </p>
           <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="Learn React">
-              Learn React
+              label="Apprenez React">
+              Apprenez React
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
               type="secondary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="API Reference">
-              API Reference
+              label="Référence de l’API">
+              Référence de l’API
             </ButtonLink>
           </div>
         </div>
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>
+              Créez des interfaces utilisateurs à l’aide de composants
+            </Header>
             <Para>
-              React lets you build user interfaces out of individual pieces
-              called components. Create your own React components like{' '}
-              <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{' '}
-              <Code>Video</Code>. Then combine them into entire screens, pages,
-              and apps.
+              React vous permet de construire des interfaces utilisateurs à
+              partir de briques individuelles appelées composants. Créez vos
+              propres composants tels que <Code>Thumbnail</Code>,{' '}
+              <Code>LikeButton</Code>, et <Code>Video</Code>. Puis combinez-les
+              pour produire des écrans, pages et applis entières.
             </Para>
           </Center>
           <FullBleed>
             <Example1 />
           </FullBleed>
           <Center>
             <Para>
-              Whether you work on your own or with thousands of other
-              developers, using React feels the same. It is designed to let you
-              seamlessly combine components written by independent people,
-              teams, and organizations.
+              Que vous travailliez dans votre coin ou avec des milliers d’autres
+              développeur·se·s, l’utilisation de React est la même. React est
+              conçu pour vous permettre de combiner sans effort des composants
+              produits par des acteurs distincts, qu’il s’agisse de personnes,
+              d’équipes ou d’organisations entières.
             </Para>
           </Center>
         </Section>
@@ -922,8 +925,8 @@ function Example1() {
           <Video
             video={{
               id: 'ex1-0',
-              title: 'My video',
-              description: 'Video description',
+              title: 'Ma vidéo',
+              description: 'Description de la vidéo',
               image: 'blue',
               url: null,
             }}

src/components/Layout/TopNav/TopNav.tsx

@@ -2,29 +2,30 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+import * as React from 'react';
+
 import {
-  useState,
-  useRef,
+  Suspense,
+  startTransition,
   useCallback,
   useEffect,
-  startTransition,
-  Suspense,
+  useRef,
+  useState,
 } from 'react';
-import * as React from 'react';
-import cn from 'classnames';
-import NextLink from 'next/link';
-import {useRouter} from 'next/router';
 import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
 
+import {Feedback} from '../Feedback';
 import {IconClose} from 'components/Icon/IconClose';
 import {IconHamburger} from 'components/Icon/IconHamburger';
 import {IconSearch} from 'components/Icon/IconSearch';
-import {Search} from 'components/Search';
 import {Logo} from '../../Logo';
-import {Feedback} from '../Feedback';
-import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import NextLink from 'next/link';
 import type {RouteItem} from '../getRouteMeta';
+import {Search} from 'components/Search';
 import {SidebarLink} from '../Sidebar';
+import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import cn from 'classnames';
+import {useRouter} from 'next/router';
 
 declare global {
   interface Window {
@@ -268,7 +269,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                Recherche
                 <span className="ml-auto hidden sm:flex item-center mr-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
@@ -281,15 +282,15 @@ export default function TopNav({
             <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
               <div className="mx-2.5 gap-1.5 hidden lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
-                  Learn
+                  Apprendre
                 </NavItem>
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  Reference
+                  Référence
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
-                  Community
+                  Communauté
                 </NavItem>
                 <NavItem isActive={section === 'blog'} url="/blog">
                   Blog

src/components/SocialBanner.tsx

@@ -3,13 +3,14 @@
  *
  */
 
-import {useRef, useEffect} from 'react';
-import cn from 'classnames';
+import {useEffect, useRef} from 'react';
+
 import {ExternalLink} from './ExternalLink';
+import cn from 'classnames';
 
-const bannerText = 'Support Ukraine 🇺🇦';
+const bannerText = 'Soutenez l’Ukraine 🇺🇦';
 const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerLinkText = 'Aidez-nous à fournir une aide humanitaire à l’Ukraine';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);