modified Banner [Fixes #51]

Author: bilal

components/Banner.jsx

@@ -3,9 +3,17 @@ import React from "react";
 const Banner = () => {
   return (
     <div>
-      <div className="banner">
-        <div className="stripe"></div>
-        <div className="text">UNDER CONSTRUCTION</div>
+      <div className="bg-white">
+        <div
+          className="p-4"
+          style={{
+            background:
+              "repeating-linear-gradient(-55deg, #222, rgb(34, 34, 34) 10px, rgb(234, 179, 8) 10px, rgb(234, 179, 8) 20px)",
+          }}
+        />
+        <div className="p-4 text-center text-gray-900 bg-yellow-500 font-bold">
+          UNDER CONSTRUCTION
+        </div>
       </div>
     </div>
   );

styles/globals.css

@@ -19,29 +19,4 @@ a {
 
 * {
   box-sizing: border-box;
-}
-
-/* styles for top under construction banner start here*/
-
-.banner {
-  background: white;
-}
-
-.banner>div {
-  padding: 1rem;
-}
-
-.stripe {
-  background: repeating-linear-gradient(-55deg, #222, rgb(34, 34, 34) 10px, rgb(229, 194, 0) 10px, rgb(229, 194, 0) 20px);
-}
-
-.text {
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  text-align: center;
-  font-weight: bolder;
-  color: #222;
-  font-size: clamp(1rem, 1vw, 2rem);
-  background-color: rgb(229, 194, 0);
-}
-
-/* styles for top under construction banner end here*/
+}