contact page finished

build/asset-manifest.json

@@ -1,35 +1,38 @@
 {
   "files": {
-    "main.css": "/static/css/main.1e2e7f16.css",
-    "main.js": "/static/js/main.51470174.js",
+    "main.css": "/static/css/main.1d90e141.css",
+    "main.js": "/static/js/main.4e205a44.js",
     "static/media/logo-bg.jpg": "/static/media/logo-bg.1d55df78b7376108f96c.jpg",
     "static/media/logo.jpg": "/static/media/logo.4132ef3815cdd5e7314e.jpg",
-    "static/media/credit.svg": "/static/media/credit.287a7c0a67e2efc5004a44819ab0b1d2.svg",
-    "static/media/password.svg": "/static/media/password.3c81a8eb2e5833ac220cc1eb6ea80f68.svg",
-    "static/media/lang.svg": "/static/media/lang.f22ff42454c87587f79377a48b1248e2.svg",
-    "static/media/card.svg": "/static/media/card.6f83ff39d635861a53f4fb970082231d.svg",
-    "static/media/card-black.svg": "/static/media/card-black.7a81177f3df2bb995ccdc030dc4df70d.svg",
-    "static/media/card-remove.svg": "/static/media/card-remove.82eaef0cd0abb7da28f6da230d159f04.svg",
-    "static/media/clipboard.svg": "/static/media/clipboard.4c980440ec680158cc4369c248835d93.svg",
-    "static/media/clipboard-white.svg": "/static/media/clipboard-white.6b04fc7a38461b507ebc6814b0e95321.svg",
-    "static/media/user.svg": "/static/media/user.1edbaf08b8a73a42744cfa2a9a55d0ff.svg",
-    "static/media/mail.svg": "/static/media/mail.df1df1c997cf97d4c516a00a8bb96f27.svg",
-    "static/media/quit.svg": "/static/media/quit.5a9d2077484ad75d0d50e235791f1134.svg",
-    "static/media/logout.svg": "/static/media/logout.46e9f684d2a22c830e175f03c7604f48.svg",
-    "static/media/add.svg": "/static/media/add.d58e10ed4ce768ca68761ef1e962a4b0.svg",
-    "static/media/home.svg": "/static/media/home.5e7245483ecfda45f6a6b038feb78acf.svg",
-    "static/media/arrow-circle-right.svg": "/static/media/arrow-circle-right.aeb8af24d4566d7bee70783e15c04c18.svg",
-    "static/media/menu.svg": "/static/media/menu.eac193d28aabe4911891f9764e212b36.svg",
+    "static/media/credit.svg": "/static/media/credit.3f35b7dba7e3bfcd9a47cfa9d5e84d89.svg",
+    "static/media/credit-black.svg": "/static/media/credit-black.4419b888afb601aaa0e831c7fc78346c.svg",
+    "static/media/password.svg": "/static/media/password.89287949d8127e2130056d83a49a840a.svg",
+    "static/media/send.svg": "/static/media/send.f414f90ebe751fdd746f62c175bad3e4.svg",
+    "static/media/lang.svg": "/static/media/lang.9c83d98865dc02c5dab82257e781a7ca.svg",
+    "static/media/card.svg": "/static/media/card.5b8500a69577ade7070677f21f932493.svg",
+    "static/media/card-black.svg": "/static/media/card-black.f5a687ff255cc5e8eb5d340a46eeac95.svg",
+    "static/media/card-remove.svg": "/static/media/card-remove.758e194e03133aff9fdce8a82c897876.svg",
+    "static/media/clipboard.svg": "/static/media/clipboard.7dbfb543cb102b7aea41f9c3a79097ad.svg",
+    "static/media/clipboard-white.svg": "/static/media/clipboard-white.e87a7b6ac6d897463bb59294bfb9000c.svg",
+    "static/media/user.svg": "/static/media/user.64294ab04fda1fd7d8d5fce856199b4b.svg",
+    "static/media/mail.svg": "/static/media/mail.975c4670cdc3ff1254b3a7a923944304.svg",
+    "static/media/mail-black.svg": "/static/media/mail-black.dc94c1494611bb6132d841be14fba8f4.svg",
+    "static/media/quit.svg": "/static/media/quit.0bb917315c580e2e549716acf45a5a2f.svg",
+    "static/media/logout.svg": "/static/media/logout.1069379be8b51e5b640fc37a562f5d81.svg",
+    "static/media/add.svg": "/static/media/add.e15101a6c6397fe27db25547c009e44a.svg",
+    "static/media/home.svg": "/static/media/home.9464242eb02e635d8e6503b0ee1684f6.svg",
+    "static/media/arrow-circle-right.svg": "/static/media/arrow-circle-right.adbf3b22efb7dfeb196236ae99c0dd54.svg",
+    "static/media/menu.svg": "/static/media/menu.b17b5216a56a686289d13a890e743e78.svg",
     "index.html": "/index.html",
-    "static/media/user-square.svg": "/static/media/user-square.d8e480e0d0a30f34f74130c8c706f68a.svg",
-    "static/media/arrow-back.svg": "/static/media/arrow-back.7106eb7539d85d1dc7288726f85efeba.svg",
-    "static/media/arrow-gray.svg": "/static/media/arrow-gray.c688e9bf277186332d33431cd6f52c8e.svg",
-    "static/media/arrow-down.svg": "/static/media/arrow-down.dc22eaaf68bd39561e303bcfbddc6a9e.svg",
-    "main.1e2e7f16.css.map": "/static/css/main.1e2e7f16.css.map",
-    "main.51470174.js.map": "/static/js/main.51470174.js.map"
+    "static/media/user-square.svg": "/static/media/user-square.7ae9337c3687b02c896181ac6ea3bacb.svg",
+    "static/media/arrow-back.svg": "/static/media/arrow-back.41c890dde94e9604ab0c4f6d67ffe150.svg",
+    "static/media/arrow-gray.svg": "/static/media/arrow-gray.bee85a4e753d18bce943646c09daa6a3.svg",
+    "static/media/arrow-down.svg": "/static/media/arrow-down.2ec2ec0ddf677f60c1aa23e6d1abdc8d.svg",
+    "main.1d90e141.css.map": "/static/css/main.1d90e141.css.map",
+    "main.4e205a44.js.map": "/static/js/main.4e205a44.js.map"
   },
   "entrypoints": [
-    "static/css/main.1e2e7f16.css",
-    "static/js/main.51470174.js"
+    "static/css/main.1d90e141.css",
+    "static/js/main.4e205a44.js"
   ]
 }

