From c21718a4afa5c96cdfdc45511d04d6893c1a0039 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 16:22:16 +0200
Subject: [PATCH 01/11] feat: track outbound clicks

---
 site/src/components/PageLayout/PageLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/PageLayout/PageLayout.tsx b/site/src/components/PageLayout/PageLayout.tsx
index 3d4c695b..71a08a07 100644
--- a/site/src/components/PageLayout/PageLayout.tsx
+++ b/site/src/components/PageLayout/PageLayout.tsx
@@ -12,7 +12,7 @@ export const PageLayout: FC<PropsWithChildren> = ({ children }) => {
 				<script
 					defer
 					data-domain="linguister.io"
-					src="https://pulse2.vitonsky.net/js/script.js"
+					src="https://pulse2.vitonsky.net/js/script.outbound-links.js"
 				></script>
 				<script
 					async

From 2046fc9e4764f9031b1ee9ba368ddef335b26c79 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 16:47:56 +0200
Subject: [PATCH 02/11] feat: track clicks for any links

---
 site/package-lock.json                        |  9 ++++
 site/package.json                             |  1 +
 site/src/components/PageLayout/PageLayout.tsx | 41 ++++++++++++++++---
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index 28e177b0..42793e52 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -16,6 +16,7 @@
 				"@mdx-js/react": "^3.0.0",
 				"clsx": "^2.0.0",
 				"framer-motion": "^11.2.11",
+				"plausible-tracker": "^0.3.9",
 				"prism-react-renderer": "^2.3.0",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0"
@@ -12401,6 +12402,14 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/plausible-tracker": {
+			"version": "0.3.9",
+			"resolved": "https://registry.npmjs.org/plausible-tracker/-/plausible-tracker-0.3.9.tgz",
+			"integrity": "sha512-hMhneYm3GCPyQon88SZrVJx+LlqhM1kZFQbuAgXPoh/Az2YvO1B6bitT9qlhpiTdJlsT5lsr3gPmzoVjb5CDXA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.4.38",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
diff --git a/site/package.json b/site/package.json
index 62b483ce..0642b55c 100644
--- a/site/package.json
+++ b/site/package.json
@@ -23,6 +23,7 @@
 		"@mdx-js/react": "^3.0.0",
 		"clsx": "^2.0.0",
 		"framer-motion": "^11.2.11",
+		"plausible-tracker": "^0.3.9",
 		"prism-react-renderer": "^2.3.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
diff --git a/site/src/components/PageLayout/PageLayout.tsx b/site/src/components/PageLayout/PageLayout.tsx
index 71a08a07..6585e252 100644
--- a/site/src/components/PageLayout/PageLayout.tsx
+++ b/site/src/components/PageLayout/PageLayout.tsx
@@ -1,19 +1,48 @@
-import React, { FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren, useEffect } from 'react';
+import Plausible from 'plausible-tracker';
 import { ChakraBaseProvider } from '@chakra-ui/react';
 import Head from '@docusaurus/Head';
 
 import theme from '../theme';
 
 export const PageLayout: FC<PropsWithChildren> = ({ children }) => {
+	useEffect(() => {
+		const plausible = Plausible({
+			domain: 'linguister.io',
+			apiHost: 'https://pulse2.vitonsky.net',
+		});
+
+		plausible.enableAutoPageviews();
+		plausible.enableAutoOutboundTracking();
+
+		// Track clicks
+		document.body.addEventListener('click', (event: MouseEvent) => {
+			// Explore click targets to find a link element
+			const targets = event?.composedPath() || [event.target];
+			for (const target of targets) {
+				if (!(target instanceof HTMLAnchorElement)) continue;
+
+				const timestamp = performance.now();
+				plausible.trackEvent('Link click', {
+					props: {
+						// Current location
+						location: location.toString(),
+						url: target.href,
+						text: target.innerText,
+						// Time since visit page
+						timestamp: timestamp,
+						timestampSeconds: timestamp / 1000,
+					},
+				});
+				break;
+			}
+		});
+	});
+
 	return (
 		<ChakraBaseProvider theme={theme}>
 			<Head>
 				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-				<script
-					defer
-					data-domain="linguister.io"
-					src="https://pulse2.vitonsky.net/js/script.outbound-links.js"
-				></script>
 				<script
 					async
 					src="https://www.googletagmanager.com/gtag/js?id=G-NGGDLX42RQ"

From 18e259b5b9d3f6611bb4530d797834005da39517 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 17:17:53 +0200
Subject: [PATCH 03/11] refactor: move analytics to a component

---
 .../Analytics/AnalyticsProvider.tsx           | 57 +++++++++++++++++++
 .../Analytics/useAnalyticsContext.tsx         | 17 ++++++
 site/src/components/PageLayout/PageLayout.tsx | 46 ++++-----------
 3 files changed, 84 insertions(+), 36 deletions(-)
 create mode 100644 site/src/components/Analytics/AnalyticsProvider.tsx
 create mode 100644 site/src/components/Analytics/useAnalyticsContext.tsx

diff --git a/site/src/components/Analytics/AnalyticsProvider.tsx b/site/src/components/Analytics/AnalyticsProvider.tsx
new file mode 100644
index 00000000..c31fcec6
--- /dev/null
+++ b/site/src/components/Analytics/AnalyticsProvider.tsx
@@ -0,0 +1,57 @@
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import Plausible from 'plausible-tracker';
+import { PlausibleInitOptions } from 'plausible-tracker/build/main/lib/tracker';
+
+import { analyticsContext, IAnalyticsContext } from './useAnalyticsContext';
+
+export const AnalyticsProvider = ({
+	options,
+	children,
+}: PropsWithChildren<{ options: PlausibleInitOptions }>) => {
+	const [plausible] = useState(() => Plausible(options));
+
+	const trackEvent: IAnalyticsContext['trackEvent'] = useCallback(
+		(eventName, props) => {
+			const timestamp = performance.now();
+			plausible.trackEvent(eventName, {
+				// Additional props for every event
+				props: {
+					// Current location
+					location: location.toString(),
+					// Time since visit page
+					timestamp: timestamp,
+					timestampSeconds: timestamp / 1000,
+					...props,
+				},
+			});
+		},
+		[plausible],
+	);
+
+	// Setup default analytic listeners
+	useEffect(() => {
+		plausible.enableAutoPageviews();
+		plausible.enableAutoOutboundTracking();
+
+		// Track clicks
+		document.body.addEventListener('click', (event: MouseEvent) => {
+			// Explore click targets to find a link element
+			const targets = event?.composedPath() || [event.target];
+			for (const target of targets) {
+				if (!(target instanceof HTMLAnchorElement)) continue;
+
+				trackEvent('Link click', {
+					url: target.href,
+					text: target.innerText,
+				});
+				break;
+			}
+		});
+	}, [plausible, trackEvent]);
+
+	return (
+		<analyticsContext.Provider value={{ trackEvent }}>
+			{children}
+		</analyticsContext.Provider>
+	);
+};
diff --git a/site/src/components/Analytics/useAnalyticsContext.tsx b/site/src/components/Analytics/useAnalyticsContext.tsx
new file mode 100644
index 00000000..3bd5013e
--- /dev/null
+++ b/site/src/components/Analytics/useAnalyticsContext.tsx
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+export type IAnalyticsContext = {
+	trackEvent: (eventName: string, props: Record<string, string>) => void;
+};
+
+export const analyticsContext = createContext<IAnalyticsContext>(null as any);
+
+export const useAnalyticsContext = () => {
+	const context = useContext(analyticsContext);
+	if (context === null)
+		throw new Error(
+			'Analytics context is not available. Make sure component is wrapped with AnalyticsProvider',
+		);
+
+	return context;
+};
diff --git a/site/src/components/PageLayout/PageLayout.tsx b/site/src/components/PageLayout/PageLayout.tsx
index 6585e252..929dcadd 100644
--- a/site/src/components/PageLayout/PageLayout.tsx
+++ b/site/src/components/PageLayout/PageLayout.tsx
@@ -1,44 +1,11 @@
-import React, { FC, PropsWithChildren, useEffect } from 'react';
-import Plausible from 'plausible-tracker';
+import React, { FC, PropsWithChildren } from 'react';
 import { ChakraBaseProvider } from '@chakra-ui/react';
 import Head from '@docusaurus/Head';
 
+import { AnalyticsProvider } from '../Analytics/AnalyticsProvider';
 import theme from '../theme';
 
 export const PageLayout: FC<PropsWithChildren> = ({ children }) => {
-	useEffect(() => {
-		const plausible = Plausible({
-			domain: 'linguister.io',
-			apiHost: 'https://pulse2.vitonsky.net',
-		});
-
-		plausible.enableAutoPageviews();
-		plausible.enableAutoOutboundTracking();
-
-		// Track clicks
-		document.body.addEventListener('click', (event: MouseEvent) => {
-			// Explore click targets to find a link element
-			const targets = event?.composedPath() || [event.target];
-			for (const target of targets) {
-				if (!(target instanceof HTMLAnchorElement)) continue;
-
-				const timestamp = performance.now();
-				plausible.trackEvent('Link click', {
-					props: {
-						// Current location
-						location: location.toString(),
-						url: target.href,
-						text: target.innerText,
-						// Time since visit page
-						timestamp: timestamp,
-						timestampSeconds: timestamp / 1000,
-					},
-				});
-				break;
-			}
-		});
-	});
-
 	return (
 		<ChakraBaseProvider theme={theme}>
 			<Head>
@@ -61,7 +28,14 @@ export const PageLayout: FC<PropsWithChildren> = ({ children }) => {
 					}}
 				/>
 			</Head>
-			{children}
+			<AnalyticsProvider
+				options={{
+					domain: 'linguister.io',
+					apiHost: 'https://pulse2.vitonsky.net',
+				}}
+			>
+				{children}
+			</AnalyticsProvider>
 		</ChakraBaseProvider>
 	);
 };

From 673879cbd05216498ffa0d6c0f82954f2661c2e1 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 17:24:09 +0200
Subject: [PATCH 04/11] feat: track click by download buttons

---
 site/src/components/Landing/Landing.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/site/src/components/Landing/Landing.tsx b/site/src/components/Landing/Landing.tsx
index b721cf5c..12a1ec14 100644
--- a/site/src/components/Landing/Landing.tsx
+++ b/site/src/components/Landing/Landing.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { Button, HStack, Icon, Image, Link, Text, VStack } from '@chakra-ui/react';
 
+import { useAnalyticsContext } from '../Analytics/useAnalyticsContext';
 import Logo from './logo.svg';
 
 import styles from './Landing.module.css';
@@ -9,6 +10,8 @@ import styles from './Landing.module.css';
 export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 	const getUrl = (path: string) => [baseUrl, path].join('/').replace(/\/{2,}/g, '/');
 
+	const { trackEvent } = useAnalyticsContext();
+
 	return (
 		<VStack w="100%" spacing={0}>
 			<VStack w="100%" className={clsx(styles.TopScreen)}>
@@ -68,6 +71,11 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									target="_blank"
 									href="https://chrome.google.com/webstore/detail/gbefmodhlophhakmoecijeppjblibmie"
 									px={4}
+									onClick={() => {
+										trackEvent('Download link: Click', {
+											target: 'chrome',
+										});
+									}}
 								>
 									Install for Chrome
 								</Button>
@@ -84,6 +92,11 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									target="_blank"
 									href="https://addons.mozilla.org/addon/linguist-translator/"
 									px={4}
+									onClick={() => {
+										trackEvent('Download link: Click', {
+											target: 'firefox',
+										});
+									}}
 								>
 									Install for Firefox
 								</Button>

From f7f5e6877318f6777099ae6eb0c7c94b70fb04ed Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 18:02:16 +0200
Subject: [PATCH 05/11] chore: add image for main page

---
 site/src/components/Landing/Landing.tsx | 3 ++-
 site/src/pages/index.tsx                | 9 +++++++++
 site/src/utils/url.ts                   | 2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 site/src/utils/url.ts

diff --git a/site/src/components/Landing/Landing.tsx b/site/src/components/Landing/Landing.tsx
index 12a1ec14..ae49ca34 100644
--- a/site/src/components/Landing/Landing.tsx
+++ b/site/src/components/Landing/Landing.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { Button, HStack, Icon, Image, Link, Text, VStack } from '@chakra-ui/react';
+import { buildPathGetter } from '@site/src/utils/url';
 
 import { useAnalyticsContext } from '../Analytics/useAnalyticsContext';
 import Logo from './logo.svg';
@@ -8,7 +9,7 @@ import Logo from './logo.svg';
 import styles from './Landing.module.css';
 
 export const Landing = ({ baseUrl }: { baseUrl: string }) => {
-	const getUrl = (path: string) => [baseUrl, path].join('/').replace(/\/{2,}/g, '/');
+	const getUrl = buildPathGetter(baseUrl);
 
 	const { trackEvent } = useAnalyticsContext();
 
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
index b94a6bd8..5d15c746 100644
--- a/site/src/pages/index.tsx
+++ b/site/src/pages/index.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
+import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import { Landing } from '../components/Landing/Landing';
 import { PageLayout } from '../components/PageLayout/PageLayout';
+import { buildPathGetter } from '../utils/url';
 
 export default function Page(): JSX.Element {
 	const { siteConfig } = useDocusaurusContext();
+	const getUrl = buildPathGetter(siteConfig.baseUrl);
 	return (
 		<PageLayout>
+			<Head>
+				<meta
+					property="og:image"
+					content={getUrl('screenshots/page-translation.png')}
+				/>
+			</Head>
 			<Landing baseUrl={siteConfig.baseUrl} />
 		</PageLayout>
 	);
diff --git a/site/src/utils/url.ts b/site/src/utils/url.ts
new file mode 100644
index 00000000..9a01ed9e
--- /dev/null
+++ b/site/src/utils/url.ts
@@ -0,0 +1,2 @@
+export const buildPathGetter = (baseUrl: string) => (path: string) =>
+	[baseUrl, path].join('/').replace(/\/{2,}/g, '/');

From fd434e34d39461310b12c43a8e44a66c9c62c1d3 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 20:11:54 +0200
Subject: [PATCH 06/11] feat(site): use i18n for texts

---
 site/package-lock.json                  |  63 +++++++++-
 site/package.json                       |   4 +-
 site/src/components/Landing/Landing.tsx | 146 ++++++++++--------------
 site/src/components/Landing/i18n.ts     | 118 +++++++++++++++++++
 4 files changed, 246 insertions(+), 85 deletions(-)
 create mode 100644 site/src/components/Landing/i18n.ts

diff --git a/site/package-lock.json b/site/package-lock.json
index 42793e52..39b320a4 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -16,10 +16,12 @@
 				"@mdx-js/react": "^3.0.0",
 				"clsx": "^2.0.0",
 				"framer-motion": "^11.2.11",
+				"i18next": "^23.11.5",
 				"plausible-tracker": "^0.3.9",
 				"prism-react-renderer": "^2.3.0",
 				"react": "^18.0.0",
-				"react-dom": "^18.0.0"
+				"react-dom": "^18.0.0",
+				"react-i18next": "^14.1.2"
 			},
 			"devDependencies": {
 				"@docusaurus/module-type-aliases": "3.4.0",
@@ -8640,6 +8642,14 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/html-parse-stringify": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+			"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+			"dependencies": {
+				"void-elements": "3.1.0"
+			}
+		},
 		"node_modules/html-tags": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -8834,6 +8844,28 @@
 				"node": ">=10.17.0"
 			}
 		},
+		"node_modules/i18next": {
+			"version": "23.11.5",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+			"integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://locize.com"
+				},
+				{
+					"type": "individual",
+					"url": "https://locize.com/i18next.html"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+				}
+			],
+			"dependencies": {
+				"@babel/runtime": "^7.23.2"
+			}
+		},
 		"node_modules/iconv-lite": {
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13407,6 +13439,27 @@
 				"react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
+		"node_modules/react-i18next": {
+			"version": "14.1.2",
+			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.2.tgz",
+			"integrity": "sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==",
+			"dependencies": {
+				"@babel/runtime": "^7.23.9",
+				"html-parse-stringify": "^3.0.1"
+			},
+			"peerDependencies": {
+				"i18next": ">= 23.2.3",
+				"react": ">= 16.8.0"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				},
+				"react-native": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15647,6 +15700,14 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/void-elements": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+			"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/watchpack": {
 			"version": "2.4.1",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
diff --git a/site/package.json b/site/package.json
index 0642b55c..223f0fdd 100644
--- a/site/package.json
+++ b/site/package.json
@@ -23,10 +23,12 @@
 		"@mdx-js/react": "^3.0.0",
 		"clsx": "^2.0.0",
 		"framer-motion": "^11.2.11",
+		"i18next": "^23.11.5",
 		"plausible-tracker": "^0.3.9",
 		"prism-react-renderer": "^2.3.0",
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react-dom": "^18.0.0",
+		"react-i18next": "^14.1.2"
 	},
 	"devDependencies": {
 		"@docusaurus/module-type-aliases": "3.4.0",
diff --git a/site/src/components/Landing/Landing.tsx b/site/src/components/Landing/Landing.tsx
index ae49ca34..553edfa3 100644
--- a/site/src/components/Landing/Landing.tsx
+++ b/site/src/components/Landing/Landing.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { clsx } from 'clsx';
 import { Button, HStack, Icon, Image, Link, Text, VStack } from '@chakra-ui/react';
 import { buildPathGetter } from '@site/src/utils/url';
 
+import './i18n';
 import { useAnalyticsContext } from '../Analytics/useAnalyticsContext';
 import Logo from './logo.svg';
 
 import styles from './Landing.module.css';
 
 export const Landing = ({ baseUrl }: { baseUrl: string }) => {
+	const { t } = useTranslation();
+
 	const getUrl = buildPathGetter(baseUrl);
 
 	const { trackEvent } = useAnalyticsContext();
@@ -30,32 +34,34 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 						}}
 					>
 						<Link variant="base" href="#features">
-							Features
+							{t('navigation.features.content')}
 						</Link>
 						<Link
 							variant="base"
 							href="https://github.com/translate-tools/linguist"
 						>
-							GitHub
+							{t('navigation.github.content')}
 						</Link>
 					</HStack>
 				</HStack>
 				<HStack
 					spacing={10}
 					py={20}
+					w="100%"
 					className={clsx(styles.HeroContainer, styles.PageContainer)}
 				>
-					<HStack spacing={10} className={clsx(styles.TopScreenContent)}>
+					<HStack
+						spacing={10}
+						w="100%"
+						justifyContent="space-between"
+						className={clsx(styles.TopScreenContent)}
+					>
 						<VStack alignItems="start">
 							<Text as="h1" fontSize="38px">
-								Linguist is a privacy focused, full‑featured translation
-								solution
+								{t(['sections.hero.title'])}
 							</Text>
 							<Text fontSize="24px" maxW={750}>
-								Translate web pages, highlighted text, Netflix subtitles
-								and private messages. Speak the translated text, and save
-								important translations to your personal dictionary to
-								learn words even offline.
+								{t(['sections.hero.description'])}
 							</Text>
 
 							<HStack w="100%" className={clsx(styles.ButtonsGroup)}>
@@ -78,7 +84,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 										});
 									}}
 								>
