feat(i18n): implement localization using LinguiJS

apps/client/src/pages/home/sections/hero/call-to-action.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/macro";
 import { Book, SignOut } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui";
 import { Link } from "react-router-dom";
@@ -14,12 +15,12 @@ export const HeroCTA = () => {
     return (
       <>
         <Button asChild size="lg">
-          <Link to="/dashboard">Go to Dashboard</Link>
+          <Link to="/dashboard">{t`Go to Dashboard`}</Link>
         </Button>
 
         <Button size="lg" variant="link" onClick={() => logout()}>
           <SignOut className="mr-3" />
-          Logout
+          {t`Logout`}
         </Button>
       </>
     );
@@ -29,13 +30,13 @@ export const HeroCTA = () => {
     return (
       <>
         <Button asChild size="lg">
-          <Link to="/auth/login">Get started</Link>
+          <Link to="/auth/login">{t`Get Started`}</Link>
         </Button>
 
         <Button asChild size="lg" variant="link">
           <a href="https://docs.rxresu.me" target="_blank" rel="noopener noreferrer nofollow">
             <Book className="mr-3" />
-            Learn more
+            {t`Learn more`}
           </a>
         </Button>
       </>

apps/client/src/pages/home/sections/hero/index.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/macro";
 import { ArrowRight } from "@phosphor-icons/react";
 import { Badge, Button } from "@reactive-resume/ui";
 import { motion } from "framer-motion";
@@ -20,24 +21,23 @@ export const HeroSection = () => (
         whileInView={{ opacity: 1, x: 0 }}
       >
         <div className="mt-24 flex items-center gap-x-4 sm:mt-32 lg:mt-0">
-          <Badge>Version 4</Badge>
+          <Badge>{t`Version 4`}</Badge>
 
           <Button variant="link" className="space-x-2 text-left">
-            <p>What's new in the latest version</p>
+            <p>{t`What's new in the latest version`}</p>
             <ArrowRight />
           </Button>
         </div>
 
         <div className="mt-10 space-y-2">
-          <h6 className="text-base font-bold tracking-wide">Finally,</h6>
+          <h6 className="text-base font-bold tracking-wide">{t`Finally,`}</h6>
           <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
-            A free and open-source resume builder.
+            {t`A free and open-source resume builder.`}
           </h1>
         </div>
 
         <p className="prose prose-base prose-zinc mt-6 text-lg leading-8 dark:prose-invert">
-          A free and open-source resume builder that simplifies the process of creating, updating,
-          and sharing your resume.
+          {t`A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.`}
         </p>
 
         <div className="mt-10 flex items-center gap-x-8">
@@ -53,7 +53,7 @@ export const HeroSection = () => (
                 width={3600}
                 height={2078}
                 src="/screenshots/builder.png"
-                alt="Reactive Resume - Screenshot - Builder Screen"
+                alt={t`Reactive Resume - Screenshot - Builder Screen`}
                 className="w-[76rem] rounded-lg bg-background/5 shadow-2xl ring-1 ring-foreground/10"
               />
             </Tilt>

apps/client/src/pages/home/sections/logo-cloud/index.tsx

@@ -1,4 +1,5 @@
-import { Button } from "@reactive-resume/ui";
+import { t, Trans } from "@lingui/macro";
+import { buttonVariants } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 
 type LogoProps = { company: string };
@@ -35,7 +36,7 @@ export const LogoCloudSection = () => (
   <section className="relative py-24 sm:py-32">
     <div className="mx-auto max-w-7xl px-6 lg:px-8">
       <p className="text-center text-lg leading-relaxed">
-        Reactive Resume has helped people land jobs at these great companies:
+        {t`Reactive Resume has helped people land jobs at these great companies:`}
       </p>
       <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
         {logoList.map((company) => (
@@ -43,17 +44,18 @@ export const LogoCloudSection = () => (
         ))}
       </div>
       <p className="mx-auto mt-8 max-w-sm text-center leading-relaxed">
-        If this app has helped you with your job hunt, let me know by reaching out through{" "}
-        <Button asChild variant="link" className="p-0">
+        <Trans>
+          If this app has helped you with your job hunt, let me know by reaching out through{" "}
           <a
-            href="https://www.amruthpillai.com/#contact"
             target="_blank"
             rel="noopener noreferrer nofollow"
+            href="https://www.amruthpillai.com/#contact"
+            className={cn(buttonVariants({ variant: "link" }), "p-0")}
           >
             this contact form
           </a>
-        </Button>
-        .
+          .
+        </Trans>
       </p>
     </div>
   </section>

apps/client/src/pages/home/sections/statistics/index.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/macro";
+
 import { Counter } from "./counter";
 
 type Statistic = {
@@ -5,25 +7,27 @@ type Statistic = {
   value: number;
 };
 
-const stats: Statistic[] = [
-  { name: "GitHub Stars", value: 11800 },
-  { name: "Users Signed Up", value: 300000 },
-  { name: "Resumes Generated", value: 400000 },
-];
+export const StatisticsSection = () => {
+  const stats: Statistic[] = [
+    { name: t`GitHub Stars`, value: 11800 },
+    { name: t`Users Signed Up`, value: 300000 },
+    { name: t`Resumes Generated`, value: 400000 },
+  ];
 
-export const StatisticsSection = () => (
-  <section className="relative py-24 sm:py-32">
-    <div className="mx-auto max-w-7xl px-6 lg:px-8">
-      <dl className="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
-        {stats.map((stat, index) => (
-          <div key={index} className="mx-auto flex max-w-xs flex-col gap-y-4">
-            <dt className="text-base leading-7 opacity-60">{stat.name}</dt>
-            <dd className="order-first text-3xl font-semibold tracking-tight sm:text-5xl">
-              <Counter from={0} to={stat.value} />+
-            </dd>
-          </div>
-        ))}
-      </dl>
-    </div>
-  </section>
-);
+  return (
+    <section className="relative py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <dl className="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
+          {stats.map((stat, index) => (
+            <div key={index} className="mx-auto flex max-w-xs flex-col gap-y-4">
+              <dt className="text-base leading-7 opacity-60">{stat.name}</dt>
+              <dd className="order-first text-3xl font-semibold tracking-tight sm:text-5xl">
+                <Counter from={0} to={stat.value} />+
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+};