feat: french translation for home page

website/components/home/about.tsx

@@ -2,6 +2,7 @@ import Tilt from 'react-parallax-tilt';
 import Link from 'next/link';
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
+import { useTranslations } from '../../hooks/use-translations';
 import { Container } from './container';
 import { Blur } from './hero';
 
@@ -11,65 +12,63 @@ const Showdown = dynamic(() =>
 );
 
 export function About() {
+  const { about } = useTranslations();
   return (
     <>
       <div className="relative">
         <Container>
           <h3 className="text-2xl text-center font-bold text-zinc-900 dark:text-white md:text-3xl lg:text-4xl">
-            What's in Million.js?
+            {about.whatsInMillionJS}
           </h3>
           <p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
-            The tools to make React faster, automatically.
+            {about.toolsToMakeReactFaster}
           </p>
           <div className="relative mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             <Card
-              title="Block Virtual DOM"
+              title={about.blockVirtualDom}
               icon={<BoxIcon />}
               description={
                 <>
-                  Million.js introduces a novel{' '}
+                  {about.millionIntroduces}{' '}
                   <Link
                     href="/blog/virtual-dom"
                     className="underline nx-text-primary-600"
                   >
-                    "block" virtual DOM.
+                    {about.blockVirtualDomQuote}
                   </Link>{' '}
-                  It's significantly faster than React's virtual DOM, as it
-                  diffs data instead of the DOM.
+                  {about.blockVirtualDomDescription}
                 </>
               }
             />
             <Card
-              title="Supercharged Compiler"
+              title={about.superchargedCompiler}
               icon={<LightBulbIcon />}
               description={
                 <>
-                  Million.js uses a{' '}
+                  {about.millionUses}{' '}
                   <Link
                     href="/blog/behind-the-block"
                     className="underline nx-text-primary-600"
                   >
-                    custom compiler
+                    {about.customCompiler}
                   </Link>{' '}
-                  that automatically optimizes your React components on the
-                  server.
+                  {about.automaticallyOptimizes}
                 </>
               }
             />
             <Card
-              title="Automatic Mode"
+              title={about.automaticMode}
               icon={<ThumbsUpIcon />}
               description={
                 <>
-                  Tired of learning new frameworks and big migrations?
-                  Million.js ships{' '}
+                  {about.tiredOf}{' '}
                   <Link
                     href="/docs/automatic"
                     className="underline nx-text-primary-600"
                   >
-                    a drop-in automatic mode
+                    {about.dropIn}
                   </Link>{' '}
-                  to make your React apps faster, without any code changes.
+                  {about.makeReactFaster}
                 </>
               }
             />
@@ -85,18 +84,17 @@ export function About() {
             </div>
             <div className="md:w-7/12 lg:w-1/2">
               <h2 className="text-3xl font-bold text-zinc-900 md:text-4xl dark:text-white">
-                React at the speed of raw JS
+                {about.rawJs}
               </h2>
               <p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
-                Million.js optimizes React, improving its performance. It stands
-                out as one of the top performers in the{' '}
+                {about.rawJsDescription}{' '}
                 <a
                   href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
                   target="_blank"
                   rel="noreferrer"
                   className="nx-text-primary-600 underline decoration-from-font [text-underline-position:from-font]"
                 >
-                  JS Framework Benchmark
+                  {about.jsBenchmark}
                 </a>
                 .
               </p>
@@ -107,10 +105,10 @@ export function About() {
                   </div>
                   <div className="w-5/6">
                     <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
-                      Up to 70% faster* than React.
+                      {about.seventyPercent}
                     </h4>
                     <p className="text-zinc-500 text-sm dark:text-zinc-400">
-                      * - Benchmarks may not represent real-world performance.
+                      {about.benchmarkWarning}
                     </p>
                   </div>
                 </div>
@@ -120,20 +118,16 @@ export function About() {
                   </div>
                   <div className="w-5/6">
                     <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
-                      Integrate and ship in minutes.
+                      {about.integrate}
                     </h4>
                     <p className="text-zinc-500 text-sm dark:text-zinc-400">
-                      No need to learn a new framework. Works with your existing
-                      React components.
+                      {about.noNeedLearn}
                     </p>
                   </div>
                 </div>
               </div>
               <p className="mt-10 text-xs bg-gradient-to-b dark:from-zinc-500 dark:to-[#111] dark:hover:to-zinc-500 inline-block text-transparent bg-clip-text from-zinc-500 to-white hover:to-zinc-500 opacity-40 hover:opacity-50 transition-opacity">
-                Note: Benchmarks (via JS Framework Benchmark) do not represent
-                real-life performance. Million.js does have some limitations.
-                Performance improvements may be more noticeable with apps that
-                include more data / UI components.
+                {about.benchmarkNote}
               </p>
             </div>
           </div>
@@ -145,6 +139,7 @@ export function About() {
 
 function Graphic() {
   const [showShowdown, setShowShowdown] = useState(false);
+  const { about } = useTranslations();
 
   const handleClick = () => {
     setShowShowdown(!showShowdown);
@@ -155,23 +150,23 @@ function Graphic() {
       {!showShowdown ? (
         <div className="bg-white p-4 pb-6 dark:bg-zinc-900 rounded-lg">
           <div className="w-full">
-            <p className="font-bold text-lg">JS Framework Benchmark</p>
+            <p className="font-bold text-lg">{about.jsBenchmark}</p>
             <p className="text-md mt-1 text-zinc-700 dark:text-zinc-400">
-              Geometric mean of all benchmarks (higher is better)
+              {about.higherBetter}
             </p>
             <Chart />
           </div>
           <div className="text-sm text-zinc-400">
-            Based on{' '}
+            {about.basedOn}{' '}
             <a
               href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
               target="_blank"
               rel="noreferrer"
               className="text-zinc-500 underline decoration-from-font [text-underline-position:from-font]"
             >
-              JS Framework Benchmark data
+              {about.benchmarkData}
             </a>{' '}
-            (Chrome 102)
+            {about.chromeVersion}
           </div>
         </div>
       ) : (

website/components/home/cta.tsx

@@ -1,20 +1,23 @@
 import Link from 'next/link';
+import { useTranslations } from '../../hooks/use-translations';
 import { Container } from './container';
 import { Blur } from './hero';
 import { ShimmerButton } from './shimmer-button';
 
 export function CTA() {
+  const { cta } = useTranslations();
+
   return (
     <div className="relative">
       <Blur />
       <Container>
         <div className="relative">
           <div className="mt-48 m-auto space-y-6 md:w-8/12 lg:w-7/12">
             <h1 className="text-center text-4xl font-bold text-gray-800 dark:text-white md:text-5xl">
-              Get started in seconds
+              {cta.getStartedInSeconds}
             </h1>
             <p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
-              Welcome to the Million.js community. Let's build something great.
+              {cta.welcome}
             </p>
             <div className="flex flex-wrap justify-center gap-6">
               <Link href="/docs/introduction" className="h-12 w-fullsm:w-max">
@@ -23,7 +26,7 @@ export function CTA() {
                   background="radial-gradient(ellipse 80% 70% at 50% 120%, #b28ce2, #892fda)"
                 >
                   <span className="relative whitespace-pre text-center text-base font-semibold leading-none tracking-tight text-white z-10">
-                    Get started →
+                    {cta.getStarted}
                   </span>
                 </ShimmerButton>
               </Link>

website/components/home/hero.tsx

@@ -5,6 +5,7 @@ import TextsLogo from '../../public/texts.webp';
 import HackClubLogo from '../../public/hackclub.svg';
 import OpenSaucedLogo from '../../public/opensauced.svg';
 import MetamaskLogo from '../../public/metamask.svg';
+import { useTranslations } from '../../hooks/use-translations';
 import { Container } from './container';
 import { ShimmerButton } from './shimmer-button';
 
@@ -14,26 +15,27 @@ const CountUp = dynamic(() => import('react-countup'), {
 });
 
 export function Hero() {
+  const { hero } = useTranslations();
   return (
     <div className="relative">
       <Blur />
       <Container>
         <div className="relative pt-20 md:pt-36 ml-auto">
           <div className="lg:w-[70%] text-center mx-auto">
             <h1 className="text-zinc-900 dark:text-white font-extrabold text-5xl md:text-6xl xl:text-7xl">
-              Make React{' '}
+              {hero.makeReact}{' '}
               <span className="gradient-text inline-block">
-                <CountUp start={10} end={70} useEasing />% faster
+                <CountUp start={10} end={70} useEasing />% {hero.faster}
               </span>
             </h1>
             <p className="mt-8 text-xl text-zinc-600 dark:text-zinc-300 leading-8">
-              The{' '}
+              {hero.the}{' '}
               <span className="font-medium dark:text-zinc-100">
-               drop-in optimizing compiler
+                {hero.dropIn}
               </span>{' '}
-              for React. Gain big performance wins for UI and data heavy React apps. Dead simple to use – try it out {' '}
+              {hero.forReact}{' '}
               <Link href="/docs" className="font-medium hover:underline">
-                now
+                {hero.now}
               </Link>
               !
             </p>
@@ -44,7 +46,7 @@ export function Hero() {
                   background="radial-gradient(ellipse 80% 70% at 50% 120%, #b28ce2, #892fda)"
                 >
                   <span className="relative whitespace-pre text-center text-base font-semibold leading-none tracking-tight text-white z-10">
-                    Get started →
+                    {hero.getStarted}
                   </span>
                 </ShimmerButton>
               </Link>
@@ -53,7 +55,7 @@ export function Hero() {
                 className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-purple-600/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-zinc-700 dark:before:bg-zinc-800 sm:w-max"
               >
                 <span className="relative text-base font-semibold text-purple-600 dark:text-white">
-                  How?
+                  {hero.how}
                 </span>
               </Link>
             </div>
@@ -80,6 +82,8 @@ export function Blur() {
 }
 
 export function Companies() {
+  const { hero } = useTranslations();
+
   const entries = [
     {
       url: 'https://wyze.com',
@@ -147,13 +151,17 @@ export function Companies() {
   return (
     <div className="mt-36 text-center lg:mt-32">
       <div className="uppercase text-sm font-semibold tracking-wider text-zinc-600 dark:text-zinc-400">
-        Trusted by companies who ship to{' '}
-        <span className="dark:text-white text-black semibold">3M+</span> users
+        {hero.trustedBy}{' '}
+        <span className="dark:text-white text-black semibold">3M+</span>{' '}
+        {hero.users}
       </div>
       <div className="slider">
         <div className="slide-track-5 hover:pause mt-6 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 justify-around items-center">
           {[...entries, ...entries].map(({ component, url }) => (
-            <div key={url} className="w-[12rem] relative grayscale opacity-60 hover:opacity-100 transition duration-200 hover:grayscale-0">
+            <div
+              key={url}
+              className="w-[12rem] relative grayscale opacity-60 hover:opacity-100 transition duration-200 hover:grayscale-0"
+            >
               <a
                 href={url}
                 target="_blank"

website/components/home/showcase.tsx

@@ -5,19 +5,20 @@ import HackClub from '../../pages/showcase/hackclub.jpeg';
 import DonaAI from '../../pages/showcase/dona-ai.jpeg';
 import LLMReport from '../../pages/showcase/llm-report.png';
 import Texts from '../../pages/showcase/texts.png';
+import { useTranslations } from '../../hooks/use-translations';
 import { Container } from './container';
 
 export function Showcase() {
+  const { showCase } = useTranslations();
   return (
     <div className="my-42 relative">
       <Container>
         <div className="mb-16">
           <h2 className="mb-4 text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
-            Faster than the rest
+            {showCase.faster}
           </h2>
           <p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
-            Witness MillionJS in production where it creates a better user
-            experiences.
+            {showCase.witness}
           </p>
         </div>
 
@@ -29,7 +30,7 @@ export function Showcase() {
             className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-purple-600/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-zinc-700 dark:before:bg-zinc-800 sm:w-max"
           >
             <span className="relative text-base font-semibold text-purple-600 dark:text-white">
-              View the Million.js showcase
+              {showCase.showCase}
             </span>
           </Link>
         </div>

website/hooks/use-translations.ts

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router';
+import { translations } from '../translations';
+
+// This type represents the structure of each language's translations
+type Translation = (typeof translations)['en-US'];
+
+/**
+ * The function returns the translations for the current locale if it exists in the translations
+ * object.
+ * @returns The translations object for the specified locale, if it exists in the translations object.
+ */
+export function useTranslations(): Translation {
+  const { locale = 'en-US' } = useRouter();
+
+  if (locale in translations) {
+    return translations[locale];
+  }
+
+  // backup locale
+  return translations['en-US'];
+}

website/middleware.js

@@ -9,4 +9,4 @@ export const middleware = (request) => {
   // }
 
   return locales(request);
-};
+};

website/pages/index.fr-FR.mdx

@@ -1,5 +1,6 @@
 ---
-title: React хуки для получения данных
+title: 'Million.js'
+description: 'Le DOM virtuel de Block'
 ---
 
 import { Home } from '../components/home';

website/theme.config.tsx

@@ -273,7 +273,7 @@ const config: DocsThemeConfig = {
     { locale: 'en-US', text: 'English' },
     // { locale: 'zh-CN', text: 'Chinese' },
     // { locale: 'es-ES', text: 'Español' },
-    // { locale: 'fr-FR', text: 'French' },
+    { locale: 'fr-FR', text: 'Français' },
   ],
   useNextSeoProps() {
     const { asPath } = useRouter();