feat(captcha & content): stylize all css's and prepare imporvement of english content stuff

-

.env.example

@@ -1,2 +0,0 @@
-export GATSBY_RECAPTCHA_SITE_KEY=""
-export GATSBY_RECAPTCHA_SECRET_KEY=""

package-lock.json

@@ -13,6 +13,7 @@
         "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"
       }
     },
@@ -12538,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",
@@ -24818,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

@@ -20,6 +20,7 @@
     "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/content/kamil.js

@@ -18,6 +18,7 @@ import WorkSiiLogo from "../images/work_sii_logo.png"
 import WorkInfinidatLogo from "../images/work_infinidat_logo.png"
 import WorkTechemLogo from "../images/work_techem_logo.png"
 import WorkAdobeLogo from "../images/work_adobe_logo_2.png"
+import WorkAptivLogo from "../images/work_aptiv_logo.png"
 
 import InterestsBlockchainLogo from "../images/interests_blockchain_logo.png"
 import InterestsBlenderLogo from "../images/interests_blender_logo.png"
@@ -28,11 +29,12 @@ export const content_pl = [
       type: "generalTitleSegment",
       title: "Kamil Żuk",
       image: MePng,
+      content_language: "pl",
       content: {
         "E-mail": "zukkamil.44@gmail.com",
-        "Github": "git.00x097.com/tbs093a",
+        "Telefon": "+48 570 688 112",
+        "Git": "git.00x097.com/tbs093a",
         "Wykształcenie": "Wyższe / Inżynier",
-        "Miejsce Zamieszkania": "Rzeszów / Polska",
         "Data Urodzenia": "30.06.1997 r.",
       }
     },