-									Install for Chrome
+									{t('install.chrome')}
 								</Button>
 								<Button
 									leftIcon={
@@ -99,7 +105,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 										});
 									}}
 								>
-									Install for Firefox
+									{t('install.firefox')}
 								</Button>
 							</HStack>
 						</VStack>
@@ -129,7 +135,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 				>
 					<VStack w="100%" alignItems="start" spacing="2rem">
 						<Text id="features" as="h2" fontSize={32}>
-							Features
+							{t('features.title')}
 						</Text>
 
 						<VStack w="100%" alignItems="start" spacing="2rem">
@@ -147,17 +153,10 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Offline translation and privacy
+										{t('features.items.offlineTranslation.title')}
 									</Text>
 									<Text variant="description">
-										Linguist can translate texts even without the
-										internet - a feature that no other extension has.
-										The offline translator allows you to translate
-										texts on your device without sending any private
-										messages over the internet, ensuring your privacy.
-										Simply enable the feature on the options page to
-										maintain your privacy while translating work
-										emails and personal messages.
+										{t('features.items.offlineTranslation.content')}
 									</Text>
 								</VStack>
 							</HStack>
@@ -178,15 +177,10 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Full page translation
+										{t('features.items.fullPageTranslation.title')}
 									</Text>
 									<Text variant="description">
