Changed the UI as requested

Author: Shelly011s

example/src/App.js

@@ -13,6 +13,7 @@ import {
 } from 'dezenix-react'
 import Home from './components/Home'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import contact from "./images/contact.png"
 import img1 from "./images/img01.png"
 import user from "./images/user1.jpg"
 import {members} from "./data/members.json"
@@ -46,7 +47,7 @@ const App = () => {
         <Route path='/complex' element={<ComplexComponent />} />
         <Route path='/portfoliohome' element={<PortfolioHome pic={img1} />} />
         <Route path='/team' element={<TeamMembers img={user} members={members}  />} />
-        <Route path='/contactus' element={<ContactUs />} />
+        <Route path='/contactus' element={<ContactUs  img={contact} />} />
       </Routes>
     </HashRouter>
   )

example/src/images/contact.png

@@ -1,53 +1,57 @@
 import React from "react";
 import { FaPaperPlane } from "react-icons/fa";
 import styles from "./index.module.css";
-const ContactUs = () => {
+const ContactUs = (props) => {
   return (
-    <div className={styles.contact}>
-      <h1 className={styles["section-header"]}>Contact Us</h1>
-
+    <div className={styles.section}>
+      <h1 className={styles["brand-header"]}>Brand name</h1>
+      <div className={styles.contact}>
       <div className={styles["contact-wrapper"]}>
-        <form
-          id={styles["contact-form"]}
-          className={styles["form-horizontal"]}
-          role="form"
-        >
-          <input
-            type="text"
-            id="name"
-            placeholder="NAME"
-            name="name"
-            required
-          />
-
-          <input
-            type="email"
-            id="email"
-            placeholder="EMAIL"
-            name="email"
-            required
-          />
+          <h1 className={styles["section-header"]}>Contact Us</h1>
+          <form
+            id={styles["contact-form"]}
+            className={styles["form-horizontal"]}
+            role="form"
+          >
+            <input
+              type="text"
+              id="name"
+              placeholder="NAME"
+              name="name"
+              required
+            />
 
-          <textarea
-            rows="10"
-            placeholder="MESSAGE"
-            name="message"
-            required
-          ></textarea>
+            <input
+              type="email"
+              id="email"
+              placeholder="EMAIL"
+              name="email"
+              required
+            />
 
-          <button
-            className={styles["send-button"]}
-            id="submit"
-            type="submit"
-            value="SEND"
-          >
-            <div className={styles["alt-send-button"]}>
-              <FaPaperPlane color= "#fff"/>
+            <textarea
+              rows="10"
+              placeholder="MESSAGE"
+              name="message"
+              required
+            ></textarea>
 
-              <span className={styles["send-text"]}>SEND</span>
-            </div>
-          </button>
-        </form>
+            <button
+              className={styles["send-button"]}
+              id="submit"
+              type="submit"
+              value="SEND"
+            >
+              <div className={styles["alt-send-button"]}>
+                <FaPaperPlane color="#fff" />
+                <span className={styles["send-text"]}>SEND</span>
+              </div>
+            </button>
+          </form>
+        </div>
+        <div className={styles.contact_img}>
+          <img src={props.img} alt="img" className={styles.img} />
+        </div>
       </div>
     </div>
   );

src/lib-components/contact_us/index.js

@@ -2,38 +2,49 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-
-.contact {
-  max-width: 450px;
-  height: 100%;
-  display: flex;
-  margin: 1em auto;
+  font-family: "Oswald", sans-serif;
+  background-color: #1495E3;
+}
+.section{
+  height: max-content;
+  width: fit-content;
+  display:flex;
+  flex-wrap:nowrap;
   flex-direction: column;
-  background-color: black;
+  margin: 2em auto;
+  padding: 2em 1em;
   border-radius: 0.5rem;
-  background: rgb(195, 34, 110);
-  background: linear-gradient(
-    125deg,
-    rgba(195, 34, 110, 1) 0%,
-    rgba(253, 187, 45, 1) 48%
-  );
-}
+  background-color:#f4f3ee;
 
-.section-header {
-  text-align: center;
-  margin: 0 auto;
-  padding-top: 1rem;
-  font: 300 22px "Oswald", sans-serif;
-  color: #fff;
+}
+.contact{
+  display:flex;
+  padding: 1em;
+}
+.contact_img {
+  max-width: 440px;
+}
+.brand-header{
+  padding: 0.8em 1em;
+  font-size: 22px;
+  font-weight: 500;
+}
+.section-header{
+  padding-left: 0.25em;
+  padding-bottom: 1em;
+  font-size: 16px;
+  font-weight: 400;
+}
+.brand-header, .section-header {
+  text-align: left;
+  color: #000;
   text-transform: uppercase;
   letter-spacing: 2px;
 }
 
 .contact-wrapper {
-  margin: 0 auto;
-  padding: 2rem;
-  max-width: 440px;
+  padding: 0 0 1em 0;
+  max-width: 430px;
   height: 380px;
 }
 
@@ -48,7 +59,7 @@ body {
   font-weight: 400;
 }
 
-input {
+#contact-form input {
   max-width: 400px;
   height: 40px;
   padding: 0.7em;
@@ -60,15 +71,15 @@ input {
   -webkit-backdrop-filter: blur(15px);
   border: 1px solid rgba(255, 255, 255, 0.03);
 }
-input:hover,
+#contact-form input:hover,
 textarea:hover {
-  border: 1.5px solid white;
+  border: 1.5px solid #1495E3;
 }
-input:focus-visible,
+#contact-form input:focus-visible,
 textarea:focus-visible {
-  outline: 1.5px solid white;
+  outline: 1.5px solid #1495E3;
 }
-textarea {
+#contact-form textarea {
   padding: 0.7em;
   border-radius: 0.5rem;
   border: 1.5px solid #fff;
@@ -80,7 +91,6 @@ textarea {
 }
 
 .send-button {
-  margin-top: 15px;
   height: 34px;
   width: 317px;
   padding: 7px;