@@ -359,12 +361,11 @@ export const content_pl = [
     {
       type: "workSubSegment",
       tabs: 1,
-      title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024",
+      title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
       content: [
-        "Ulepszanie bot'a inwestycyjnego pod automatyczne inwestowanie wyzwalane zewnętrznymi wiadomościami / sygnałami (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)",
         "Konserwacja inrastruktury (Terrafrom / Azure / Hetzner)",
         "Konserwacja infrastruktury mikroserwisowej (Docker / Kubernetes / Helm)",
         "Konserwacja serwerów (Linux)",
@@ -378,6 +379,25 @@ export const content_pl = [
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
     },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025",
+      image: WorkAptivLogo,
+      branchBorderColor: "#000000",
+      mainBorderColor: "#0464a8",
+      content: [
+        "Konserwacja & Ulepszanie pipeline'ów & job'ów (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Automtizacja ręcznych zadań (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Praca z mikroserwisami (Docker / Kubernetes)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#000000",
+      mainBorderColor: "#0464a8",
+    },
     {
       type: "titleSegment",
       title: "Zainteresowania",
@@ -421,11 +441,12 @@ export const content_en = [
       type: "generalTitleSegment",
       title: "Kamil Żuk",
       image: MePng,
+      content_language: "en",
       content: {
         "E-mail": "zukkamil.44@gmail.com",
-        "Github": "git.00x097.com/tbs093a",
+        "Phone": "+48 570 688 112",
+        "Git": "git.00x097.com/tbs093a",
         "Education": "Higher / Engineer",
-        "Place of Residence": "Rzeszów / Poland",
         "Date of Birth": "30.06.1997",
       }
     },
@@ -450,12 +471,36 @@ export const content_en = [
     {
       type: "workSubSegment",
       tabs: 1,
-      title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024",
+      title: "Aptiv PLC - DevOps Engineer & Python Developer - from 11.02.2025",
+      image: WorkAptivLogo,
+      branchBorderColor: "#000000",
+      mainBorderColor: "#0464a8",
+      content: [
+        "Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Automtization of manual tasks (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Work with microservices (Docker / Kubernetes)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#000000",
+      mainBorderColor: "#0464a8",
+    },
+    {
+      type: "createBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#0464a8",
+      mainBorderColor: "#0464a8",
+    },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
       content: [
-        "Improving crypto / stock exchange bot for automatic investment triggered by outside messages / signals (Python / Mexc API / Kucoin API / Telegram API / OpenAI API)",
         "Inrastructure maintenance (Terrafrom / Azure / Hetzner)",
         "Microservices infrastructure maintenance (Docker / Kubernetes / Helm)",
         "Servers maintenance (Linux)",
@@ -672,19 +717,51 @@ export const content_en = [
     },{
       type: "workSubSegment",
       tabs: 0,
-      title: "Programming - Python",
+      title: "Programming",
-      image: "", //SkillsPythonLogo,
+      image: "",
       branchBorderColor: "#ffd748",
       mainBorderColor: null,
       firstElement: true,
+      content: [],
+    },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "Coding & Scripting",
+      image: "",
+      branchBorderColor: "#6d3d00",
+      mainBorderColor: "#ffd748",
       content: [
-        "Django",
+        "Python",
-        "Django REST Framework",
+        "Bash / ZSH / Powershell",
-        "Channels 3.0",
+        "Javascript (Pure JS / ReactJS)",
-        "Celery (Task Manager)",
-        "Asyncio",
       ],
     },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#6d3d00",
+      mainBorderColor: "#ffd748",
+    },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "LLM & Other AI Tools",
+      image: "",
+      branchBorderColor: "#8b0000",
+      mainBorderColor: "#ffd748",
+      content: [
+        "Public LLMs (Claude / Gemini / ChatGPT)",
+        "Local LLMs (Ollama - Bielik AI / DeepSeek)",
+        "Coding Agents (Cursor AI / Copilot)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#8b0000",
+      mainBorderColor: "#ffd748",
+    },
     {
       type: "workSubSegment",
       tabs: 0,
@@ -702,9 +779,11 @@ export const content_en = [
       mainBorderColor: "#2e8cb1",
       content: [
         "Jenkins (CI/CD / Routine Processes Automatization (Job's) / GitOps)",
-        "Ansible (Automatization of servers & dev environments configuration)",
+        "Ansible (Server Configuration Stuffs)",
+        "Terraform / OpenTofu (Infrastructure as Code)",
         "Bash / ZSH (Linux)",
         "Powershell (Windows)",
+        "Python (Cross-Platform)",
       ],
     },
     {
@@ -713,45 +792,6 @@ export const content_en = [
       branchBorderColor: "#4aa720",
       mainBorderColor: "#2e8cb1",
     },
-
-    {
-      type: "workSubSegment",
-      tabs: 1,
-      title: "Containerization",
-      image: "", //SkillsContainersLogo,
-      branchBorderColor: "#00b7ff",
-      mainBorderColor: "#2e8cb1",
-      content: [
-        "Docker",
-        "Docker-Compose (Microservices oriented on single servers or debug purposes)",
-        "MiniKube (Local debugging K8S manifests)",
-        "Kubernetes (Helm / Cert-Manager / Ingress / K9S)",
-      ],
-    },
-    {
-      type: "mergeBranchSegment",
-      tabs: 1,
-      branchBorderColor: "#00b7ff",
-      mainBorderColor: "#2e8cb1",
-    },
-    {
-      type: "workSubSegment",
-      tabs: 1,
-      title: "Configuration",
-      image: "", //SkillsNginxLogo,
-      branchBorderColor: "#d90000",
-      mainBorderColor: "#2e8cb1",
-      content: [
-        "Apache",
-        "Nginx (https-portal)",
-      ],
-    },
-    {
-      type: "mergeBranchSegment",
-      tabs: 1,
-      branchBorderColor: "#d90000",
-      mainBorderColor: "#2e8cb1",
-    },
     {
       type: "workSubSegment",
       tabs: 1,
@@ -763,6 +803,7 @@ export const content_en = [
         "Hetzner",
         "OVH",
         "AWS",
+        "Azure",
       ],
     },
     {
@@ -771,6 +812,49 @@ export const content_en = [
       branchBorderColor: "#f96900",
       mainBorderColor: "#2e8cb1",
     },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "Containerization",
+      image: "", //SkillsContainersLogo,
+      branchBorderColor: "#00b7ff",
+      mainBorderColor: "#2e8cb1",
+      content: [
+        "Docker & Docker-Compose",
+        "Podman",
+        "Kubernetes (Kubespray / Helm / Cert-Manager / Ingress / K9S)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#00b7ff",
+      mainBorderColor: "#2e8cb1",
+    },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "Reliability & Monitoring",
+      image: "",
+      branchBorderColor: "#000000",
+      mainBorderColor: "#2e8cb1",
+      content: [
+        "Grafana",
+        "Prometheus",
+        "ElasticSearch",
+        "Kibana",
+        "Logstash",
+        "New Relic",
+        "Splunk",
+        "Fluent-Bit",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "#000000",
+      mainBorderColor: "#2e8cb1",
+    },
     {
       type: "workSubSegment",
       tabs: 0,

src/pages/index.js

@@ -2,48 +2,86 @@ import * as React from "react"
 import "../styles/general.scss"
 import { content_pl } from "../content/kamil"
 import { content_en } from "../content/kamil"
-import ReCAPTCHA from "react-google-recaptcha"
+import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
 
-// Klucz strony reCAPTCHA
+const SimpleCaptchaWrapper = ({ onVerified, language }) => {
-const RECAPTCHA_SITE_KEY = process.env.GATSBY_RECAPTCHA_SITE_KEY || "YOUR_RECAPTCHA_SITE_KEY";
-
-// Komponent obsługujący reCAPTCHA
-const CaptchaWrapper = ({ onVerified }) => {
   const [error, setError] = React.useState(null);
-  const recaptchaRef = React.useRef(null);
 
-  const handleCaptchaChange = () => {
+  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 {
-      const token = recaptchaRef.current.getValue();
+      loadCaptchaEnginge(6, '#242424', '#a6a6a6');
-      if (token) {
-        onVerified(true);
-        setError(null);
-      }
     } catch (err) {
-      console.error("reCAPTCHA error:", err);
+      console.error(content[language].captcha_console_initialization, err);
-      setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.");
+      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">
-      <ReCAPTCHA
+      <div className="captcha-form">
-        ref={recaptchaRef}
+        <p>
-        sitekey={RECAPTCHA_SITE_KEY}
+          {content[language].initial_information}
-        onChange={handleCaptchaChange}
+        </p>
-        onErrored={() => setError("Wystąpił błąd podczas weryfikacji. Spróbuj ponownie.")}
+        <LoadCanvasTemplate reloadText={content[language].captcha_reload_button} reloadColor="#a6a6a6" />
-        onExpired={() => {
+        <form onSubmit={handleSubmit}>
-          if (recaptchaRef.current) {
+          <input 
-            recaptchaRef.current.reset();
+            type="text" 
-          }
+            placeholder={content[language].captcha} 
-        }}
+            id="user_captcha_input"
-        hl="pl"
+            className="captcha-input"
-      />
+          />
-      {error && (
+          <button type="submit" className="captcha-button">
-        <div className="error-message" role="alert">
+            {content[language].button}
-          {error}
+          </button>
-        </div>
+        </form>
-      )}
+        {error && (
+          <div className="error-message">
+            {error}
+          </div>
+        )}
+      </div>
     </div>
   );
 };
@@ -322,7 +360,10 @@ const SegmentGeneral = ({ segment }) => {
         {segment.title}
       </div>
       {!isVerified ? (
-        <CaptchaWrapper onVerified={setIsVerified} />
+        <SimpleCaptchaWrapper 
+          onVerified={setIsVerified} 
+          language={segment.content_language}
+        />
       ) : (
         <div className="segment_content_image">
           {typeof segment.content === "object" ? (

src/styles/general.scss

@@ -209,17 +209,68 @@ body {
 }
 
 .captcha-container {
-  display: flex;
+  float: right;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 20px 0;
-  padding: 10px;
   
-  .error-message {
+  .captcha-form {
-    color: #ff4444;
+    background-color: $div_background_color;
-    margin-top: 10px;
+    display: flex;
-    font-size: 14px;
+    flex-direction: column;
-    text-align: center;
+    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;
+    }
   }
 }