-										Fast and high quality whole page translation in
-										one click, even for a private pages that need
-										login. Flexible configuration for auto translation
-										based on domain name and languages. Translation is
-										available by hotkey. You may see an original text
-										by hover on it.
+										{t('features.items.fullPageTranslation.content')}
 									</Text>
 								</VStack>
 							</HStack>
@@ -209,14 +203,14 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Translation for selected text
+										{t(
+											'features.items.selectedTextTranslation.title',
+										)}
 									</Text>
 									<Text variant="description">
-										Encountering unfamiliar words while reading an
-										online article? Just select text on the page and
-										click the button to translate it. You can speak
-										the translated and original text, and save the
-										translation to your dictionary.
+										{t(
+											'features.items.selectedTextTranslation.content',
+										)}
 									</Text>
 								</VStack>
 							</HStack>
@@ -237,12 +231,10 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Text translation always at hand
+										{t('features.items.textTranslation.title')}
 									</Text>
 									<Text variant="description">
-										If you need to translate any text - just click the
-										Linguist button to open the pop-up window. No more
-										tabs with translation services, just use Linguist.
+										{t('features.items.textTranslation.content')}
 									</Text>
 								</VStack>
 							</HStack>
@@ -261,18 +253,10 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Make your own personal knowledge base
+										{t('features.items.knowledgeBase.title')}
 									</Text>
 									<Text variant="description">