build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>HalkBank</title><script defer="defer" src="/static/js/main.51470174.js"></script><link href="/static/css/main.1e2e7f16.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>HalkBank</title><script defer="defer" src="/static/js/main.4e205a44.js"></script><link href="/static/css/main.1d90e141.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

build/static/media/credit-black.4419b888afb601aaa0e831c7fc78346c.svg

@@ -0,0 +1,7 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.74375 16C2.83975 16 1.27979 14.616 1.27979 12.912V11.28C1.27979 10.952 1.55179 10.68 1.87979 10.68C2.20779 10.68 2.47979 10.952 2.47979 11.28C2.47979 12.28 3.44775 13.032 4.74375 13.032C6.03975 13.032 7.00776 12.28 7.00776 11.28C7.00776 10.952 7.27976 10.68 7.60776 10.68C7.93576 10.68 8.20776 10.952 8.20776 11.28V12.912C8.20776 14.616 6.65575 16 4.74375 16ZM2.68774 13.696C3.03974 14.352 3.83175 14.8 4.74375 14.8C5.65575 14.8 6.44776 14.344 6.79976 13.696C6.23176 14.04 5.52775 14.24 4.74375 14.24C3.95975 14.24 3.25574 14.04 2.68774 13.696Z" fill="#3A3A3A"/>
+<path d="M4.74375 12.04C3.43175 12.04 2.25578 11.44 1.67178 10.488C1.41578 10.072 1.27979 9.58397 1.27979 9.08797C1.27979 8.24797 1.64778 7.46396 2.31978 6.87996C3.61578 5.74396 5.84776 5.744 7.15176 6.872C7.82376 7.464 8.19976 8.24797 8.19976 9.08797C8.19976 9.58397 8.06376 10.072 7.80776 10.488C7.23176 11.44 6.05575 12.04 4.74375 12.04ZM4.74375 7.19998C4.11975 7.19998 3.54377 7.40796 3.11177 7.78396C2.70377 8.13596 2.47979 8.59997 2.47979 9.08797C2.47979 9.36797 2.55175 9.62399 2.69575 9.86399C3.06375 10.472 3.84775 10.848 4.74375 10.848C5.63975 10.848 6.42374 10.472 6.78374 9.872C6.92774 9.64 6.99976 9.37598 6.99976 9.09598C6.99976 8.60798 6.77577 8.14396 6.36777 7.78396C5.94377 7.40796 5.36775 7.19998 4.74375 7.19998Z" fill="#3A3A3A"/>
+<path d="M4.74375 14.24C2.76775 14.24 1.27979 12.968 1.27979 11.288V9.08799C1.27979 7.38399 2.83175 6 4.74375 6C5.64775 6 6.51177 6.31202 7.15977 6.87202C7.83177 7.46402 8.20776 8.24799 8.20776 9.08799V11.288C8.20776 12.968 6.71975 14.24 4.74375 14.24ZM4.74375 7.2C3.49575 7.2 2.47979 8.04799 2.47979 9.08799V11.288C2.47979 12.288 3.44775 13.04 4.74375 13.04C6.03975 13.04 7.00776 12.288 7.00776 11.288V9.08799C7.00776 8.59999 6.78378 8.13598 6.37578 7.77598C5.94378 7.40798 5.36775 7.2 4.74375 7.2Z" fill="#3A3A3A"/>
+<path d="M14.24 9.63995C13.032 9.63995 12.008 8.74396 11.912 7.59196C11.848 6.92796 12.088 6.27997 12.568 5.80797C12.968 5.39197 13.536 5.15997 14.136 5.15997H15.808C16.6 5.18397 17.208 5.80794 17.208 6.57594V8.22399C17.208 8.99199 16.6001 9.61595 15.8321 9.63995H14.24ZM15.784 6.35997H14.144C13.864 6.35997 13.608 6.46397 13.424 6.65597C13.192 6.87997 13.08 7.18395 13.112 7.48795C13.152 8.01595 13.664 8.43995 14.24 8.43995H15.808C15.912 8.43995 16.008 8.34399 16.008 8.22399V6.57594C16.008 6.45594 15.912 6.36797 15.784 6.35997Z" fill="#3A3A3A"/>
+<path d="M11.808 14.8H9.80801C9.48001 14.8 9.20801 14.528 9.20801 14.2C9.20801 13.872 9.48001 13.6 9.80801 13.6H11.808C13.872 13.6 15.208 12.264 15.208 10.2V9.63999H14.24C13.032 9.63999 12.008 8.74399 11.912 7.59199C11.848 6.92799 12.088 6.28001 12.568 5.80801C12.968 5.39201 13.536 5.16001 14.136 5.16001H15.2V4.6C15.2 2.728 14.104 1.43998 12.328 1.23198C12.136 1.19998 11.968 1.2 11.8 1.2H4.6C4.408 1.2 4.22399 1.21599 4.03999 1.23999C2.27999 1.46399 1.2 2.744 1.2 4.6V6.2C1.2 6.528 0.928 6.8 0.6 6.8C0.272 6.8 0 6.528 0 6.2V4.6C0 2.136 1.52003 0.352006 3.88003 0.0560059C4.09603 0.0240059 4.344 0 4.6 0H11.8C11.992 0 12.24 0.00799805 12.496 0.047998C14.856 0.319998 16.4 2.112 16.4 4.6V5.76001C16.4 6.08801 16.128 6.36001 15.8 6.36001H14.136C13.856 6.36001 13.6 6.46401 13.416 6.65601C13.184 6.88001 13.072 7.18399 13.104 7.48799C13.144 8.01599 13.656 8.43999 14.232 8.43999H15.808C16.136 8.43999 16.408 8.71199 16.408 9.03999V10.2C16.408 12.952 14.56 14.8 11.808 14.8Z" fill="#3A3A3A"/>
+</svg>

