.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .cache/
 public/
+.env

package-lock.json

@@ -12,6 +12,8 @@
         "gatsby-plugin-sass": "^5.7.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-google-recaptcha": "^3.1.0",
+        "react-simple-captcha": "^9.3.1",
         "sass": "^1.49.7"
       }
     },
@@ -9134,6 +9136,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -12289,6 +12300,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -12484,6 +12508,19 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12502,6 +12539,106 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-simple-captcha": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
+      "integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-html-parser": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/react-simple-captcha/node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/react-simple-captcha/node_modules/domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/react-simple-captcha/node_modules/htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      }
+    },
+    "node_modules/react-simple-captcha/node_modules/react-html-parser": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
+      "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^3.9.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
+      }
+    },
     "node_modules/read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -22182,6 +22319,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -24604,6 +24749,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -24741,6 +24895,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "requires": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -24756,6 +24919,85 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
     },
+    "react-simple-captcha": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/react-simple-captcha/-/react-simple-captcha-9.3.1.tgz",
+      "integrity": "sha512-pQ/WKjXns9ukhjjbaSZhl2P0QygHs50N9hxMmPAiFMh+0xXt2AocvSsEe24LyW/eOzOso+2Ifiuym/TZMyYDsA==",
+      "requires": {
+        "react-html-parser": "^2.0.2"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "domelementtype": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+              "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+            },
+            "entities": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+              "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+        },
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "htmlparser2": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+          "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+          "requires": {
+            "domelementtype": "^1.3.1",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.1.1"
+          }
+        },
+        "react-html-parser": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
+          "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
+          "requires": {
+            "htmlparser2": "^3.9.0"
+          }
+        }
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -19,6 +19,8 @@
     "gatsby-plugin-sass": "^5.7.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-simple-captcha": "^9.3.1",
     "sass": "^1.49.7"
   }
 }

src/pages/index.js

@@ -2,7 +2,89 @@ import * as React from "react"
 import "../styles/general.scss"
 import { content_pl } from "../content/kamil"
 import { content_en } from "../content/kamil"
+import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
 
