updates to main page

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

@@ -3,6 +3,7 @@ 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'
 
 function App() {
   // const [count, setCount] = useState(0)
@@ -11,6 +12,7 @@ function App() {
     // <>
       <div className='Header'>
         <Header/>
+        <Hero/>
         </div>
       // {/* <div>
       //   <a href="https://vitejs.dev" target="_blank">

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

@@ -0,0 +1,42 @@
+.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;
+}
+
+
+
+/* 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

@@ -0,0 +1,34 @@
+import React from 'react'
+import './Hero.css'
+
+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">
+                        <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="search-bar">
+
+                    </div>
+                </div>
+                {/* right side */}
+                <div className="flexCenter hero-right">
+                    <div className="image-container">
+                        <img src="https://images8.alphacoders.com/122/1220394.jpg" alt="" />
+                    </div></div>
+            </div>
+        </section>
+    )
+}
+
+export default Hero;

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

@@ -97,4 +97,35 @@ a {
 
 .innerwidth{
   width: 100%;
+}
+
+.flexCenter{
+  display: flex;
+  row-gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.flexColCenter{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+
+.flexColStart{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+
+.flexColEnd{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
 }