add theme config

package-lock.json

@@ -14,11 +14,13 @@
                 "@chakra-ui/react": "^2.4.2",
                 "@emotion/react": "^11.4.1",
                 "@emotion/styled": "^11.3.0",
+                "@fontsource/open-sans": "^5.1.0",
                 "@types/react": "^18.3.12",
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
+                "react-icons": "^5.3.0",
                 "react-router-dom": "^6.27.0"
             },
             "devDependencies": {
@@ -3303,6 +3305,12 @@
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
+        "node_modules/@fontsource/open-sans": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.1.0.tgz",
+            "integrity": "sha512-g+mjF8gWUDwck9DrRCkhmFeEj7fskjtKZJKAQguVzSg93lc6ThakTHMRgs0dZfe5qBbktrV839tDrb4bIDyZSA==",
+            "license": "OFL-1.1"
+        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -9073,6 +9081,15 @@
                 }
             }
         },
+        "node_modules/react-icons": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+            "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9953,6 +9970,7 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
             "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
+            "license": "MIT",
             "engines": {
                 "node": ">= 18.12.0"
             },

package.json

@@ -22,11 +22,13 @@
         "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
+        "@fontsource/open-sans": "^5.1.0",
         "@types/react": "^18.3.12",
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0"
     },
     "devDependencies": {

src/containers/LandingThemeProvider/Fonts.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Global } from '@emotion/react';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/700.css';
+
+const Fonts = () => (
+  <Global
+    styles={`
+      /* open-sans-cyrillic-400-normal */
+      @font-face {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url(./files/open-sans-cyrillic-400-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-400-normal.woff) format('woff');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* open-sans-cyrillic-700-normal */
+      @font-face {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url(./files/open-sans-cyrillic-700-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-700-normal.woff) format('woff');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      `}
+  />
+);
+
+export default Fonts;

src/containers/LandingThemeProvider/LandingThemeProvider.tsx

@@ -0,0 +1,13 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { default as landingTheme } from './theme-config';
+import Fonts from './Fonts';
+
+export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ChakraProvider theme={landingTheme}>
+      <Fonts />
+      {children}
+    </ChakraProvider>
+  );
+};

src/containers/LandingThemeProvider/index.ts

@@ -0,0 +1 @@
+export { LandingThemeProvider } from './LandingThemeProvider';

src/containers/LandingThemeProvider/theme-config.ts

@@ -0,0 +1,42 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const overrides = {
+  colors: {
+    primary: {
+      50: "#F1F8ED",
+      100: "#D9EACC",
+      200: "#C0DDAC",
+      300: "#A8D08B",
+      400: "#8FC26B",
+      500: "#77B54A",
+      600: "#5F913B",
+      700: "#476D2C",
+      800: "#2F481E",
+      900: "#18240F"
+    },
+    secondary: {
+      50: "#E7F7FD",
+      100: "#BCEAFB",
+      200: "#91DCF8",
+      300: "#66CEF5",
+      400: "#3BC1F2",
+      500: "#0FB3F0",
+      600: "#0C8FC0",
+      700: "#096B90",
+      800: "#064860",
+      900: "#032430"
+    }
+  },
+  fonts: {
+    heading: `'Open Sans', sans-serif`,
+  },
+  styles: {
+    global: {
+      body: {
+        bg: 'gray.100'
+      }
+    },
+  },
+};
+
+export default extendTheme(overrides);

src/containers/index.ts

@@ -0,0 +1 @@
+export * from './LandingThemeProvider';