docs: main page updates (#1855)

website/docs/introduction.md

@@ -26,6 +26,10 @@ Use it everywhere. [`@lingui/core`](/docs/ref/core.md) provides the essential in
 
 Use React components inside localized messages without any limitation. Writing rich-text messages is as easy as writing JSX.
 
+### AI Translations Ready
+
+For AI to do great translations for you, context is critical. Translating UI copy is difficult because it's usually a list of short strings without enough context. Lingui's localization formats allow developers to write descriptions of where and how your keys are used. This allows both human translators and AI to make better translations.
+
 ### Powerful tooling
 
 Manage the whole intl workflow using Lingui [CLI](/docs/tutorials/cli.md). It extracts messages from source code, validates messages coming from translators and checks that all messages are translated before shipping to production.

website/src/components/Features.tsx

@@ -46,6 +46,18 @@ const FEATURES: FeatureDetails[] = [
     image: "rich-text.svg",
     additionalClass: "",
   },
+  {
+    title: "AI Translations Ready",
+    description: (
+      <p>
+        For AI to do great translations for you, context is critical. Translating UI copy is difficult because it&apos;s
+        usually a list of short strings without enough context. Lingui&apos;s localization formats allow developers to
+        write descriptions of where and how your keys are used.
+      </p>
+    ),
+    image: "ai-ready.png",
+    additionalClass: "",
+  },
   {
     title: "Headache-Free Professional Localization",
     description: (
@@ -66,6 +78,19 @@ const FEATURES: FeatureDetails[] = [
     image: "clean-and-readable.png",
     additionalClass: styles.featureCardCellWide,
   },
+  {
+    title: "Battle-Proven & Future Proof",
+    description: (
+      <p>
+        During the last 7 years, we&apos;ve seen a lot of localization projects and developed a tool to handle them all.
+        <br />
+        If your team needs to edit source texts without developer involvement, or you want the ability to deliver the
+        most recent translations directly to your customers – we&apos;ve got you covered.
+      </p>
+    ),
+    image: "time.svg",
+    additionalClass: styles.featureCardCellWide,
+  },
   {
     title: "Suitable for All Localization Platforms",
     description: (
@@ -88,19 +113,6 @@ const FEATURES: FeatureDetails[] = [
     image: "verified.svg",
     additionalClass: "",
   },
-  {
-    title: "Battle-Proven & Future Proof",
-    description: (
-      <p>
-        During the last 7 years, we&apos;ve seen a lot of localization projects and developed a tool to handle them all.
-        <br />
-        If your team needs to edit source texts without developer involvement, or you want the ability to deliver the
-        most recent translations directly to your customers – we&apos;ve got you covered.
-      </p>
-    ),
-    image: "time.svg",
-    additionalClass: styles.featureCardCellWide,
-  },
   {
     title: "Fully Fledged",
     description: (
@@ -113,17 +125,6 @@ const FEATURES: FeatureDetails[] = [
     image: "fledged.svg",
     additionalClass: styles.featureCardCellWide,
   },
-  {
-    title: "Free and Fully Supported",
-    description: (
-      <p>
-        With Lingui, you have access to a powerful i18n tool at no cost and our team is always available to assist you
-        with any questions.
-      </p>
-    ),
-    image: "free.svg",
-    additionalClass: "",
-  },
 ];
 
 const FeatureCard = ({ title, description, image, additionalClass }: FeatureDetails): React.ReactElement => (

website/src/components/Users.module.scss

@@ -34,6 +34,8 @@
 .logo {
   width: 64px;
   height: auto;
+  border-radius: 8px;
+  transition: 0.2s;
 }
 
 .user,
@@ -43,4 +45,8 @@
 
 .user:hover {
   text-decoration: none;
+
+  .logo {
+    transform: scale(1.1);
+  }
 }

website/src/components/Users.tsx

@@ -17,30 +17,35 @@ const USERS: UserDetails[] = [
     link: "https://github.com/brave/ads-ui",
   },
   {
-    logo: "lenster.svg",
-    name: "Lenster",
-    link: "https://github.com/lensterxyz/lenster",
+    logo: "bluesky.png",
+    name: "Bluesky",
+    link: "https://github.com/bluesky-social/social-app",
   },
   {
     logo: "ansible.png",
-    name: "Ansible AWX",
+    name: "Ansible",
     link: "https://github.com/ansible/awx",
   },
   {
-    logo: "bluesky.png",
-    name: "Bluesky",
-    link: "https://github.com/bluesky-social/social-app",
-  },
-  {
-    logo: "linkerd.png",
-    name: "Linkerd",
-    link: "https://github.com/linkerd/linkerd2",
+    logo: "metamask.png",
+    name: "Metamask",
+    link: "https://github.com/MetaMask/snaps-directory",
   },
   {
     logo: "uniswap.png",
     name: "Uniswap",
     link: "https://github.com/Uniswap/interface",
   },
+  {
+    logo: "graysky.png",
+    name: "Graysky",
+    link: "https://github.com/mozzius/graysky",
+  },
+  {
+    logo: "linkerd.png",
+    name: "Linkerd",
+    link: "https://github.com/linkerd/linkerd2",
+  },
   {
     logo: "zipkin.png",
     name: "Zipkin",