build/static/media/mail-black.dc94c1494611bb6132d841be14fba8f4.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.186 16H4.81395C4.4707 16 4.18605 15.7059 4.18605 15.3514C4.18605 14.9968 4.4707 14.7027 4.81395 14.7027H13.186C15.5805 14.7027 16.7442 13.5005 16.7442 11.027V4.97297C16.7442 2.49946 15.5805 1.2973 13.186 1.2973H4.81395C2.41953 1.2973 1.25581 2.49946 1.25581 4.97297C1.25581 5.32757 0.971163 5.62162 0.627907 5.62162C0.284651 5.62162 0 5.32757 0 4.97297C0 1.81622 1.75814 0 4.81395 0H13.186C16.2419 0 18 1.81622 18 4.97297V11.027C18 14.1838 16.2419 16 13.186 16Z" fill="#3A3A3A"/>
+<path d="M8.99981 8.75242C8.29656 8.75242 7.58493 8.52756 7.04075 8.06918L4.42028 5.90702C4.15237 5.68216 4.10214 5.27567 4.31982 4.99891C4.53749 4.72215 4.93097 4.67027 5.19888 4.89513L7.81935 7.05729C8.45563 7.58486 9.53562 7.58486 10.1719 7.05729L12.7924 4.89513C13.0603 4.67027 13.4621 4.71351 13.6714 4.99891C13.8891 5.27567 13.8472 5.69081 13.571 5.90702L10.9505 8.06918C10.4147 8.52756 9.70307 8.75242 8.99981 8.75242Z" fill="#3A3A3A"/>
+<path d="M5.65116 12.5405H0.627907C0.284651 12.5405 0 12.2465 0 11.8919C0 11.5373 0.284651 11.2432 0.627907 11.2432H5.65116C5.99442 11.2432 6.27907 11.5373 6.27907 11.8919C6.27907 12.2465 5.99442 12.5405 5.65116 12.5405Z" fill="#3A3A3A"/>
+<path d="M3.13954 9.08105H0.627907C0.284651 9.08105 0 8.787 0 8.4324C0 8.07781 0.284651 7.78375 0.627907 7.78375H3.13954C3.48279 7.78375 3.76744 8.07781 3.76744 8.4324C3.76744 8.787 3.48279 9.08105 3.13954 9.08105Z" fill="#3A3A3A"/>
+</svg>

