diff --git a/website/next-i18next.config.js b/website/next-i18next.config.js new file mode 100644 index 00000000..7c87a7a4 --- /dev/null +++ b/website/next-i18next.config.js @@ -0,0 +1,6 @@ +module.exports = { + i18n: { + defaultLocale: "en", + locales: ["en"], + }, +}; diff --git a/website/next.config.js b/website/next.config.js index 28da824f..a84ce736 100644 --- a/website/next.config.js +++ b/website/next.config.js @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ +const { i18n } = require("./next-i18next.config"); + const nextConfig = { output: "standalone", reactStrictMode: true, @@ -16,6 +18,7 @@ const nextConfig = { */ // scrollRestoration: true, }, + i18n, }; module.exports = nextConfig; diff --git a/website/package-lock.json b/website/package-lock.json index 1fa3d14d..2875bb42 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -33,6 +33,7 @@ "install": "^0.13.0", "next": "13.0.6", "next-auth": "^4.18.6", + "next-i18next": "^13.0.3", "nodemailer": "^6.8.0", "npm": "^9.2.0", "postcss-focus-visible": "^7.1.0", @@ -40,6 +41,7 @@ "react-dom": "18.2.0", "react-feature-flags": "^1.0.0", "react-hook-form": "^7.42.1", + "react-i18next": "^12.1.4", "react-icons": "^4.7.1", "react-table": "^7.8.0", "sharp": "^0.31.3", @@ -12653,6 +12655,15 @@ "@types/unist": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -12859,8 +12870,7 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "devOptional": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/qs": { "version": "6.9.7", @@ -12872,7 +12882,6 @@ "version": "18.0.26", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz", "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -12891,8 +12900,7 @@ "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "devOptional": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "node_modules/@types/semver": { "version": "7.3.13", @@ -16550,7 +16558,6 @@ "version": "3.27.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz", "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==", - "dev": true, "hasInstallScript": true, "funding": { "type": "opencollective", @@ -21304,6 +21311,14 @@ "node": ">= 12" } }, + "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.2.0", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", @@ -21446,6 +21461,34 @@ "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==", "dev": true }, + "node_modules/i18next": { + "version": "22.4.9", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz", + "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==", + "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" + } + ], + "peer": true, + "dependencies": { + "@babel/runtime": "^7.20.6" + } + }, + "node_modules/i18next-fs-backend": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.1.tgz", + "integrity": "sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -27523,6 +27566,45 @@ } } }, + "node_modules/next-i18next": { + "version": "13.0.3", + "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-13.0.3.tgz", + "integrity": "sha512-7AA8J6WbkxRBtSf1+97LSAE7btxWZHsBIJEJ3FuTSBgYtpRiO5NGjcb8XbNAlz6yGU0TtS+yZE+/Wu83KhIT1Q==", + "funding": [ + { + "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" + }, + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://github.com/belgattitude" + } + ], + "dependencies": { + "@babel/runtime": "^7.20.6", + "@types/hoist-non-react-statics": "^3.3.1", + "core-js": "^3", + "hoist-non-react-statics": "^3.3.2", + "i18next-fs-backend": "^2.1.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "i18next": "^22.0.6", + "next": ">= 12.0.0", + "react": ">= 17.0.2", + "react-i18next": "^12.1.1" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", @@ -32497,6 +32579,27 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-i18next": { + "version": "12.1.4", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.4.tgz", + "integrity": "sha512-XQND7jYtgM7ht5PH3yIZljCRpAMTlH/zmngM9ZjToqa+0BR6xuu8c7QF0WIIOEjcMTB2S3iOfpN/xG/ZrAnO6g==", + "dependencies": { + "@babel/runtime": "^7.20.6", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 19.0.0", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-icons": { "version": "4.7.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", @@ -36507,6 +36610,14 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==", "dev": true }, + "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/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", @@ -46861,6 +46972,15 @@ "@types/unist": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -47053,8 +47173,7 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "devOptional": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/qs": { "version": "6.9.7", @@ -47066,7 +47185,6 @@ "version": "18.0.26", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz", "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==", - "devOptional": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -47085,8 +47203,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "devOptional": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/semver": { "version": "7.3.13", @@ -49959,8 +50076,7 @@ "core-js": { "version": "3.27.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz", - "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==", - "dev": true + "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==" }, "core-js-compat": { "version": "3.27.1", @@ -53680,6 +53796,14 @@ } } }, + "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==", + "requires": { + "void-elements": "3.1.0" + } + }, "html-tags": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", @@ -53780,6 +53904,20 @@ "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==", "dev": true }, + "i18next": { + "version": "22.4.9", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz", + "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==", + "peer": true, + "requires": { + "@babel/runtime": "^7.20.6" + } + }, + "i18next-fs-backend": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.1.tgz", + "integrity": "sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -58397,6 +58535,18 @@ "uuid": "^8.3.2" } }, + "next-i18next": { + "version": "13.0.3", + "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-13.0.3.tgz", + "integrity": "sha512-7AA8J6WbkxRBtSf1+97LSAE7btxWZHsBIJEJ3FuTSBgYtpRiO5NGjcb8XbNAlz6yGU0TtS+yZE+/Wu83KhIT1Q==", + "requires": { + "@babel/runtime": "^7.20.6", + "@types/hoist-non-react-statics": "^3.3.1", + "core-js": "^3", + "hoist-non-react-statics": "^3.3.2", + "i18next-fs-backend": "^2.1.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -61888,6 +62038,15 @@ "integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==", "requires": {} }, + "react-i18next": { + "version": "12.1.4", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.4.tgz", + "integrity": "sha512-XQND7jYtgM7ht5PH3yIZljCRpAMTlH/zmngM9ZjToqa+0BR6xuu8c7QF0WIIOEjcMTB2S3iOfpN/xG/ZrAnO6g==", + "requires": { + "@babel/runtime": "^7.20.6", + "html-parse-stringify": "^3.0.1" + } + }, "react-icons": { "version": "4.7.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", @@ -64969,6 +65128,11 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==", "dev": true }, + "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==" + }, "w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/website/package.json b/website/package.json index 580d0be3..5fd53fa4 100644 --- a/website/package.json +++ b/website/package.json @@ -50,6 +50,7 @@ "install": "^0.13.0", "next": "13.0.6", "next-auth": "^4.18.6", + "next-i18next": "^13.0.3", "nodemailer": "^6.8.0", "npm": "^9.2.0", "postcss-focus-visible": "^7.1.0", @@ -57,6 +58,7 @@ "react-dom": "18.2.0", "react-feature-flags": "^1.0.0", "react-hook-form": "^7.42.1", + "react-i18next": "^12.1.4", "react-icons": "^4.7.1", "react-table": "^7.8.0", "sharp": "^0.31.3", diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json new file mode 100644 index 00000000..0b2df79c --- /dev/null +++ b/website/public/locales/en/common.json @@ -0,0 +1,4 @@ +{ + "discord": "Discord", + "github": "GitHub" +} diff --git a/website/public/locales/en/index.json b/website/public/locales/en/index.json new file mode 100644 index 00000000..3443e444 --- /dev/null +++ b/website/public/locales/en/index.json @@ -0,0 +1,16 @@ +{ + "title": "Open Assistant", + "subtitle": "Conversational AI for everyone.", + "description": "Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world.", + "blurb": "We believe we can create a revolution.", + "blurb1": "In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve the world by providing amazing conversational AI.", + "join_us_title": "Join us", + "join_us_description": "All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us here:", + "faq_title": "Frequently Asked Questions", + "faq_items": { + "q0": "How far along is this project?", + "a0": "We are in the early stages of development, working from established research in applying RLHF to large language models.", + "q1": "Who is behind Open Assistant?", + "a1": "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone." + } +} diff --git a/website/src/components/AnimatedCircles/AnimatedCircles.tsx b/website/src/components/AnimatedCircles/AnimatedCircles.tsx new file mode 100644 index 00000000..6241f7a6 --- /dev/null +++ b/website/src/components/AnimatedCircles/AnimatedCircles.tsx @@ -0,0 +1,52 @@ +import { Box, useColorMode } from "@chakra-ui/react"; +import React, { useId } from "react"; + +export const AnimatedCircles = () => { + const id = useId(); + const { colorMode } = useColorMode(); + const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69"; + const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff"; + + return ( + + + + + ); +}; diff --git a/website/src/components/AnimatedCircles/index.tsx b/website/src/components/AnimatedCircles/index.tsx new file mode 100644 index 00000000..a5ca582a --- /dev/null +++ b/website/src/components/AnimatedCircles/index.tsx @@ -0,0 +1 @@ +export { AnimatedCircles } from "./AnimatedCircles"; diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx index 8a07373f..e374a471 100644 --- a/website/src/components/CallToAction.tsx +++ b/website/src/components/CallToAction.tsx @@ -1,9 +1,14 @@ -import { useColorMode } from "@chakra-ui/react"; +import { Box, Link, Text, useColorMode } from "@chakra-ui/react"; +import { useTranslation } from "next-i18next"; import { useId } from "react"; +import { FaDiscord, FaGithub } from "react-icons/fa"; import { Container } from "./Container"; -function CircleBackground({ width = 558, height = 558, ...props }) { +const CIRCLE_HEIGHT = 558; +const CIRCLE_WIDTH = 558; + +function CircleBackground() { const id = useId(); const { colorMode } = useColorMode(); @@ -11,7 +16,14 @@ function CircleBackground({ width = 558, height = 558, ...props }) { const gradStopColor = colorMode === "light" ? "#fff" : "#000"; return ( -
- -
+ + + + -
-

Join Us

-

- All open source projects begin with people like you. Open source is the belief that if we collaborate we can - together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us - here: -

-
- + + + {t("index:join_us_title")} + + + {t("index:join_us_description")} + + + - - - + + - -
-
+ + + - + ); } diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx index b8e5e8f8..55bb3585 100644 --- a/website/src/components/Faq.tsx +++ b/website/src/components/Faq.tsx @@ -1,73 +1,42 @@ -import { useColorMode } from "@chakra-ui/react"; +import { Box, List, ListItem, Text, useColorMode } from "@chakra-ui/react"; +import { useTranslation } from "next-i18next"; import { Container } from "./Container"; -const faqs = [ - [ - { - question: "How far along is this project?", - answer: - "We are in the early stages of development, working from established research in applying RLHF to large language models.", - }, - ], - [ - { - question: "Who is behind Open Assistant?", - answer: - "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone.", - }, - ], - [ - // { - // question: 'Where can I learn more?', - // answer: - // 'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.', - // }, - ], -]; +const FAQS = Array.from({ length: 2 }); export function Faq() { const { colorMode } = useColorMode(); - + const { t } = useTranslation("index"); const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white"; const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100"; return ( -
+ -
-

- Frequently Asked Questions -

- {/*

- If you have anything else you want to ask,{' '} - - reach out to us - - . -

*/} -
-
    + + {t("faq_title")} + + + - {faqs.map((column, columnIndex) => ( -
  • -
      - {column.map((faq, faqIndex) => ( -
    • -

      {faq.question}

      -

      {faq.answer}

      -
      • - ))} -
    -
    • - ))} -
+ {FAQS.map((_, index) => { + return ( + + + {t(`faq_items.q${index}`)} + + + {t(`faq_items.a${index}`)} + + + ); + })} + -
+ ); } diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx index 65c80a42..4605e9e2 100644 --- a/website/src/components/Hero.tsx +++ b/website/src/components/Hero.tsx @@ -1,87 +1,36 @@ -import { useColorMode } from "@chakra-ui/react"; +import { Box, Text, useColorMode } from "@chakra-ui/react"; import Image from "next/image"; -import { useId } from "react"; +import { useTranslation } from "next-i18next"; import { Container } from "./Container"; - -function BackgroundIllustration(props) { - const id = useId(); - - const { colorMode } = useColorMode(); - const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69"; - const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff"; - - return ( -
- - -
- ); -} +import { AnimatedCircles } from "./AnimatedCircles"; export function Hero() { + const { t } = useTranslation("index"); const { colorMode } = useColorMode(); const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white"; const fancyTextGradientClasses = colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400"; - return ( -
+ -
-
-

Open Assistant

-

+ + + {t("title")} + + - Conversational AI for everyone. -

-

We believe we can create a revolution.

-

- In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve - the world by providing amazing conversational AI. -

-
- -
- -
+ {t("subtitle")} + + {t("blurb")} + {t("blurb1")} + + + + {""} -
-
-
+ + + -
+ ); } diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index 974226da..adadfe56 100644 --- a/website/src/pages/_app.tsx +++ b/website/src/pages/_app.tsx @@ -3,11 +3,13 @@ import "focus-visible"; import type { AppProps } from "next/app"; import { SessionProvider } from "next-auth/react"; +import { appWithTranslation } from "next-i18next"; import { FlagsProvider } from "react-feature-flags"; import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout"; import flags from "src/flags"; import { SWRConfig, SWRConfiguration } from "swr"; +import nextI18NextConfig from "../../next-i18next.config.js"; import { Chakra, getServerSideProps } from "../styles/Chakra"; type AppPropsWithLayout = AppProps & { @@ -34,4 +36,4 @@ function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: App ); } export { getServerSideProps }; -export default MyApp; +export default appWithTranslation(MyApp, nextI18NextConfig); diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 64b1a0d5..8fe5d852 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,6 +1,9 @@ +import { Box } from "@chakra-ui/react"; import Head from "next/head"; import { useRouter } from "next/router"; import { useSession } from "next-auth/react"; +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { useEffect } from "react"; import { CallToAction } from "src/components/CallToAction"; import { Faq } from "src/components/Faq"; @@ -10,6 +13,7 @@ import { getTransparentHeaderLayout } from "src/components/Layout"; const Home = () => { const router = useRouter(); const { status } = useSession(); + const { t } = useTranslation("index"); useEffect(() => { if (status === "authenticated") { router.push("/dashboard"); @@ -19,21 +23,24 @@ const Home = () => { return ( <> - Open Assistant - + {t("title")} + -
+ -
+ ); }; Home.getLayout = getTransparentHeaderLayout; +export const getStaticProps = async ({ locale }) => ({ + props: { + ...(await serverSideTranslations(locale, ["index", "common"])), + }, +}); + export default Home;