fixed hero issue

yaasiinaxmed · Nov 16, 2023 · a654134 · a654134
1 parent 304f1e1
commit a654134
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -19,7 +19,7 @@ function Header() {
 
   const headerRef = useRef(null);
   const menuRef = useRef(null);
-  const [menu, setMenu] = useState(true);
+  const [menu, setMenu] = useState(false);
 
   // header sticky function
   const stickyHeader = () => {

diff --git a/src/components/homeContent/Hero.jsx b/src/components/homeContent/Hero.jsx
@@ -1,20 +1,24 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import heroImg from "../../assets/hero.jpg";
 
 function Hero() {
   return (
-    <section className="w-full h-[70vh] bg-hero bg-cover bg-center bg-no-repeat">
+    <section
+      className="w-full h-[100vh] bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${heroImg})` }}
+    >
       <div className="container  h-full flex items-center justify-center flex-col gap-2">
         <h2 className="text text-2xl md:text-3xl !leading-[2rem] sm:!leading-[3rem] text-center text-white font-medium whitespace-normal">
-          Are you looking for a property <br className="hidden md:block"/> That perfectly matches your
-          requirements?
+          Are you looking for a property <br className="hidden md:block" /> That
+          perfectly matches your requirements?
         </h2>
         <p className="text-xl md:text-2xl text-center text-white font-normal ">
           Discover it with ease!
         </p>
         <Link to="/Properties">
           <button className="bg-white mt-2 text-primaryColor px-8 py-2 h-[44px] font-medium flex items-center justify-center rounded-3xl duration-100 hover:scale-110 ">
-          Explore Now
+            Explore Now
           </button>
         </Link>
       </div>

diff --git a/src/components/profileContent/ProfileContent.jsx b/src/components/profileContent/ProfileContent.jsx
@@ -19,7 +19,7 @@ function ProfileContent() {
       <button onClick={handleDeleteUser} className="mt-6 w-full bg-red-500 bg-opacity-90 hover:bg-opacity-100 px-4 py-3 text-sm flex items-center justify-center rounded-xl text-white duration-100 ">
         Delete Account
       </button>
-      <button onClick={handleLogout} className="mt-3 w-full bg-red-500 bg-opacity-10 border-2 border-red-300 text-red-500 hover:bg-opacity-20 px-4 py-3 text-sm flex items-center justify-center rounded-xl duration-100 ">
+      <button onClick={handleLogout} className="mt-3 w-full bg-red-500 bg-opacity-10 border-[2px] border-red-300 text-red-500 hover:bg-opacity-20 px-4 py-3 text-sm flex items-center justify-center rounded-xl duration-100 ">
         Logout
       </button>
     </div>

diff --git a/src/pages/properties/Properties.jsx b/src/pages/properties/Properties.jsx
@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import PropertyCard from "../../components/PropertyCard";
 import SearchBar from "../../components/SearchBar";
 import { useGetPropertiesQuery } from "../../store/api/PropertySlice";
-import searchImg from "../../assets/search.png"
+import searchImg from "../../assets/search.png";
+import heroImg from "../../assets/hero.jpg";
 
 function Properties() {
-  const {data: properties = [], isLoading} = useGetPropertiesQuery()
+  const { data: properties = [], isLoading } = useGetPropertiesQuery();
   const [filter, setFilter] = useState("");
   const searchData = properties.filter(
     (property) =>
@@ -18,22 +19,25 @@ function Properties() {
   return (
     <div className="w-full">
       {/* cover */}
-      <div className="w-full h-[200px] bg-hero bg-cover bg-center bg-no-repeat flex items-center justify-center">
+      <div
+        className="w-full h-[200px] bg-cover bg-center bg-no-repeat flex items-center justify-center"
+        style={{ backgroundImage: `url(${heroImg})` }}
+      >
         <SearchBar filter={filter} setFilter={setFilter} />
       </div>
       {/* Properties */}
       <div className="container pb-12 flex items-center justify-center flex-wrap gap-6 mt-8">
-      {isLoading ? (
-            <div className="flex gap-2 items-center justify-center ">
-              <span className="w-6 h-6 rounded-full border-2 border-primaryColor border-l-white animate-spin"></span>
-              Loading...
-            </div>
-          ) : (
-            <>
+        {isLoading ? (
+          <div className="flex gap-2 items-center justify-center ">
+            <span className="w-6 h-6 rounded-full border-2 border-primaryColor border-l-white animate-spin"></span>
+            Loading...
+          </div>
+        ) : (
+          <>
             {searchData.length === 0 ? (
               <section className="py-[3rem] flex flex-col items-center justify-center">
                 <figure className="w-[20rem]">
-                  <img src={searchImg} alt="" className="w-full"/>
+                  <img src={searchImg} alt="" className="w-full" />
                 </figure>
                 <h1>No Results Found</h1>
               </section>
@@ -42,8 +46,8 @@ function Properties() {
                 <PropertyCard property={property} key={property._id} />
               ))
             )}
-            </>
-          )}
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,9 +9,6 @@ export default {
       colors: {
         primaryColor: "#1E88E5",
         HeadingColor: "#222222"
-      },
-      backgroundImage: {
-        "hero": `url("./src/assets/hero.jpg")`
       }
     },
   },