add translate script for i18n support

.gitignore

@@ -7,6 +7,7 @@ docs/.DS_Store
 docs/public/.DS_Store
 pnpm-lock.yaml
 vocs.config.ts.timestamp-*
+vocs.config.tsx.timestamp-*
 docs/pages/solutions/.DS_Store
 .cursorrules
 .env*
@@ -17,4 +18,4 @@ docs/pages/api/api/api.gen.yaml
 docs/pages/api/indexer/indexer.gen.yaml
 docs/pages/api/marketplace/marketplace.gen.yaml
 docs/pages/api/metadata/metadata.gen.yaml
-docs/pages/api/relayer/relayer.gen.yaml
+docs/pages/api/relayer/relayer.gen.yaml

docs/components/BuilderAuthenticationButton.tsx

@@ -8,12 +8,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from './Dialog/Dialog'
+import { Trans, useLingui } from '@lingui/react/macro'
 
 const builderURL = import.meta.env.DEV
   ? 'http://localhost:8080/https://api.sequence.build' // Routing with a cors-anywhere proxy
   : 'https://api.sequence.build' // Production URL
 
 function BuilderAuthenticationButton(): ReactElement {
+  const { t } = useLingui()
   const [isConnected, setIsConnected] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const [projects, setProjects] = useState<any[]>([])
@@ -72,14 +74,16 @@ function BuilderAuthenticationButton(): ReactElement {
         className="hover-fade font-bold text-white max-w-max h-min text-center rounded-full bg-gradient-to-r from-[#4411E1] to-[#7537F9] px-[20px] py-[4px] text-[12px] top-auth-button_position"
         onClick={isConnected ? () => handleConnected() : handleConnect}
       >
-        {isConnected && selectedProjectId ? `Project: ${selectedProjectId}` : 'Login'}
+        {isConnected && selectedProjectId ? t`Project: ${selectedProjectId}` : t`Login`}
       </button>
       <Dialog open={showModal} onOpenChange={setShowModal}>
         <DialogContent className="overflow-y-auto max-h-[80vh] sm:max-w-[600px] bg-black text-white border-gray-800">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-bold text-white">Select a Project</DialogTitle>
+            <DialogTitle className="text-2xl font-bold text-white">
+              <Trans id="select_project_title">Select a Project" </Trans>
+            </DialogTitle>
             <DialogDescription className="text-gray-400">
-              Choose a project from the list below.
+              <Trans id="select_project_description">Choose a project from the list below.</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -102,7 +106,7 @@ function BuilderAuthenticationButton(): ReactElement {
                     </p>
                   </div>
                   <p className="text-themed-secondary text-sm font-medium">
-                    Project ID: {project.id}
+                    {t`Project: ${project.id}`}
                   </p>
                 </a>
               ))}

docs/components/CardSections/MonetizationOverview.tsx