-										Any translated text is saved in the history, and
-										you can add your favorite translations to your
-										dictionary. You can search for translations in
-										both your dictionary and history, and even filter
-										your translations by language. The dictionary
-										feature is available even when you are offline,
-										making it an ideal tool for language learners or
-										travelers who require constant access to their
-										word lists.
+										{t('features.items.knowledgeBase.content')}
 									</Text>
 								</VStack>
 							</HStack>
@@ -293,20 +277,15 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									spacing={6}
 								>
 									<Text as="h2" fontSize={26}>
-										Custom translators
+										{t('features.items.customTranslators.title')}
 									</Text>
 									<Text variant="description">
-										Unlike other browser extensions, Linguist is not
-										just a wrapper over the Google Translator Widget;
-										it's a complete and independent translation
-										system. If you are not satisfied with embedded
-										translators, you may use Linguist with your
-										favorite translation service, just by add a custom
-										translator. Read more about in{' '}
-										<Link href="https://github.com/translate-tools/linguist/blob/master/docs/CustomTranslator.md">
-											docs
-										</Link>
-										.
+										<Trans
+											i18nKey="features.items.customTranslators.content"
+											components={[
+												<Link href="https://github.com/translate-tools/linguist/blob/master/docs/CustomTranslator.md" />,
+											]}
+										/>
 									</Text>
 								</VStack>
 							</HStack>
