update to website to match restaurant

Websites/Jefes/Frontend/jefes/package.json

@@ -11,7 +11,11 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.5.1"
     },
   "devDependencies": {
     "@types/react": "^18.2.15",

Websites/Jefes/Frontend/jefes/src/components/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <div>Footer</div>
+    )
+}
+
+export default Footer

Websites/Jefes/Frontend/jefes/src/components/Header/Header.tsx

@@ -5,15 +5,14 @@ const Header = () => {
     return (
         <section className='h-wrapper'>
             <div className='h-container paddings innerwidth'>
-                <img src = "https://images8.alphacoders.com/122/1220394.jpg" alt= "" width={100}/>
+                <img src = "jefes_logo.jpg" alt= "" width={100}/>
                 <div className='h-container h-menu'>
-                    <a href='' className='h-menu-items'>Residencies</a>
-                    <a href='' className='h-menu-items'>Our Values</a>
-                    <a href='' className='h-menu-items'>Contact Us</a>
-                    <a href='' className='h-menu-items'>Get Started</a>
-                    <button className='button'>
-                        <a href=''>Contact</a>
-                    </button>
+                    <a href='' className='h-menu-items'>Menu</a>
+                    <a href='' className='h-menu-items'>Gallery</a>
+                    <a href='' className='h-menu-items'>About Us</a>
+                </div>
+                <div className="h-right">
+                    <a href="" className="h-menu-items">Reserve</a>
                 </div>
             </div>
         </section>

Websites/Jefes/Frontend/jefes/src/components/Hero/Hero.css

@@ -14,7 +14,6 @@
     gap: 3rem;
 }
 
-
 .hero-title{
     position: relative;
     z-index: 1;
@@ -25,7 +24,34 @@
     line-height: 4rem;
 }
 
+.orange-circle{
+    height: 4rem;
+    width: 4rem;
+    background: var(--orange-gradient);
+    border-radius: 999px;
+    position: absolute;
+    right: 38%;
+    top: -10%;
+    z-index: -1;
+}
 
+.search-bar{
+    background-color: white;
+    border-radius: 5px;
+    border: 3px solid rgba(120, 120, 120, 0.374);
+    padding: 0.5rem 1rem;
+    justify-content: space-between;
+    width: 100%;
+}
+.search-bar> input{
+    border: none;
+    outline: none;
+}
+
+.search-text{
+    background-color: white;
+    color: black;
+}
 
 /* right side */
 .image-container{

Websites/Jefes/Frontend/jefes/src/components/Hero/Hero.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import './Hero.css'
+import {HiLocationMarker} from 'react-icons/hi'
 
 const Hero = () => {
     return (
@@ -8,6 +9,7 @@ const Hero = () => {
                 {/* left side */}
                 <div className="flexColStart hero-left">
                     <div className="hero-title">
+                        <div className="orange-circle"/>
                         <h1>
                             Discover <br />
                             Most Suitable <br /> Property
@@ -17,14 +19,16 @@ const Hero = () => {
                         <span>Find a variety of properties that suit you very easily</span>
                         <span>Forget all difficulties in finding a residence for you</span>
                     </div>
-                    <div className="search-bar">
-
+                    <div className="flexCenter search-bar">
+                        <HiLocationMarker color="var(--blue)" size ={25}></HiLocationMarker>
+                        <input type="text" className="search-text" />
+                        <button className="button">Search</button>
                     </div>
                 </div>
                 {/* right side */}
                 <div className="flexCenter hero-right">
                     <div className="image-container">
-                        <img src="https://images8.alphacoders.com/122/1220394.jpg" alt="" />
+                        <img src="img01.webp" alt="" />
                     </div></div>
             </div>
         </section>