update to background components

Websites/Jefes/Frontend/src/components/Navbar/Navbar.css

@@ -3,15 +3,19 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: black;
+    background: #18191a;
     padding: 1rem 2rem;
     color: white;
+    font-size: large;
 }
 
-.navbar_logo{
+.navbar_logo>img{
-    display: flex;
+    display: block;
     justify-content: flex-start;
     align-items: center;
+    background-color: #18191a;
+    max-width: 150px;
+    height: auto;
 }
 
 .navbar_logo>img{
@@ -32,7 +36,7 @@
     cursor: pointer;
 }
 .navbar_links>li:hover{
-    color: var(--color-grey);
+    border-bottom: 1px solid #B3121E;
 }
 
 .navbar_login{
@@ -43,15 +47,14 @@
 .navbar_login>a{
     margin: 0 1rem;
     text-decoration: none;
-    transition: 0.5s ease;
 }
 .navbar_login>a:hover{
-    border-bottom: 1px solid var(--color-golden);
+    border-bottom: 1px solid #B3121E;
 }
 .navbar_login>div{
     width: 1px;
     height: 30px;
-    background-color: var(--color-grey);
+    background-color: white;
 }
 
 /* Small Screen layout */
@@ -65,7 +68,7 @@
     left: 0;
     width: 100%;
     height: 100vh;
-    background-color: black;
+    background-color: #18191a;
     transition: 0.5s ease;
     flex-direction: column;
     z-index: 5;

Websites/Jefes/Frontend/src/components/Navbar/Navbar.tsx

@@ -10,7 +10,7 @@ const Navbar = () => {
   return (
     <nav className="app_navbar">
       <div className="navbar_logo">
-        <img src="jefes_logo.jpg" alt=""/>
+        <img src="logo.svg" alt="" />
       </div>
       <ul className="navbar_links">
         <li className="p_opensans"><a href="#home">Home</a></li>

Websites/Jefes/Frontend/src/components/SubHeading/SubHeading.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {PiCookingPotFill} from 'react-icons/pi'
 
+
 const SubHeading = ({title}) => {
     return (
     <div style={{marginBottom:'1rem'}}>
         <p className="p_cormorant">{title}</p>
-        <PiCookingPotFill/>
+        <PiCookingPotFill className='spoon_img'/>
     </div>
     )
 }

Websites/Jefes/Frontend/src/container/AboutUs/AboutUs.css

@@ -0,0 +1,4 @@
+.app_aboutus{
+    background-color: #18191a;
+    
+}

Websites/Jefes/Frontend/src/container/AboutUs/AboutUs.tsx

@@ -13,6 +13,11 @@ const AboutUs = () => {
                 <h1 className="headtext_cormorant">About Us</h1>
                 <PiCookingPotFill/>
                 <p className="p_opensans">jflasjfuuhhgduiahdsajkfnaslfnsaieoljw</p>
+                <button className="custom_button">Learn More</button>
+            </div>
+            <div className="app_aboutus_content_knife flex_center">
+                <img src="IMG_1114.webp" alt="" />
+
             </div>
         </div>
     </div>

Websites/Jefes/Frontend/src/container/Header/Header.css

@@ -1,11 +1,19 @@
 .app_header{
-    background-color: black;
+    background-color: #18191a;
+    color: white;
 }
+
+.header_sectioner{
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}
+
 .app_header_h1{
     font-family: var(--font-base);
-    color: var(--color-golden);
+    color: white;
     letter-spacing: 0.04em;
     text-transform: uppercase;
+    text-align: center;
     line-height: 117px;
     font-size: 90px;
 }

Websites/Jefes/Frontend/src/container/Header/Header.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import SubHeading from '../../components/SubHeading/SubHeading'
-
+import './Header.css'
 
 const Header = () => {
     return (
-        <div className="app_header app_wrapper section_padding">
+        <div className="app_header app_wrapper section_padding" id='home'>
             <div className="app_wrapper_info">
-                <SubHeading title="Chase the new flavor"/>
+                <h1 className="app_header_h1">Authentic Mexican Cuisine</h1>
-                <h1 className="app_header_h1">The Key to Fine Dining</h1>
+                <img src="gun01.svg" alt="" className='header_sectioner'/>
                 <p className="p_opensans" style={{margin: '2rem 0'}}>Jefe's Mexican Cocina Y Cantina serves the best Mexican food in town. Be our guests and have an enjoyable experience with an authentic Mexican meal right here in Broken Arrow, OK.</p>
                 <button type='button' className="custom_button">Explore Menu</button>
             </div>
@@ -15,7 +15,6 @@ const Header = () => {
                 <img src="img01.webp" alt="" />
             </div>
         </div>
-
     )
 }