@@ -315,39 +294,35 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 
 					<VStack w="100%" alignItems="start" spacing="2rem">
 						<Text as="h2" fontSize={32}>
-							Open source
+							{t('sections.opensource.title')}
 						</Text>
 
 						<Text variant="description">
-							Linguist is completely free,{' '}
-							<Link href="https://github.com/translate-tools/linguist">
-								open-source
-							</Link>
-							, and it does not collect any user data to sell. You may{' '}
-							<Link href="https://github.com/translate-tools/linguist#donations">
-								support the project
-							</Link>{' '}
-							with your donations to help Linguist maintain its independence
-							and high quality. Share Linguist with your friends, to make it
-							popular together!
+							<Trans
+								i18nKey="sections.opensource.content"
+								components={[
+									<Link href="https://github.com/translate-tools/linguist" />,
+									<Link href="https://github.com/translate-tools/linguist#donations" />,
+								]}
+							/>
 						</Text>
 					</VStack>
 
 					<VStack w="100%" alignItems="start" spacing="2rem">
 						<Text as="h2" fontSize={32}>
-							Support
+							{t('sections.support.title')}
 						</Text>
 
 						<Text variant="description">
-							For support contact{' '}
-							<Link href="mailto:support@linguister.io">
-								support@linguister.io
-							</Link>
-							. If you have bug -{' '}
-							<Link href="https://github.com/translate-tools/linguist/issues/new/choose">
-								create issue
-							</Link>{' '}
-							on GitHub.
+							<Trans
+								i18nKey="sections.support.content"
+								components={[
+									<Link href="mailto:support@linguister.io">
+										support@linguister.io
+									</Link>,
+									<Link href="https://github.com/translate-tools/linguist/issues/new/choose" />,
+								]}
+							/>
 						</Text>
 					</VStack>
 				</VStack>
@@ -361,7 +336,12 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 				}}
 			>
 				<Text>
-					Created by <Link href="https://fluidminds.org">FluidMinds team</Link>.
+					<Trans
+						i18nKey="sections.createdBy.content"
+						components={[
+							<Link href="https://fluidminds.org">FluidMinds team</Link>,
+						]}
+					/>
 				</Text>
 			</HStack>
 		</VStack>
diff --git a/site/src/components/Landing/i18n.ts b/site/src/components/Landing/i18n.ts
new file mode 100644
index 00000000..0ee7a96a
--- /dev/null
+++ b/site/src/components/Landing/i18n.ts
@@ -0,0 +1,118 @@
+import { initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+	en: {
+		translation: {
+			navigation: {
+				features: {
+					content: 'Features',
+				},
+				github: {
+					content: 'GitHub',
+				},
+			},
+			install: {
+				chrome: 'Install for Chrome',
+				firefox: 'Install for Firefox',
+			},
+			sections: {
+				hero: {
+					title: 'Linguist is a privacy‑focused, full‑featured translation solution.',
+					description:
+						'Translate web pages, highlighted text, Netflix subtitles, and private messages. Speak the translated text and save important translations to your personal dictionary to learn words even offline.',
+					// "title": "",
+				},
+				opensource: {
+					title: 'Open source',
+					content: `Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell. You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!`,
+				},
+				support: {
+					title: 'Support',
+					content: `For support contact <0/>. If you have bug - <1>create issue</1> on GitHub.`,
+				},
+				createdBy: {
+					content: `Created by <0/>.`,
+				},
+			},
+			features: {
+				title: 'Features',
+				items: {
+					offlineTranslation: {
+						title: 'Offline translation and privacy',
+						content: `Linguist can translate texts even without the
+						internet - a feature that no other extension has.
+						The offline translator allows you to translate
+						texts on your device without sending any private
+						messages over the internet, ensuring your privacy.
+						Simply enable the feature on the options page to
+						maintain your privacy while translating work
+						emails and personal messages.`,
+					},
+					fullPageTranslation: {
+						title: 'Full page translation',
+						content: `Fast and high quality whole page translation in
+						one click, even for a private pages that need
+						login. Flexible configuration for auto translation
+						based on domain name and languages. Translation is
+						available by hotkey. You may see an original text
+						by hover on it.`,
+					},
+					selectedTextTranslation: {
+						title: 'Translation for selected text',
+						content: `Encountering unfamiliar words while reading an
+						online article? Just select text on the page and
+						click the button to translate it. You can speak
+						the translated and original text, and save the
+						translation to your dictionary.`,
+					},
+					textTranslation: {
+						title: 'Text translation always at hand',
+						content: `If you need to translate any text - just click the
+						Linguist button to open the pop-up window. No more
+						tabs with translation services, just use Linguist.`,
+					},
+					knowledgeBase: {
+						title: 'Make your own personal knowledge base',
+						content: `Any translated text is saved in the history, and
+						you can add your favorite translations to your
+						dictionary. You can search for translations in
+						both your dictionary and history, and even filter
+						your translations by language. The dictionary
+						feature is available even when you are offline,
+						making it an ideal tool for language learners or
+						travelers who require constant access to their
+						word lists.`,
+					},
+					customTranslators: {
+						title: 'Custom translators',
+						content: `Unlike other browser extensions, Linguist is not
+						just a wrapper over the Google Translator Widget;
+						it's a complete and independent translation
+						system. If you are not satisfied with embedded
+						translators, you may use Linguist with your
+						favorite translation service, just by add a custom
+						translator. Read more about in <0>docs</0>.`,
+					},
+				},
+			},
+		},
+	},
+};
+
+i18n.use(initReactI18next) // passes i18n down to react-i18next
+	.init({
+		resources,
+		lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+		// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+		// if you're using a language detector, do not define the lng option
+
+		interpolation: {
+			escapeValue: false, // react already safes from xss
+		},
+	});
+
+export default i18n;

