fixed files and set up new folders for components

Websites/Jefes/Frontend/jefes/src/App.css

@@ -1,42 +1,177 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+.section__padding {
+  padding: 4rem 6rem;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.flex__center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
+.app__bg {
+  background: url('./assets/bg.png');
+  background-position: center;
+  background-size: cover;
+  background-repeat: repeat;
+  background-attachment: fixed;
 }
-  to {
-    transform: rotate(360deg);
+
+.app__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+.app__wrapper_info {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.app__wrapper_img {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-left: 2rem;
+}
+
+.app__wrapper_img-reverse {
+  justify-content: flex-start;
+  margin-right: 2rem;
+}
+
+.app__wrapper_img img {
+  width: 80%;
+}
+
+.custom__button {
+  background-color: var(--color-crimson);
+    color: var(--color-black);
+    font-family: var(--font-base);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    line-height: 28px;
+    font-size: 16px;
+    padding: 0.5rem 1.5rem;
+    border-radius: 1px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+.p__cormorant {
+  font-family: var(--font-base);
+  color: var(--color-white);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: capitalize;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  line-height: 29.9px;
+  font-size: 23px;
+}
+
+.p__opensans {
+  font-family: var(--font-alt);
+  color: var(--color-white);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  text-transform: capitalize;
+  line-height: 28px;
+  font-size: 16px;
+}
+
+.headtext__cormorant {
+  font-family: var(--font-base);
+  color: var(--color-golden);
+  font-size: 64px;
+  line-height: 83.2px;
+  letter-spacing: 0.04em;
+  text-transform: capitalize;
+}
+
+.spoon__img {
+  width: 45px;
+}
+
+@media screen and (min-width: 2000px) {
+  .custom__button,
+  .p__cormorant {
+    font-size: 37px;
+    line-height: 67px;
+  }
+
+  .p__opensans {
+    font-size: 30px;
+    line-height: 50px;
+  }
+
+  .headtext__cormorant {
+    font-size: 150px;
+    line-height: 210px;
+  }
+
+  .spoon__img {
+    width: 80px;
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
+@media screen and (max-width: 1150px) {
+  .app__wrapper {
+    flex-direction: column;
+  }
+
+  .app__wrapper_img {
+    margin: 5rem 0 0 0;
+  }
+
+  .app__wrapper_img-reverse {
+    margin: 0 0 5rem 0;
+  }
+
+  .app__wrapper_img img {
+    width: 100%;
   }
 }
 
-.card {
-  padding: 2em;
+@media screen and (max-width: 850px) {
+  .section__padding {
+    padding: 4rem;
+  }
 }
 
-.read-the-docs {
-  color: #888;
+@media screen and (max-width: 650px) {
+  .section__padding {
+    padding: 4rem 2rem;
+  }
+  
+  .p__cormorant {
+    font-size: 21px;
+  }
+
+  .p__opensans {
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .p__opensans {
+    font-size: 12px;
+  }
+
+  .p__cormorant {
+    font-size: 19px;
+  }
+
+  .headtext__cormorant {
+    font-size: 45px;
+    line-height: 70px;
+  }
 }

Websites/Jefes/Frontend/jefes/src/App.tsx

@@ -1,40 +1,26 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
-// import './App.css'
-import Header from './components/Header/Header'
-import Hero from './components/Hero/Hero'
+import { AboutUs, Chef, FindUs, Footer, Gallery, Header, Intro, Laurels, SpecialMenu } from './container';
+import { Navbar } from './components';
+import './App.css';
 
 function App() {
   // const [count, setCount] = useState(0)
 
   return (
-    // <>
       <div className='Header'>
+        <Navbar />
         <Header />
-        <Hero/>
+        <AboutUs />
+        <SpecialMenu />
+        <Chef />
+        <Intro />
+        <Laurels />
+        <Gallery />
+        <FindUs />
+        <Footer />
       </div>
-      // {/* <div>
-      //   <a href="https://vitejs.dev" target="_blank">
-      //     <img src={viteLogo} className="logo" alt="Vite logo" />
-      //   </a>
-      //   <a href="https://react.dev" target="_blank">
-      //     <img src={reactLogo} className="logo react" alt="React logo" />
-      //   </a>
-      // </div> */}
-      // {/* <h1>Vite + React</h1> */}
-      // {/* <div className="card">
-      //   <button onClick={() => setCount((count) => count + 1)}>
-      //     count is {count}
-      //   </button>
-      //   <p>
-      //     Edit <code>src/App.tsx</code> and save to test HMR
-      //   </p>
-      // </div>
-      // <p className="read-the-docs">
-      //   Click on the Vite and React logos to learn more
-      // </p> */}
-    // </>
   )
 }
 

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

@@ -1,53 +0,0 @@
-.h-wrapper {
-    background: var(--black);
-    color: white;
-}
-
-
-.h-container {
-    display: flex;
-    row-gap: 2rem;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    color: var(--secondary);
-}
-
-
-.paddings {
-    padding: 1.5rem;
-}
-
-
-.innerwidth {
-    width: 100%;
-}
-
-
-.h-menu{
-    gap: 2rem;
-}
-
-.h-menu-items:hover{
-    filter: drop-shadow(0 0 2em #ffffff);
-    cursor: pointer;
-}
-
-.button{
-    font-weight: 500;
-    padding: 0.6rem 1.4rem;
-    color: white;
-    background: var(--blue-gradient);
-    border: none;
-    border-radius: 4px;
-    transition: all 300ms ease-in;
-}
-
-/* @media (min-width: 1536px){
-    .innerwidth{
-        max-width: 1280px;
-        margin: auto;
-    }
-} */

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

@@ -1,22 +0,0 @@
-import React from 'react'
-import './Header.css'
-
-const Header = () => {
-    return (
-        <section className='h-wrapper'>
-            <div className='h-container paddings innerwidth'>
-                <img src = "jefes_logo.jpg" alt= "" width={100}/>
-                <div className='h-container h-menu'>
-                    <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>
-    )
-}
-
-export default Header;

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

@@ -1,68 +0,0 @@
-.hero-wrapper{
-    color: white;
-    position: relative;
-    padding-bottom: 2rem;
-    background-color: var(--black);
-}
-
-.hero-container{
-    justify-content: space-between;
-    align-items: flex-end;
-}
-/* left side */
-.hero-left{
-    gap: 3rem;
-}
-
-.hero-title{
-    position: relative;
-    z-index: 1;
-}
-.hero-title>h1{
-    font-weight: 600;
-    font-size: 3.8rem;
-    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{
-    width: 30rem;
-    height: 35rem;
-    overflow: hidden;
-    border-radius: 15 rem 15rem 0 0;
-    border: 8px solid rgba(255,255,255,0..12);
-}
-
-.image-container>img{
-    width: 100%;
-    /* height: 100%; */
-}

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

@@ -1,38 +0,0 @@
-import React from 'react'
-import './Hero.css'
-import {HiLocationMarker} from 'react-icons/hi'
-
-const Hero = () => {
-    return (
-        <section className='hero-wrapper'>
-            <div className='flexCenter hero-container paddings innerwidth'>
-                {/* left side */}
-                <div className="flexColStart hero-left">
-                    <div className="hero-title">
-                        <div className="orange-circle"/>
-                        <h1>
-                            Discover <br />
-                            Most Suitable <br /> Property
-                        </h1>
-                    </div>
-                    <div className="flexColStart hero-des">
-                        <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="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="img01.webp" alt="" />
-                    </div></div>
-            </div>
-        </section>
-    )
-}
-
-export default Hero;

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

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

Websites/Jefes/Frontend/jefes/src/components/index.js

@@ -0,0 +1,13 @@
+import SubHeading from './SubHeading/SubHeading';
+import Newsletter from './Footer/Newsletter';
+import FooterOverlay from './Footer/FooterOverlay';
+import MenuItem from './Menuitem/MenuItem';
+import Navbar from './Navbar/Navbar';
+
+export {
+    SubHeading,
+    Newsletter,
+    FooterOverlay,
+    MenuItem,
+    Navbar,
+};

Websites/Jefes/Frontend/jefes/src/constants/index.js

@@ -0,0 +1,5 @@
+import images from './images';
+import meal from '../assets/meal.mp4';
+import data from './data';
+
+export { images, meal, data };

Websites/Jefes/Frontend/jefes/src/container/AboutUs/AboutUs.js

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

Websites/Jefes/Frontend/jefes/src/container/Chef/Chef.js

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

Websites/Jefes/Frontend/jefes/src/container/FindUs/FindUs.js

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

Websites/Jefes/Frontend/jefes/src/container/Footer/Footer.js

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

Websites/Jefes/Frontend/jefes/src/container/Gallery/Gallery.js

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

Websites/Jefes/Frontend/jefes/src/container/Header/Header.js

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

Websites/Jefes/Frontend/jefes/src/container/Intro/Intro.js

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

Websites/Jefes/Frontend/jefes/src/container/Laurels/Laruels.js

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

Websites/Jefes/Frontend/jefes/src/container/Menu/Menu.tsx

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

Websites/Jefes/Frontend/jefes/src/container/index.js

@@ -0,0 +1,21 @@
+import AboutUs from './AboutUs/AboutUs';
+import Chef from './Chef/Chef';
+import FindUs from './Findus/FindUs';
+import Footer from './Footer/Footer';
+import Gallery from './Gallery/Gallery';
+import Header from './Header/Header';
+import Intro from './Intro/Intro';
+import Laurels from './Laurels/Laurels';
+import SpecialMenu from './Menu/SpecialMenu';
+
+export {
+    AboutUs,
+    Chef,
+    FindUs,
+    Footer,
+    Gallery,
+    Header,
+    Intro,
+    Laurels,
+    SpecialMenu,
+};