update hero component (left and right section)

src/components/hero/hero.tsx

@@ -1,17 +1,18 @@
+import styles from "@/static/hero/hero.module.css"
+
 const Hero = () => {
-  return (
-    <div
-      style={{
-        height: "500px",
-        background: "red",
-        color: "white",
-        fontSize: "40px",
-        padding: "100px",
-      }}
-    >
-      HERO COMPONENT
+  return(
+    <section className={styles.hero}>
+      <div className="cont-header">
+        <div className={styles.left}>
+          <h1>left</h1>
         </div>
-  );
+        <div className={styles.right}>
+          <h1>right</h1>
+        </div>
+      </div>
+    </section>
+  )
 };
 
 export default Hero;

src/static/globals.css

@@ -26,3 +26,12 @@ body {
 h1, a {
     color: #fff;
 }
+
+.cont-header {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--container-padding, 40px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/static/header/header.module.css

@@ -1,5 +1,4 @@
 .header {
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -13,16 +12,6 @@
   border-bottom: 1px solid var(--border);
 }
 
-.cont-header {
-  width: 100%;
-  max-width: var(--container-max-width, 1400px);
-  margin: 0 auto;
-  padding: 0 var(--container-padding, 40px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 /* LEFT */
 
 .left a {

src/static/hero/hero.module.css

@@ -1,5 +1,11 @@
 .hero {
-    height: 500px;
-    background: aqua;
-    font-size: 40px;
+    background-color: aquamarine;
+    height: calc(100vh - 90px);
+}
+
+.left,
+.right {
+    width: 49%;
+    height: 90vh;
+    background-color: red;
 }

src/widgets/header/ui/Header.tsx

@@ -4,7 +4,7 @@ import styles from "@/static/header/header.module.css";
 const Header = () => {
   return (
     <header className={styles.header}>
-      <div className={styles["cont-header"]}>
+      <div className="cont-header">
         {/* LEFT */}
         <div className={styles.left}>
           <a href="/">