From 51a944a2bb673939de6d1b56aef4dd1dbfe53c21 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 22:11:33 +0200
Subject: [PATCH 07/11] refactor: move texts to json file

---
 site/src/components/Landing/i18n.ts         | 97 +--------------------
 site/src/components/Landing/locales/en.json | 60 +++++++++++++
 2 files changed, 63 insertions(+), 94 deletions(-)
 create mode 100644 site/src/components/Landing/locales/en.json

diff --git a/site/src/components/Landing/i18n.ts b/site/src/components/Landing/i18n.ts
index 0ee7a96a..befcfd67 100644
--- a/site/src/components/Landing/i18n.ts
+++ b/site/src/components/Landing/i18n.ts
@@ -1,105 +1,14 @@
 import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 
+import enLocale from './locales/en.json';
+
 // the translations
 // (tip move them in a JSON file and import them,
 // or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
 const resources = {
 	en: {
-		translation: {
-			navigation: {
-				features: {
-					content: 'Features',
-				},
-				github: {
-					content: 'GitHub',
-				},
-			},
-			install: {
-				chrome: 'Install for Chrome',
-				firefox: 'Install for Firefox',
-			},
-			sections: {
-				hero: {
-					title: 'Linguist is a privacy‑focused, full‑featured translation solution.',
-					description:
-						'Translate web pages, highlighted text, Netflix subtitles, and private messages. Speak the translated text and save important translations to your personal dictionary to learn words even offline.',
-					// "title": "",
-				},
-				opensource: {
-					title: 'Open source',
-					content: `Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell. You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!`,
-				},
-				support: {
-					title: 'Support',
-					content: `For support contact <0/>. If you have bug - <1>create issue</1> on GitHub.`,
-				},
-				createdBy: {
-					content: `Created by <0/>.`,
-				},
-			},
-			features: {
-				title: 'Features',
-				items: {
-					offlineTranslation: {
-						title: 'Offline translation and privacy',
-						content: `Linguist can translate texts even without the
-						internet - a feature that no other extension has.
-						The offline translator allows you to translate
-						texts on your device without sending any private
-						messages over the internet, ensuring your privacy.
-						Simply enable the feature on the options page to
-						maintain your privacy while translating work
-						emails and personal messages.`,
-					},
-					fullPageTranslation: {
-						title: 'Full page translation',
-						content: `Fast and high quality whole page translation in
-						one click, even for a private pages that need
-						login. Flexible configuration for auto translation
-						based on domain name and languages. Translation is
-						available by hotkey. You may see an original text
-						by hover on it.`,
-					},
-					selectedTextTranslation: {
-						title: 'Translation for selected text',
-						content: `Encountering unfamiliar words while reading an
-						online article? Just select text on the page and
-						click the button to translate it. You can speak
-						the translated and original text, and save the
-						translation to your dictionary.`,
-					},
-					textTranslation: {
-						title: 'Text translation always at hand',
-						content: `If you need to translate any text - just click the
-						Linguist button to open the pop-up window. No more
-						tabs with translation services, just use Linguist.`,
-					},
-					knowledgeBase: {
-						title: 'Make your own personal knowledge base',
-						content: `Any translated text is saved in the history, and
-						you can add your favorite translations to your
-						dictionary. You can search for translations in
-						both your dictionary and history, and even filter
-						your translations by language. The dictionary
-						feature is available even when you are offline,
-						making it an ideal tool for language learners or
-						travelers who require constant access to their
-						word lists.`,
-					},
-					customTranslators: {
-						title: 'Custom translators',
-						content: `Unlike other browser extensions, Linguist is not
-						just a wrapper over the Google Translator Widget;
-						it's a complete and independent translation
-						system. If you are not satisfied with embedded
-						translators, you may use Linguist with your
-						favorite translation service, just by add a custom
-						translator. Read more about in <0>docs</0>.`,
-					},
-				},
-			},
-		},
+		translation: enLocale,
 	},
 };
 