@@ -7,7 +7,7 @@ export const MonetizationOverview = () => (
       <SolutionsGroup
         theme="green"
         heading="Sequence Pay"
-        icon='CartIcon'
+        icon="CartIcon"
         items={[
           {
             title: 'Overview',
@@ -29,18 +29,12 @@ export const MonetizationOverview = () => (
             body: 'Enable users to purchase cryptocurrencies with credit or debit cards using region-optimized providers like Transak.',
             link: '/solutions/wallets/sequence-kit/on-ramp',
           },
-          // {
-          //   icon: 'CartIcon',
-          //   title: 'Primary Sales',
-          //   body: 'Introducing Jelly Forest: a blockchain-enabled 2D runner game with social sign in, an in-game store, a backend transaction manager and more - all built in Unity using the Sequence platform.',
-          //   link: '/guides/unity-guide',
-          // },
         ]}
       />
       <SolutionsGroup
         theme="purple"
         heading="White-Label Marketplace"
-        icon='MarketplaceIcon'
+        icon="MarketplaceIcon"
         items={[
           {
             title: 'Enforce Royalties',
@@ -70,7 +64,7 @@ export const MonetizationOverview = () => (
         <SolutionsGroup
           theme="black"
           heading="Custom Marketplace"
-          icon='MinterIcon'
+          icon="MinterIcon"
           items={[
             {
               title: 'Marketplace APIs',
@@ -121,11 +115,11 @@ const SolutionsGroup = ({
           })}
         />
         <div className="flex items-center gap-2 px-4">
-        {ICONS[icon]({ className: "mt-1" })}
+          {ICONS[icon]({ className: 'mt-1' })}
 
           <p className="font-bold text-themed-primary z-10">{heading}</p>
         </div>
-        
+
         {items.map((item, index) => {
           return (
             <a

docs/components/CardSections/OverviewSection.tsx

@@ -1,140 +1,138 @@
 import clsx from 'clsx'
 import * as ICONS from '../Landing/icons'
+import { useLingui } from '@lingui/react/macro'
 
-export const OverviewSection = () => (
-  <section className="flex flex-col gap-5 border-t border-black-10">
-    <div className="flex md:flex-row flex-col gap-4">
-      <SolutionsGroup
-        theme="black"
-        heading="Get Started"
-        items={[
-          {
-            icon: 'SequenceIcon',
-            title: 'Create your first project',
-            body: 'Get started with the Sequence platform by following this quick guide to create your first project and get access to all the features available to build your next game or app.',
-            link: '/solutions/builder/getting-started',
-          },
-          {
-            icon: 'CollectiblesIcon',
-            title: 'Embedded Wallet Demo',
-            body: 'Try out our embedded wallet in a browser with Sequence Kit. Fully customizable, brandable, and available in your favorite game engine or framework.',
-            link: 'https://0xsequence.github.io/kit/?mode=waas',
-          },
-          {
-            icon: 'UnityIcon',
-            title: 'End to End Unity Game Guide',
-            body: 'Introducing Jelly Forest: a blockchain-enabled 2D runner game with social sign in, an in-game store, a backend transaction manager and more - all built in Unity using the Sequence platform.',
-            link: '/guides/jelly-forest-unity-guide',
-          },
-          {
-            icon: 'DiscordIcon',
-            title: 'Join our Community',
-            body: 'Join our Discord for onboarding, support, share your project, and more!',
-            link: 'https://discord.com/invite/sequence',
-          },
-        ]}
-      />
-      <SolutionsGroup
-        theme="purple"
-        heading="Onboard players"
-        items={[
-          {
-            icon: 'WalletIcon',
-            title: 'Embedded Wallet',
-            body: 'Gasless Transactions. No popups. Deliver a seamless experience for both web2 and web3 players with Sequence embedded into your game or app, compatible with nearly any platform or game engine.',
-            link: '/solutions/wallets/embedded-wallet/overview',
-          },
-          {
-            icon: 'MinterIcon',
-            title: 'Sequence Kit',
-            body: 'Built on top of wagmi, onboard web2 users or native crypto users with an existing wallet to your web game or app.',
-            link: '/solutions/wallets/sequence-kit/overview',
-          },
-          {
-            icon: 'AirdropperIcon',
-            title: 'Wallet Linking',
-            body: 'Enable users to link their embedded wallet in your game with an external wallet - allowing you to query assets, balances, and allow easy flow of liquidity to your game.',
-            link: '/solutions/wallets/link-wallets/overview',
-          },
-          {
-            icon: 'WalletIcon',
-            title: 'Universal Wallet',
-            body: 'Easily onboard web3-native players with a complete Universal Wallet.',
-            link: '/solutions/wallets/universal-wallet/overview',
-          },
-        ]}
-      />
-    </div>
-    <div className="flex md:flex-row flex-col gap-4">
-      <SolutionsGroup
-        theme="green"
-        heading="Earn more revenue"
-        items={[
-          {
-            icon: 'MarketplaceIcon',
-            title: 'White-Label Marketplace',
-            body: 'Launch an in-game collectibles marketplace within minutes.',
-            link: '/solutions/marketplaces/white-label-marketplace/overview',
-          },
-          {
-            icon: 'SequenceIcon',
-            title: 'Marketplace APIs',
-            body: 'Integrate custom in-game marketplaces with our APIs.',
-            link: '/solutions/marketplaces/orderbook/overview',
-          },
-          {
-            icon: 'CartIcon',
-            title: 'NFT Checkout',
-            body: 'Offer easy purchases with credit card, crypto, IAP support.',
-            link: '/solutions/wallets/sequence-kit/checkout',
-          },
-          {
-            icon: 'NodeGatewayIcon',
-            title: 'Fiat On-ramps',
-            body: 'Allow players to convert from fiat to crypto globally.',
-            link: '/solutions/payments/onramps/fiat-on-ramps',
-          },
-        ]}
-      />
-      <SolutionsGroup
-        theme="yellow"
-        heading="Power your game"
-        items={[
-          {
-            icon: 'IndexerIcon',
-            title: 'Indexer',
-            body: 'Performantly query wallets and contracts to use in your game or app.',
-            link: '/solutions/builder/indexer',
-          },
-          {
-            icon: 'CollectiblesIcon',
-            title: 'Contracts & Collectibles',
-            body: 'Import any contract or deploy a new one with our audited smart contract suite. Manage your collection metadata at scale.',
-            link: '/solutions/collectibles/contracts/deploy-an-item-collection',
-          },
-          {
-            icon: 'AnalyticsIcon',
-            title: 'Analytics',
-            body: 'Track every aspect of web3 activity within your games.',
-            link: '/solutions/builder/analytics',
-          },
-          {
-            icon: 'MinterIcon',
-            title: 'Transaction Manager',
-            body: 'Scalable transactions with batching, access-control, parallelization, automatic reorg management with our transactions API.',
-            link: '/solutions/transactions-api/overview',
-          },
-          // {
-          //   icon: 'MinterIcon',
-          //   title: 'Minter',
-          //   body: 'Securely mint achievement tokens tied to your game.',
-          //   link: '/guides/mint-collectibles-serverless/',
-          // },
-        ]}
-      />
-    </div>
-  </section>
-)
+export const OverviewSection = () => {
+  const { t } = useLingui()
+  return (
+    <section className="flex flex-col gap-5 border-t border-black-10">
+      <div className="flex md:flex-row flex-col gap-4">
+        <SolutionsGroup
+          theme="black"
+          heading={t`Get Started`}
+          items={[
+            {
+              icon: 'SequenceIcon',
+              title: t`Create your first project`,
+              body: t`Get started with the Sequence platform by following this quick guide to create your first project and get access to all the features available to build your next game or app.`,
+              link: `/solutions/builder/getting-started`,
+            },
+            {
+              icon: 'CollectiblesIcon',
+              title: t`Embedded Wallet Demo`,
+              body: t`Try out our embedded wallet in a browser with Sequence Kit. Fully customizable, brandable, and available in your favorite game engine or framework.`,
+              link: `https://0xsequence.github.io/kit/?mode=waas`,
+            },
+            {
+              icon: 'UnityIcon',
+              title: t`End to End Unity Game Guide`,
+              body: t`Introducing Jelly Forest: a blockchain-enabled 2D runner game with social sign in, an in-game store, a backend transaction manager and more - all built in Unity using the Sequence platform.`,
+              link: `/guides/jelly-forest-unity-guide`,
+            },
+            {
+              icon: 'DiscordIcon',
+              title: t`Join our Community`,
+              body: t`Join our Discord for onboarding, support, share your project, and more!`,
+              link: `https://discord.com/invite/sequence`,
+            },
+          ]}
+        />
+        <SolutionsGroup
+          theme="purple"
+          heading={t`Onboard players`}
+          items={[
+            {
+              icon: 'WalletIcon',
+              title: t`Embedded Wallet`,
+              body: t`Gasless Transactions. No popups. Deliver a seamless experience for both web2 and web3 players with Sequence embedded into your game or app, compatible with nearly any platform or game engine.`,
+              link: `/solutions/wallets/embedded-wallet/overview`,
+            },
+            {
+              icon: 'MinterIcon',
+              title: t`Sequence Kit`,
+              body: t`Built on top of wagmi, onboard web2 users or native crypto users with an existing wallet to your web game or app.`,
+              link: `/solutions/wallets/sequence-kit/overview`,
+            },
+            {
+              icon: 'AirdropperIcon',
+              title: t`Wallet Linking`,
+              body: t`Enable users to link their embedded wallet in your game with an external wallet - allowing you to query assets, balances, and allow easy flow of liquidity to your game.`,
+              link: `/solutions/wallets/link-wallets/overview`,
+            },
+            {
+              icon: 'WalletIcon',
+              title: t`Universal Wallet`,
+              body: t`Easily onboard web3-native players with a complete Universal Wallet.`,
+              link: `/solutions/wallets/universal-wallet/overview`,
+            },
+          ]}
+        />
+      </div>
+      <div className="flex md:flex-row flex-col gap-4">
+        <SolutionsGroup
+          theme="green"
+          heading={t`Earn more revenue`}
+          items={[
+            {
+              icon: 'MarketplaceIcon',
+              title: t`White-Label Marketplace`,
+              body: t`Launch an in-game collectibles marketplace within minutes.`,
+              link: `/solutions/marketplaces/white-label-marketplace/overview`,
+            },
+            {
+              icon: 'SequenceIcon',
+              title: t`Marketplace APIs`,
+              body: t`Integrate custom in-game marketplaces with our APIs.`,
+              link: `/solutions/marketplaces/orderbook/overview`,
+            },
+            {
+              icon: 'CartIcon',
+              title: t`NFT Checkout`,
+              body: t`Offer easy purchases with credit card, crypto, IAP support.`,
+              link: `/solutions/wallets/sequence-kit/checkout`,
+            },
+            {
+              icon: 'NodeGatewayIcon',
+              title: t`Fiat On-ramps`,
+              body: t`Allow players to convert from fiat to crypto globally.`,
+              link: `/solutions/payments/onramps/fiat-on-ramps`,
+            },
+          ]}
+        />
+        <SolutionsGroup
+          theme="yellow"
+          heading={t`Power your game`}
+          items={[
+            {
+              icon: 'IndexerIcon',
+              title: t`Indexer`,
+              body: t`Performantly query wallets and contracts to use in your game or app.`,
+              link: `/solutions/builder/indexer`,
+            },
+            {
+              icon: 'CollectiblesIcon',
+              title: t`Contracts & Collectibles`,
+              body: t`Import any contract or deploy a new one with our audited smart contract suite. Manage your collection metadata at scale.`,
+              link: `/solutions/collectibles/contracts/deploy-an-item-collection`,
+            },
+            {
+              icon: 'AnalyticsIcon',
+              title: t`Analytics`,
+              body: t`Track every aspect of web3 activity within your games.`,
+              link: `/solutions/builder/analytics`,
+            },
+            {
+              icon: 'MinterIcon',
+              title: t`Transaction Manager`,
+              body: t`Scalable transactions with batching, access-control, parallelization, automatic reorg management with our transactions API.`,
+              link: `/solutions/transactions-api/overview`,
+            },
+          ]}
+        />
+      </div>
+    </section>
+  )
+}
 
 export const SolutionsGroup = ({
   heading,