build/static/media/send.f414f90ebe751fdd746f62c175bad3e4.svg

@@ -0,0 +1,7 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49215 5.58068C7.17709 5.58068 6.91582 5.32764 6.91582 5.0225V1.90415L6.36254 2.44C6.1397 2.65583 5.77084 2.65583 5.548 2.44C5.32515 2.22417 5.32515 1.86694 5.548 1.65111L7.08488 0.162634C7.24625 0.00634382 7.49984 -0.0457528 7.715 0.0435556C7.93017 0.125422 8.06849 0.333808 8.06849 0.557079V5.0225C8.06849 5.32764 7.80722 5.58068 7.49215 5.58068Z" fill="white"/>
+<path d="M9.02926 2.60373C8.88326 2.60373 8.73726 2.55163 8.62199 2.44L7.08511 0.951525C6.86226 0.735697 6.86226 0.378463 7.08511 0.162634C7.30795 -0.0531942 7.67681 -0.0531942 7.89965 0.162634L9.43654 1.65111C9.65939 1.86694 9.65939 2.22417 9.43654 2.44C9.32127 2.55163 9.17527 2.60373 9.02926 2.60373Z" fill="white"/>
+<path d="M10.5661 16H4.41855C0 16 0 13.7301 0 11.7206V10.9764C0 9.31675 0 7.44128 3.6501 7.44128C4.56455 7.44128 4.90266 7.65711 5.3791 7.99946C5.40215 8.02178 5.43289 8.03667 5.45594 8.06644L6.23975 8.87021C6.90061 9.54747 8.09939 9.54747 8.76025 8.87021L9.54406 8.06644C9.56711 8.04411 9.59016 8.02178 9.6209 7.99946C10.0973 7.64966 10.4355 7.44128 11.3499 7.44128C15 7.44128 15 9.31675 15 10.9764V11.7206C14.9846 14.5636 13.5015 16 10.5661 16ZM3.6501 8.55763C1.15266 8.55763 1.15266 9.31675 1.15266 10.9764V11.7206C1.15266 13.7598 1.15266 14.8836 4.41855 14.8836H10.5661C12.856 14.8836 13.832 13.9385 13.832 11.7206V10.9764C13.832 9.31675 13.832 8.55763 11.3345 8.55763C10.7812 8.55763 10.666 8.62461 10.3356 8.86277L9.59016 9.62933C9.03689 10.195 8.2915 10.5075 7.49232 10.5075C6.69314 10.5075 5.94775 10.195 5.39447 9.62933L4.64908 8.86277C4.31865 8.62461 4.20338 8.55763 3.6501 8.55763Z" fill="white"/>
+<path d="M2.11344 8.55763C1.79838 8.55763 1.53711 8.30459 1.53711 7.99945V6.51098C1.53711 5.06716 1.53711 3.27355 4.36498 3.01307C4.67235 2.97585 4.96436 3.20657 4.9951 3.51915C5.02584 3.82428 4.79531 4.09965 4.47256 4.12942C2.68977 4.28571 2.68977 4.98529 2.68977 6.51098V7.99945C2.68977 8.30459 2.4285 8.55763 2.11344 8.55763Z" fill="white"/>
+<path d="M12.8709 8.55763C12.5558 8.55763 12.2945 8.30459 12.2945 7.99945V6.51098C12.2945 4.9853 12.2945 4.28571 10.5117 4.12198C10.1967 4.09221 9.96615 3.81684 9.99689 3.51171C10.0276 3.20657 10.3043 2.97586 10.627 3.01307C13.4549 3.27355 13.4549 5.06716 13.4549 6.51098V7.99945C13.4472 8.30459 13.1859 8.55763 12.8709 8.55763Z" fill="white"/>
+</svg>