diff --git a/site/src/components/Landing/locales/en.json b/site/src/components/Landing/locales/en.json
new file mode 100644
index 00000000..9c82e26b
--- /dev/null
+++ b/site/src/components/Landing/locales/en.json
@@ -0,0 +1,60 @@
+{
+	"navigation": {
+		"features": {
+			"content": "Features"
+		},
+		"github": {
+			"content": "GitHub"
+		}
+	},
+	"install": {
+		"chrome": "Install for Chrome",
+		"firefox": "Install for Firefox"
+	},
+	"sections": {
+		"hero": {
+			"title": "Linguist is a privacy‑focused, full‑featured translation solution.",
+			"description": "Translate web pages, highlighted text, Netflix subtitles, and private messages. Speak the translated text and save important translations to your personal dictionary to learn words even offline."
+		},
+		"opensource": {
+			"title": "Open source",
+			"content": "Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell. You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!"
+		},
+		"support": {
+			"title": "Support",
+			"content": "For support contact <0/>. If you have bug - <1>create issue</1> on GitHub."
+		},
+		"createdBy": {
+			"content": "Created by <0/>."
+		}
+	},
+	"features": {
+		"title": "Features",
+		"items": {
+			"offlineTranslation": {
+				"title": "Offline translation and privacy",
+				"content": "Linguist can translate texts even without the internet - a feature that no other extension has. The offline translator allows you to translate texts on your device without sending any private messages over the internet, ensuring your privacy. Simply enable the feature on the options page to maintain your privacy while translating work emails and personal messages."
+			},
+			"fullPageTranslation": {
+				"title": "Full page translation",
+				"content": "Fast and high quality whole page translation in one click, even for a private pages that need login. Flexible configuration for auto translation based on domain name and languages. Translation is available by hotkey. You may see an original text by hover on it."
+			},
+			"selectedTextTranslation": {
+				"title": "Translation for selected text",
+				"content": "Encountering unfamiliar words while reading an online article? Just select text on the page and click the button to translate it. You can speak the translated and original text, and save the translation to your dictionary."
+			},
+			"textTranslation": {
+				"title": "Text translation always at hand",
+				"content": "If you need to translate any text - just click the Linguist button to open the pop-up window. No more tabs with translation services, just use Linguist."
+			},
+			"knowledgeBase": {
+				"title": "Make your own personal knowledge base",
+				"content": "Any translated text is saved in the history, and you can add your favorite translations to your dictionary. You can search for translations in both your dictionary and history, and even filter your translations by language. The dictionary feature is available even when you are offline, making it an ideal tool for language learners or travelers who require constant access to their word lists."
+			},
+			"customTranslators": {
+				"title": "Custom translators",
+				"content": "Unlike other browser extensions, Linguist is not just a wrapper over the Google Translator Widget; it's a complete and independent translation system. If you are not satisfied with embedded translators, you may use Linguist with your favorite translation service, just by add a custom translator. Read more about in <0>docs</0>."
+			}
+		}
+	}
+}

From 41c3f92e643047817c19d4439c635e0c83ba4177 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 22:13:15 +0200
Subject: [PATCH 08/11] chore: add new lines

---
 site/src/components/Landing/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Landing/locales/en.json b/site/src/components/Landing/locales/en.json
