Mision statement

components/Features/index.tsx

@@ -56,7 +56,7 @@ export function Features() {
           </Flex>
           <Flex>
             <Flex direction={"column"} align={"start"} w={"100%"} px={6}>
-              <Text fontSize="3xl" color="brand.default">
+              <Text fontSize="3xl" color="brand.default" fontFamily={"Kalam"}>
                 Benefity
               </Text>
               <Heading fontSize={"3xl"} mb={6}>

package.json

@@ -13,6 +13,7 @@
     "@chakra-ui/react": "^2.4.3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@next/font": "^13.0.6",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",

pages/index.tsx

@@ -100,6 +100,34 @@ export default function CallToActionWithVideo() {
       >
         <Features />
       </Box>
+      <Container maxW={"6xl"} py={75}>
+        <Flex>
+          <Flex direction="column" width={"50%"}>
+            <Text fontSize="3xl" color="brand.default" fontFamily={"Kalam"}>
+              Misia
+            </Text>
+            <Heading pb={6}>Ciele projektu</Heading>
+            <Text mb={4}>
+              Spájanie ľudí rôznych vekových kategórií prostredníctvom ich
+              záľuby v zbere ovocia a zeleniny a pomoc im zlepšiť ich sociálne
+              väzby.
+            </Text>
+            <Text mb={4}>
+              Cieľom projektu je pomôcť ľuďom nájsť spoločnú záľubu, prepojiť
+              staršiu generáciu s mladšími ľuďmi. Chceme zhromažďovať informácie
+              o lokálnych plodinách a zdieľať ich medzi členmi skupiny a tiež
+              podporiť miestne farmárske komunity.
+            </Text>
+            <Text>
+              Veríme, že tento projekt prinesie radosť a spokojnosť všetkým
+              zúčastneným a pomôže vytvorenie lokálnych komunít.
+            </Text>
+          </Flex>
+          <Flex>
+            <Image src={"/images/misia.png"} alt="Misia projektu" />
+          </Flex>
+        </Flex>
+      </Container>
     </>
   );
 }

styles/globals.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Kalam&display=swap");
+
 html,
 body {
   padding: 0;

styles/theme.js

@@ -15,4 +15,7 @@ const config = {
 export const theme = extendTheme({
   colors,
   config,
+  fonts: {
+    kalam: `'Kalam', sans-serif`,
+  },
 });

yarn.lock

@@ -1043,6 +1043,11 @@
   dependencies:
     glob "7.1.7"
 
+"@next/font@^13.0.6":
+  version "13.0.6"
+  resolved "https://registry.yarnpkg.com/@next/font/-/font-13.0.6.tgz#078f9929f3bae56c37046ebadd45179c57ed9154"
+  integrity sha512-5vxNmvnV0CbYjQGtztD5Axft9C7npKihbQpiFhnDwdb99f9K/QSFfcJqxz0E5QBkf67O2niVGJ5lApJDu78w0w==
+
 "@next/[email protected]":
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.2.tgz#66669b8aab5062f554b8e9905d855679aabf0342"