+const SimpleCaptchaWrapper = ({ onVerified, language }) => {
+  const [error, setError] = React.useState(null);
+
+  let content = {
+    "pl": {
+      "initial_information": "Wprowadź kod z obrazka aby wyświetlić informacje kontaktowe.",
+      "captcha_console_initialization": "Błąd inicjalizacji captcha:",
+      "captcha_ui_initialization": "Nie można załadować captcha",
+      "captcha_console_reload": "Błąd przeładowania captcha:",
+      "captcha_reload_button": "Odśwież kod",
+      "captcha": "Wprowadź kod z obrazka",
+      "button": "Potwierdź",
+      "error": "Nieprawidłowy kod. Spróbuj ponownie.",
+    },
+    "en": {
+      "initial_information": "Please enter the code from the image for display contact information.",
+      "captcha_console_initialization": "Captcha initialization error:",
+      "captcha_ui_initialization": "Cannot load captcha",
+      "captcha_console_reload": "Captcha reload error:",
+      "captcha_reload_button": "Reload code",
+      "captcha": "Enter the code from the image",
+      "button": "Confirm",
+      "error": "Invalid code. Try again.",
+    }
+  }
+
+  React.useEffect(() => {
+    try {
+      loadCaptchaEnginge(6, '#242424', '#a6a6a6');
+    } catch (err) {
+      console.error(content[language].captcha_console_initialization, err);
+      setError(content[language].captcha_ui_initialization);
+    }
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const userCaptchaValue = document.getElementById('user_captcha_input').value;
+    
+    if (validateCaptcha(userCaptchaValue)) {
+      onVerified(true);
+      setError(null);
+    } else {
+      setError(content[language].error);
+      document.getElementById('user_captcha_input').value = "";
+      // Przeładowanie captcha
+      try {
+        loadCaptchaEnginge(6, '#242424', '#a6a6a6');
+      } catch (err) {
+        console.error(content[language].captcha_console_reload, err);
+      }
+    }
+  };
+
+  return (
+    <div className="captcha-container">
+      <div className="captcha-form">
+        <p>
+          {content[language].initial_information}
+        </p>
+        <LoadCanvasTemplate reloadText={content[language].captcha_reload_button} reloadColor="#a6a6a6" />
+        <form onSubmit={handleSubmit}>
+          <input 
+            type="text" 
+            placeholder={content[language].captcha} 
+            id="user_captcha_input"
+            className="captcha-input"
+          />
+          <button type="submit" className="captcha-button">
+            {content[language].button}
+          </button>
+        </form>
+        {error && (
+          <div className="error-message">
+            {error}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
 
 const MiniWorkImage = ({ image }) => {
   return (
@@ -265,56 +347,50 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
 
 
 const SegmentGeneral = ({ segment }) => {
+  const [isVerified, setIsVerified] = React.useState(false);
+
   return (
-    <div
+    <div className="segment_general">
-      className="segment_general"
-      >
       <img
-        src={ segment.image }
+        src={segment.image}
         className="segment_image cover"
+        alt={segment.title}
       />
       <div className="segment_title segment_title_image">
-        { segment.title }
+        {segment.title}
       </div>
+      {!isVerified ? (
+        <SimpleCaptchaWrapper 
+          onVerified={setIsVerified} 
+          language={segment.content_language}
+        />
+      ) : (
         <div className="segment_content_image">
-        {
+          {typeof segment.content === "object" ? (
-          typeof segment.content === "object" ?
+            Object.keys(segment.content).map((key) => (
-            Object.keys(segment.content).map( (key) => {
+              <React.Fragment key={`item_${key}`}>
-                return (
+                <div className="segment_image_item">
-                  <>
+                  {key + ": "}
-                    <div
-                      className="segment_image_item"
-                      key={ "item_" + key }
-                    >
-
-                      { key + ": " }
-
                 </div>
-                    <div
+                <div className="segment_image_item subitem">
-                      className="segment_image_item subitem"
+                  {segment.content[key].includes(".com/") ? (
-                    >
+                    <a href={`https://${segment.content[key]}`}>
-
+                      {segment.content[key]}
-                      {
-                        segment.content[key].includes("git.") ?
-                          <a href={ "https://" + segment.content[key] }>
-                            { segment.content[key] }
                     </a>
-                        :
+                  ) : (
                     segment.content[key]
-                      }
+                  )}
-
                 </div>
-                  </>
+              </React.Fragment>
-                )
+            ))
-              }
+          ) : (
-            )
-          :
             "lol"
-        }
+          )}
         </div>
+      )}
     </div>
-  )
+  );
-}
+};
 
 
 const SegmentRODO = ({ segment }) => {
@@ -331,69 +407,61 @@ const SegmentRODO = ({ segment }) => {
 
 
 const Segment = ({ index, segment }) => {
-
+  const segment_index = "segment_" + index;
-  let segment_index = "segment_" + index
 
   return (
     <div
-      id={ segment_index }
+      id={segment_index}
-      key={ segment_index }
+      key={segment_index}
     >
       {
         segment.type === "generalTitleSegment" ?
-          <>
           <SegmentGeneral
-              segment={ segment }
+            key={`general_${index}`}
+            segment={segment}
           />
-          </>
         :
           segment.type === "titleSegment" ?
-            <>
             <SegmentTitle
-                segment={ segment }
+              key={`title_${index}`}
+              segment={segment}
             />
-            </>
           :
             segment.type === "subSegment" ?
-              <>
               <SegmentListNormal
-                  segment={ segment }
+                key={`normal_${index}`}
-                  tabs={ segment.tabs }
+                segment={segment}
+                tabs={segment.tabs}
               />
-              </>
             :
               segment.type === "workSubSegment" ?
-                <>
                 <SegmentListWork
-                    segment={ segment }
+                  key={`work_${index}`}
-                    tabs={ segment.tabs }
+                  segment={segment}
+                  tabs={segment.tabs}
                 />
-                </>
                 :
                 segment.type === "createBranchSegment" ?
-                    <>
                     <SegmentCreateBranch
-                        segment={ segment }
+                      key={`create_${index}`}
-                        tabs={ segment.tabs }
+                      segment={segment}
+                      tabs={segment.tabs}
                     />
-                  </>
                 :
                   segment.type === "mergeBranchSegment" ?
-                      <>
                       <SegmentMergeBranch
-                          segment={ segment }
+                        key={`merge_${index}`}
-                          tabs={ segment.tabs }
+                        segment={segment}
+                        tabs={segment.tabs}
                       />
-                    </>
                   :
                     segment.type === "RODOSegment" ?
-                      <>
                       <SegmentRODO
-                            segment={ segment }
+                        key={`rodo_${index}`}
+                        segment={segment}
                       />
-                      </>
                     :
-                      <></>
+                      null
       }
     </div>
   )
@@ -401,7 +469,6 @@ const Segment = ({ index, segment }) => {
 
 
 const IndexPage = () => {
-
   let eng_ = "🇬🇧"
   let pol_ = "🇵🇱"
 
@@ -426,20 +493,18 @@ const IndexPage = () => {
           Curriculum Vitae
         </div>
         <div className="language_bar">
-          <div onClick={ e => swap_content(e) }>
+          <div onClick={e => swap_content(e)}>
-            { content_swapper }
+            {content_swapper}
           </div>
         </div>
         {
-          content.map( (value, index) => {
+          content.map((value, index) => (
-              return (
             <Segment
-                  index={ index }
+              key={`segment_${index}`}
-                  segment={ value }
+              index={index}
+              segment={value}
             />
-              )
+          ))
-            }
-          )
         }
       </div>
       <div className="foot">

src/styles/general.scss

@@ -207,3 +207,70 @@ body {
     width: 100%;
     height: 30px;
 }
+
+.captcha-container {
+  float: right;
+  
+  .captcha-form {
+    background-color: $div_background_color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 210px;
+    height: 250px;
+
+    p {
+        text-align: center;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    form {
+      width: 100%;
+      margin-top: 15px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    a {
+      color: $color;
+      cursor: pointer;
+      padding-top: 20px;
+      padding-bottom: 5px;
+      padding-left: 35px;
+      padding-right: 35px;
+    }
+    
+    .captcha-input {
+      width: 170px;
+      padding: 8px;
+      margin-bottom: 10px;
+      border: 1px solid $color;
+      background-color: $background_color;
+      color: $color;
+      font-size: 9pt;
+    }
+    
+    .captcha-button {
+      width: 188px;
+      padding: 8px;
+      background-color: $background_color;
+      color: $color;
+      border: 1px solid $color;
+      cursor: pointer;
+      font-size: 9pt;
+      
+      &:hover {
+        background-color: darken($background_color, 5%);
+      }
+    }
+    
+    .error-message {
+      color: #ff4444;
+      margin-top: 10px;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}