index 9c82e26b..95f0aa0e 100644
--- a/site/src/components/Landing/locales/en.json
+++ b/site/src/components/Landing/locales/en.json
@@ -18,7 +18,7 @@
 		},
 		"opensource": {
 			"title": "Open source",
-			"content": "Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell. You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!"
+			"content": "Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell.<br><br>You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!"
 		},
 		"support": {
 			"title": "Support",

From 614931fbf00f16762d890da4eff131d67894348d Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 22:29:28 +0200
Subject: [PATCH 09/11] refactor: move i18n to a page layout

---
 site/src/components/Landing/Landing.tsx       |  5 +++--
 site/src/components/PageLayout/PageLayout.tsx |  2 ++
 site/src/components/{Landing => }/i18n.ts     | 13 +------------
 3 files changed, 6 insertions(+), 14 deletions(-)
 rename site/src/components/{Landing => }/i18n.ts (66%)

diff --git a/site/src/components/Landing/Landing.tsx b/site/src/components/Landing/Landing.tsx
index 553edfa3..723239c1 100644
--- a/site/src/components/Landing/Landing.tsx
+++ b/site/src/components/Landing/Landing.tsx
@@ -4,14 +4,15 @@ import { clsx } from 'clsx';
 import { Button, HStack, Icon, Image, Link, Text, VStack } from '@chakra-ui/react';
 import { buildPathGetter } from '@site/src/utils/url';
 
-import './i18n';
 import { useAnalyticsContext } from '../Analytics/useAnalyticsContext';
+import enLocale from './locales/en.json';
 import Logo from './logo.svg';
 
 import styles from './Landing.module.css';
 
 export const Landing = ({ baseUrl }: { baseUrl: string }) => {
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation('landing');
+	i18n.addResourceBundle('en', 'landing', enLocale);
 
 	const getUrl = buildPathGetter(baseUrl);
 
diff --git a/site/src/components/PageLayout/PageLayout.tsx b/site/src/components/PageLayout/PageLayout.tsx
index 929dcadd..37b54d95 100644
--- a/site/src/components/PageLayout/PageLayout.tsx
+++ b/site/src/components/PageLayout/PageLayout.tsx
@@ -1,3 +1,5 @@
+import '../i18n';
+
 import React, { FC, PropsWithChildren } from 'react';
 import { ChakraBaseProvider } from '@chakra-ui/react';
 import Head from '@docusaurus/Head';
diff --git a/site/src/components/Landing/i18n.ts b/site/src/components/i18n.ts
similarity index 66%
rename from site/src/components/Landing/i18n.ts
rename to site/src/components/i18n.ts
index befcfd67..90e0e0e6 100644
--- a/site/src/components/Landing/i18n.ts
+++ b/site/src/components/i18n.ts
@@ -1,20 +1,9 @@
 import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 
-import enLocale from './locales/en.json';
-
-// the translations
-// (tip move them in a JSON file and import them,
-// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
-const resources = {
-	en: {
-		translation: enLocale,
-	},
-};
-
+// eslint-disable-next-line import/no-named-as-default-member
 i18n.use(initReactI18next) // passes i18n down to react-i18next
 	.init({
-		resources,
 		lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
 		// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
 		// if you're using a language detector, do not define the lng option

From d883f09e59ae759cc21db15c6fd611a64c20bc2a Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 22:38:27 +0200
Subject: [PATCH 10/11] fix(site): provide t object to Trans

---
 site/src/components/Landing/Landing.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/src/components/Landing/Landing.tsx b/site/src/components/Landing/Landing.tsx
index 723239c1..ddca32fd 100644
--- a/site/src/components/Landing/Landing.tsx
+++ b/site/src/components/Landing/Landing.tsx
@@ -282,6 +282,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 									</Text>
 									<Text variant="description">
 										<Trans
+											t={t}
 											i18nKey="features.items.customTranslators.content"
 											components={[
 												<Link href="https://github.com/translate-tools/linguist/blob/master/docs/CustomTranslator.md" />,
@@ -300,6 +301,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 
 						<Text variant="description">
 							<Trans
+								t={t}
 								i18nKey="sections.opensource.content"
 								components={[
 									<Link href="https://github.com/translate-tools/linguist" />,
@@ -316,6 +318,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 
 						<Text variant="description">
 							<Trans
+								t={t}
 								i18nKey="sections.support.content"
 								components={[
 									<Link href="mailto:support@linguister.io">
@@ -338,6 +341,7 @@ export const Landing = ({ baseUrl }: { baseUrl: string }) => {
 			>
 				<Text>
 					<Trans
+						t={t}
 						i18nKey="sections.createdBy.content"
 						components={[
 							<Link href="https://fluidminds.org">FluidMinds team</Link>,

From 82cc0b924d9e0e0f9e956d9b96d4718b9f65fc81 Mon Sep 17 00:00:00 2001
From: Robert Vitonsky <rob@vitonsky.net>
Date: Mon, 24 Jun 2024 22:59:53 +0200
Subject: [PATCH 11/11] chore: proofread text

---
 site/src/components/Landing/locales/en.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Landing/locales/en.json b/site/src/components/Landing/locales/en.json
index 95f0aa0e..0cbe9288 100644
--- a/site/src/components/Landing/locales/en.json
+++ b/site/src/components/Landing/locales/en.json
@@ -18,7 +18,7 @@
 		},
 		"opensource": {
 			"title": "Open source",
-			"content": "Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell.<br><br>You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends, to make it popular together!"
+			"content": "Linguist is completely free, <0>open-source</0>, and it does not collect any user data to sell.<br><br>You may <1>support the project</1> with your donations to help Linguist maintain its independence and high quality. Share Linguist with your friends to make it popular together!"
 		},
 		"support": {
 			"title": "Support",
@@ -37,15 +37,15 @@
 			},
 			"fullPageTranslation": {
 				"title": "Full page translation",
-				"content": "Fast and high quality whole page translation in one click, even for a private pages that need login. Flexible configuration for auto translation based on domain name and languages. Translation is available by hotkey. You may see an original text by hover on it."
+				"content": "Fast and high-quality whole-page translation in one click, even for private pages that need login. Flexible configuration for auto-translation based on domain name and languages. Translation is available by hotkey. You may see the original text by hovering over it."
 			},
 			"selectedTextTranslation": {
 				"title": "Translation for selected text",
-				"content": "Encountering unfamiliar words while reading an online article? Just select text on the page and click the button to translate it. You can speak the translated and original text, and save the translation to your dictionary."
+				"content": "Encountering unfamiliar words while reading an online article? Just select the text on the page and click the button to translate it. You can speak the translated and original text and save the translation to your dictionary."
 			},
 			"textTranslation": {
 				"title": "Text translation always at hand",
-				"content": "If you need to translate any text - just click the Linguist button to open the pop-up window. No more tabs with translation services, just use Linguist."
+				"content": "If you need to translate any text, just click the Linguist button to open the pop-up window. No more tabs with translation services, just use Linguist."
 			},
 			"knowledgeBase": {
 				"title": "Make your own personal knowledge base",
@@ -53,7 +53,7 @@
 			},
 			"customTranslators": {
 				"title": "Custom translators",
-				"content": "Unlike other browser extensions, Linguist is not just a wrapper over the Google Translator Widget; it's a complete and independent translation system. If you are not satisfied with embedded translators, you may use Linguist with your favorite translation service, just by add a custom translator. Read more about in <0>docs</0>."
+				"content": "Unlike other browser extensions, Linguist is not just a wrapper over the Google Translator Widget; it's a complete and independent translation system. If you are not satisfied with embedded translators, you can use Linguist with your favorite translation service by adding a custom translator. Read more about it in <0>docs</0>."
 			}
 		}
 	}