src/App.js

@@ -5,10 +5,11 @@ import { Routes, Route } from "react-router-dom";
 // IMPORT STYLES
 import "./styles/style.scss";
 
-// IMPORT PAGES
+// IMPORT INNER PAGES
 import Base from "./pages/Base";
 import Cards from "./pages/Cards";
 import Credits from "./pages/Credits";
+import ContactUs from "./pages/ContactUs";
 
 // IMPORT PAGES
 import Main from "./pages/Main";
@@ -26,6 +27,7 @@ const App = () => {
         <Route path="/home" element={<Home ChildEl={Base} />} />
         <Route path="/home/cards" element={<Home ChildEl={Cards} />} />
         <Route path="/home/credits" element={<Home ChildEl={Credits} />} />
+        <Route path="/home/contact-us" element={<Home ChildEl={ContactUs} />} />
       </Routes>
     </div>
   );

src/components/global/CustomSelect.js

@@ -5,6 +5,7 @@ import React, { useState, useRef, useEffect } from "react";
 import arrow from "../../icons/arrow-gray.svg";
 
 const CustomSelect = ({
+  placeholder,
   blockName,
   elName,
   customId,
@@ -33,7 +34,7 @@ const CustomSelect = ({
   return (
     <div className="custom-select">
       <input
-        placeholder={items ? items[0] : ""}
+        placeholder={placeholder ? placeholder : items ? items[0] : ""}
         name={name ? name : ""}
         required
         ref={inner1}

src/components/global/Side.js

@@ -20,6 +20,8 @@ const Side = ({ sideOpen }) => {
       setLinkStage(1);
     } else if (location.includes("credits")) {
       setLinkStage(2);
+    } else if (location.includes("contact-us")) {
+      setLinkStage(3);
     }
   }, []);
   return (
@@ -62,7 +64,7 @@ const Side = ({ sideOpen }) => {
                 setLinkStage(3);
               }}
             >
-              <Link to="">
+              <Link to="/home/contact-us">
                 <div className="link-img">
                   <img src={mail} alt="link" />
                 </div>

src/icons/credit-black.svg

@@ -0,0 +1,7 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.74375 16C2.83975 16 1.27979 14.616 1.27979 12.912V11.28C1.27979 10.952 1.55179 10.68 1.87979 10.68C2.20779 10.68 2.47979 10.952 2.47979 11.28C2.47979 12.28 3.44775 13.032 4.74375 13.032C6.03975 13.032 7.00776 12.28 7.00776 11.28C7.00776 10.952 7.27976 10.68 7.60776 10.68C7.93576 10.68 8.20776 10.952 8.20776 11.28V12.912C8.20776 14.616 6.65575 16 4.74375 16ZM2.68774 13.696C3.03974 14.352 3.83175 14.8 4.74375 14.8C5.65575 14.8 6.44776 14.344 6.79976 13.696C6.23176 14.04 5.52775 14.24 4.74375 14.24C3.95975 14.24 3.25574 14.04 2.68774 13.696Z" fill="#3A3A3A"/>
+<path d="M4.74375 12.04C3.43175 12.04 2.25578 11.44 1.67178 10.488C1.41578 10.072 1.27979 9.58397 1.27979 9.08797C1.27979 8.24797 1.64778 7.46396 2.31978 6.87996C3.61578 5.74396 5.84776 5.744 7.15176 6.872C7.82376 7.464 8.19976 8.24797 8.19976 9.08797C8.19976 9.58397 8.06376 10.072 7.80776 10.488C7.23176 11.44 6.05575 12.04 4.74375 12.04ZM4.74375 7.19998C4.11975 7.19998 3.54377 7.40796 3.11177 7.78396C2.70377 8.13596 2.47979 8.59997 2.47979 9.08797C2.47979 9.36797 2.55175 9.62399 2.69575 9.86399C3.06375 10.472 3.84775 10.848 4.74375 10.848C5.63975 10.848 6.42374 10.472 6.78374 9.872C6.92774 9.64 6.99976 9.37598 6.99976 9.09598C6.99976 8.60798 6.77577 8.14396 6.36777 7.78396C5.94377 7.40796 5.36775 7.19998 4.74375 7.19998Z" fill="#3A3A3A"/>
+<path d="M4.74375 14.24C2.76775 14.24 1.27979 12.968 1.27979 11.288V9.08799C1.27979 7.38399 2.83175 6 4.74375 6C5.64775 6 6.51177 6.31202 7.15977 6.87202C7.83177 7.46402 8.20776 8.24799 8.20776 9.08799V11.288C8.20776 12.968 6.71975 14.24 4.74375 14.24ZM4.74375 7.2C3.49575 7.2 2.47979 8.04799 2.47979 9.08799V11.288C2.47979 12.288 3.44775 13.04 4.74375 13.04C6.03975 13.04 7.00776 12.288 7.00776 11.288V9.08799C7.00776 8.59999 6.78378 8.13598 6.37578 7.77598C5.94378 7.40798 5.36775 7.2 4.74375 7.2Z" fill="#3A3A3A"/>
+<path d="M14.24 9.63995C13.032 9.63995 12.008 8.74396 11.912 7.59196C11.848 6.92796 12.088 6.27997 12.568 5.80797C12.968 5.39197 13.536 5.15997 14.136 5.15997H15.808C16.6 5.18397 17.208 5.80794 17.208 6.57594V8.22399C17.208 8.99199 16.6001 9.61595 15.8321 9.63995H14.24ZM15.784 6.35997H14.144C13.864 6.35997 13.608 6.46397 13.424 6.65597C13.192 6.87997 13.08 7.18395 13.112 7.48795C13.152 8.01595 13.664 8.43995 14.24 8.43995H15.808C15.912 8.43995 16.008 8.34399 16.008 8.22399V6.57594C16.008 6.45594 15.912 6.36797 15.784 6.35997Z" fill="#3A3A3A"/>
+<path d="M11.808 14.8H9.80801C9.48001 14.8 9.20801 14.528 9.20801 14.2C9.20801 13.872 9.48001 13.6 9.80801 13.6H11.808C13.872 13.6 15.208 12.264 15.208 10.2V9.63999H14.24C13.032 9.63999 12.008 8.74399 11.912 7.59199C11.848 6.92799 12.088 6.28001 12.568 5.80801C12.968 5.39201 13.536 5.16001 14.136 5.16001H15.2V4.6C15.2 2.728 14.104 1.43998 12.328 1.23198C12.136 1.19998 11.968 1.2 11.8 1.2H4.6C4.408 1.2 4.22399 1.21599 4.03999 1.23999C2.27999 1.46399 1.2 2.744 1.2 4.6V6.2C1.2 6.528 0.928 6.8 0.6 6.8C0.272 6.8 0 6.528 0 6.2V4.6C0 2.136 1.52003 0.352006 3.88003 0.0560059C4.09603 0.0240059 4.344 0 4.6 0H11.8C11.992 0 12.24 0.00799805 12.496 0.047998C14.856 0.319998 16.4 2.112 16.4 4.6V5.76001C16.4 6.08801 16.128 6.36001 15.8 6.36001H14.136C13.856 6.36001 13.6 6.46401 13.416 6.65601C13.184 6.88001 13.072 7.18399 13.104 7.48799C13.144 8.01599 13.656 8.43999 14.232 8.43999H15.808C16.136 8.43999 16.408 8.71199 16.408 9.03999V10.2C16.408 12.952 14.56 14.8 11.808 14.8Z" fill="#3A3A3A"/>
+</svg>

src/icons/mail-black.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.186 16H4.81395C4.4707 16 4.18605 15.7059 4.18605 15.3514C4.18605 14.9968 4.4707 14.7027 4.81395 14.7027H13.186C15.5805 14.7027 16.7442 13.5005 16.7442 11.027V4.97297C16.7442 2.49946 15.5805 1.2973 13.186 1.2973H4.81395C2.41953 1.2973 1.25581 2.49946 1.25581 4.97297C1.25581 5.32757 0.971163 5.62162 0.627907 5.62162C0.284651 5.62162 0 5.32757 0 4.97297C0 1.81622 1.75814 0 4.81395 0H13.186C16.2419 0 18 1.81622 18 4.97297V11.027C18 14.1838 16.2419 16 13.186 16Z" fill="#3A3A3A"/>
+<path d="M8.99981 8.75242C8.29656 8.75242 7.58493 8.52756 7.04075 8.06918L4.42028 5.90702C4.15237 5.68216 4.10214 5.27567 4.31982 4.99891C4.53749 4.72215 4.93097 4.67027 5.19888 4.89513L7.81935 7.05729C8.45563 7.58486 9.53562 7.58486 10.1719 7.05729L12.7924 4.89513C13.0603 4.67027 13.4621 4.71351 13.6714 4.99891C13.8891 5.27567 13.8472 5.69081 13.571 5.90702L10.9505 8.06918C10.4147 8.52756 9.70307 8.75242 8.99981 8.75242Z" fill="#3A3A3A"/>
+<path d="M5.65116 12.5405H0.627907C0.284651 12.5405 0 12.2465 0 11.8919C0 11.5373 0.284651 11.2432 0.627907 11.2432H5.65116C5.99442 11.2432 6.27907 11.5373 6.27907 11.8919C6.27907 12.2465 5.99442 12.5405 5.65116 12.5405Z" fill="#3A3A3A"/>
+<path d="M3.13954 9.08105H0.627907C0.284651 9.08105 0 8.787 0 8.4324C0 8.07781 0.284651 7.78375 0.627907 7.78375H3.13954C3.48279 7.78375 3.76744 8.07781 3.76744 8.4324C3.76744 8.787 3.48279 9.08105 3.13954 9.08105Z" fill="#3A3A3A"/>
+</svg>

src/icons/send.svg

@@ -0,0 +1,7 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49215 5.58068C7.17709 5.58068 6.91582 5.32764 6.91582 5.0225V1.90415L6.36254 2.44C6.1397 2.65583 5.77084 2.65583 5.548 2.44C5.32515 2.22417 5.32515 1.86694 5.548 1.65111L7.08488 0.162634C7.24625 0.00634382 7.49984 -0.0457528 7.715 0.0435556C7.93017 0.125422 8.06849 0.333808 8.06849 0.557079V5.0225C8.06849 5.32764 7.80722 5.58068 7.49215 5.58068Z" fill="white"/>
+<path d="M9.02926 2.60373C8.88326 2.60373 8.73726 2.55163 8.62199 2.44L7.08511 0.951525C6.86226 0.735697 6.86226 0.378463 7.08511 0.162634C7.30795 -0.0531942 7.67681 -0.0531942 7.89965 0.162634L9.43654 1.65111C9.65939 1.86694 9.65939 2.22417 9.43654 2.44C9.32127 2.55163 9.17527 2.60373 9.02926 2.60373Z" fill="white"/>
+<path d="M10.5661 16H4.41855C0 16 0 13.7301 0 11.7206V10.9764C0 9.31675 0 7.44128 3.6501 7.44128C4.56455 7.44128 4.90266 7.65711 5.3791 7.99946C5.40215 8.02178 5.43289 8.03667 5.45594 8.06644L6.23975 8.87021C6.90061 9.54747 8.09939 9.54747 8.76025 8.87021L9.54406 8.06644C9.56711 8.04411 9.59016 8.02178 9.6209 7.99946C10.0973 7.64966 10.4355 7.44128 11.3499 7.44128C15 7.44128 15 9.31675 15 10.9764V11.7206C14.9846 14.5636 13.5015 16 10.5661 16ZM3.6501 8.55763C1.15266 8.55763 1.15266 9.31675 1.15266 10.9764V11.7206C1.15266 13.7598 1.15266 14.8836 4.41855 14.8836H10.5661C12.856 14.8836 13.832 13.9385 13.832 11.7206V10.9764C13.832 9.31675 13.832 8.55763 11.3345 8.55763C10.7812 8.55763 10.666 8.62461 10.3356 8.86277L9.59016 9.62933C9.03689 10.195 8.2915 10.5075 7.49232 10.5075C6.69314 10.5075 5.94775 10.195 5.39447 9.62933L4.64908 8.86277C4.31865 8.62461 4.20338 8.55763 3.6501 8.55763Z" fill="white"/>
+<path d="M2.11344 8.55763C1.79838 8.55763 1.53711 8.30459 1.53711 7.99945V6.51098C1.53711 5.06716 1.53711 3.27355 4.36498 3.01307C4.67235 2.97585 4.96436 3.20657 4.9951 3.51915C5.02584 3.82428 4.79531 4.09965 4.47256 4.12942C2.68977 4.28571 2.68977 4.98529 2.68977 6.51098V7.99945C2.68977 8.30459 2.4285 8.55763 2.11344 8.55763Z" fill="white"/>
+<path d="M12.8709 8.55763C12.5558 8.55763 12.2945 8.30459 12.2945 7.99945V6.51098C12.2945 4.9853 12.2945 4.28571 10.5117 4.12198C10.1967 4.09221 9.96615 3.81684 9.99689 3.51171C10.0276 3.20657 10.3043 2.97586 10.627 3.01307C13.4549 3.27355 13.4549 5.06716 13.4549 6.51098V7.99945C13.4472 8.30459 13.1859 8.55763 12.8709 8.55763Z" fill="white"/>
+</svg>

src/pages/ContactUs.js

@@ -0,0 +1,62 @@
+// IMPORT MODULES
+import React from "react";
+
+// IMPORT COMPONENTS
+import CustomSelect from "../components/global/CustomSelect";
+import Breadcrumb from "../components/global/Breadcrumb";
+
+// IMPORT IMAGES
+import mail from "../icons/mail-black.svg";
+import send from "../icons/send.svg";
+
+const ContactUs = () => {
+  return (
+    <section className="contact-us">
+      <Breadcrumb
+        image={mail}
+        link={"/home/contact-us"}
+        linkTitle={"Написать письмо "}
+      />
+      <div className="container">
+        <div className="contact-us-inner">
+          <h2 className="cu-title">Написать письмо</h2>
+          <form>
+            <div className="input-block">
+              <label htmlFor="topic">Тема письма</label>
+              <CustomSelect
+                placeholder={"Выберите тему письма"}
+                name={"topic"}
+                items={["Пластиковые карты", "Кредиты"]}
+                stateSetter={() => null}
+                customId={"topic"}
+                elName={"topic"}
+              />
+            </div>
+            <div className="input-block">
+              <label htmlFor="msg">Сообщение</label>
+              <textarea
+                name="msg"
+                id="msg"
+                rows="10"
+                placeholder="Ваше сообщение"
+              ></textarea>
+            </div>
+            <div className="cu-bottom">
+              <h1>CAPTCHA</h1>
+              <button type="button" className="sign-btn cu-btn">
+                <div>
+                  <h3>Отправить письмо</h3>
+                  <div className="btn-img">
+                    <img src={send} alt="logout" />
+                  </div>
+                </div>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactUs;

src/pages/Credits.js

@@ -5,17 +5,13 @@ import React from "react";
 import Breadcrumb from "../components/global/Breadcrumb";
 
 // IMPORT IMAGES
-import card from "../icons/card-black.svg";
+import credit from "../icons/credit-black.svg";
 import add from "../icons/add.svg";
 
 const Credits = () => {
   return (
     <section className="cards">
-      <Breadcrumb
-        image={card}
-        link={"/home/cards"}
-        linkTitle={"Пластиковые карты"}
-      />
+      <Breadcrumb image={credit} link={"/home/credits"} linkTitle={"Кредиты"} />
       <div className="container">
         <div className="cards-inner">
           <div className="card-title">

src/pages/Home.js

@@ -1,5 +1,5 @@
 // IMPORT MODULES
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 // IMPORT COMPONENTS
 import LoggedNav from "../components/global/LoggedNav";
@@ -9,12 +9,18 @@ import Side from "../components/global/Side";
 const Home = ({ ChildEl }) => {
   const [sideOpen, setSideOpen] = useState(false);
 
+  // CLEANUP FUNCTION
+  useEffect(() => {
+    return () => null;
+  }, []);
+
   return (
     <section className="home">
       <Side sideOpen={sideOpen} setSideOpen={setSideOpen} />
       <div className="home-content">
         <div className="home-inner">
           <LoggedNav setSideOpen={setSideOpen} />
+          {/* RENDER PAGE DEPENDING ON URL */}
           <ChildEl />
         </div>
         <Footer />

src/styles/_base.scss

@@ -1,5 +1,7 @@
-.home-inner {
-  min-height: calc(100vh - 6.15rem);
+.home-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .cards-title {

src/styles/_contact-us.scss

@@ -0,0 +1,35 @@
+.contact-us-inner {
+  padding: 6.4rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+
+  form {
+    textarea {
+      resize: none;
+      border: 0.1rem solid #e5e5e5;
+      border-radius: 0.5rem;
+      padding: 1.4rem 2rem;
+      font-size: 1.6rem;
+    }
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+}
+
+.cu-title {
+  font-size: 2.2rem;
+  padding-bottom: 3.4rem;
+}
+
+.cu-bottom {
+  display: flex;
+  gap: 3rem;
+  justify-content: space-between;
+}
+
+.cu-btn {
+  max-width: 23.3rem;
+  width: 100%;
+}

src/styles/_side.scss

@@ -8,11 +8,12 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 100vh;
+  // min-height: 100vh;
+  height: 100%;
 }
 
 .side {
-  height: 100vh;
+  height: 100%;
   max-width: 0rem;
   width: 100%;
   background: $base-green;

src/styles/style.scss

@@ -16,3 +16,4 @@
 @import "./base";
 @import "./breadcrumb";
 @import "./cards";
+@import "./contact-us";