Skip to content

Commit

Permalink
Fixed the landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jib2004
jib2004 committed Oct 10, 2024
1 parent 4ea3b13 commit fcb798c
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 47 deletions.
102 changes: 75 additions & 27 deletions src/Component/common/Header/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import logo from "../../../assets/images/Logo.png";
import { FaBars } from "react-icons/fa";
import "./Navbar.css";
import { Link ,useNavigate} from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false); // State to toggle mobile menu visibility
const [activeIndex, setActiveIndex] = useState(0);
const navigate = useNavigate()
const [isScrolled, setIsScrolled] = useState(false); // New state for scroll
const navigate = useNavigate();

const menuItems = [
{ name: "Home", href: "#home" },
Expand All @@ -16,54 +17,93 @@ const Navbar = () => {
{ name: "Contact Us", href: "#contact" },
];

const handleMenuClick = (index) => {
const handleMenuClick = (index, name) => {
setActiveIndex(index);
setIsOpen(false); // Close the menu when a menu item is clicked
setIsOpen(false); // Close the mobile menu when a menu item is clicked

if (name === "Home") {
// Scroll to the top when Home is clicked
window.scrollTo({
top: 0,
behavior: "smooth", // Smooth scroll effect
});
}
};

// Add scroll event listener to toggle navbar fixed state
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 50) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
};

window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);

return (
<nav className="bg-[#224A4D] py-[1.6rem] px-6 lg:px-[120px] w-full">
<div className="flex justify-between items-center w-full">
<nav
className={`w-full bg-[#224A4D] px-6 py-[1.3rem] transition-all duration-300 lg:px-[120px] ${
isScrolled ? " left-0 top-0 z-50 shadow-lg" : ""
}`}
>
<div className="flex w-full items-center justify-between">
<div className="flex justify-between">
<img src={logo} alt="Logo" className="h-[74.01px] min-w-[132px]" />
</div>
{/* Desktop Menu */}
<div className="navbar-menu hidden md:flex space-x-12">

{/* Desktop Menu (Hidden on small screens) */}
<div className="navbar-menu hidden space-x-12 md:flex">
{menuItems.map((item, index) => (
<a
key={index}
href={item.href}
className={`text-white hover:text-white text-base ${
className={`text-base text-white hover:text-white ${
activeIndex === index ? "border-b-2 border-white pb-[8px]" : ""
}`}
onClick={() => handleMenuClick(index)}
onClick={() => handleMenuClick(index, item.name)}
>
{item.name}
</a>
))}
</div>
<div className="navbar-menu hidden md:flex space-x-4 text-base">
<Link to={'/signin'} className="bg-opacity-0 text-white px-6 py-2 rounded-lg border-[1px] border-[#F3FAF9]">

{/* Sign In / Sign Up Buttons (Hidden on small screens) */}
<div className="navbar-menu hidden space-x-4 text-base md:flex">
<Link
to={"/signin"}
className="rounded-lg border-[1px] border-[#F3FAF9] bg-opacity-0 px-6 py-2 text-white"
>
Sign In
</Link>
<Link to={'/signin'} className="bg-[#389294] text-white px-6 py-2 rounded-lg border border-transparent">
<Link
to={"/signin"}
className="rounded-lg border border-transparent bg-[#389294] px-6 py-2 text-white"
>
Sign Up
</Link>
</div>
{/* Hamburger Icon */}
<button
className="md:hidden text-white focus:outline-none"
onClick={() => setIsOpen(!isOpen)}

{/* Hamburger Icon (Visible only on small screens) */}
<div
className=" text-white focus:outline-none md:hidden" // Show on small screens, hide on larger screens
onClick={() => setIsOpen(!isOpen)} // Toggle mobile menu visibility
>
<FaBars className="w-6 h-6" />
</button>
<FaBars className="h-8 w-8" />
</div>
</div>

{/* Mobile Menu */}
{/* Mobile Menu (Visible only on small screens) */}

<div
className={`${
isOpen ? "block" : "hidden"
} md:hidden flex flex-col space-y-2 p-4 bg-teal-600`}
isOpen ? "block" : "hidden" // Show or hide the mobile menu based on isOpen state
} flex flex-col space-y-2 bg-teal-600 p-4 md:hidden`} // Hide on larger screens
>
{menuItems.map((item, index) => (
<a
Expand All @@ -72,15 +112,23 @@ const Navbar = () => {
className={`text-white hover:text-gray-300 ${
activeIndex === index ? "border-b-2 border-white" : ""
}`}
onClick={() => handleMenuClick(index)}
onClick={() => handleMenuClick(index, item.name)}
>
{item.name}
</a>
))}
<button onClick={()=> navigate('/signin')} className="bg-white text-teal-600 px-4 py-2 rounded">

{/* Mobile version of Sign In / Sign Up buttons */}
<button
onClick={() => navigate("/signin")}
className="rounded bg-white px-4 py-2 text-teal-600"
>
Login
</button>
<button onClick={()=> navigate('/signin')} className="bg-teal-500 text-white px-4 py-2 rounded">
<button
onClick={() => navigate("/signin")}
className="rounded bg-teal-500 px-4 py-2 text-white"
>
Sign Up
</button>
</div>
Expand Down
13 changes: 3 additions & 10 deletions src/components/generalComponents/Sidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,7 @@ const Sidebar = () => {
const access = localStorage.getItem("accessToken");
const refresh = localStorage.getItem("refreshToken");

// console.log("acessToken" +access);
// console.log("refreshToken" +refresh);

// const newData = {
// refresh : refresh
// }
// console.log(newData);


const data = new FormData();
data.append("refresh", refresh);

Expand Down Expand Up @@ -83,8 +76,8 @@ try {
<span>Manage Properties</span>
</Link>
</li>
<li className="">
<Link className="flex items-center gap-3 py-[12px] pl-5 text-[20px] leading-[28px] tracking-[-0.75px]">
<li className={`${pathname.includes("/transactions") && "border-l-[4px] border-white bg-[#389294]"}`}>
<Link to={'/transactions'} className="flex items-center gap-3 py-[12px] pl-5 text-[20px] leading-[28px] tracking-[-0.75px]">
<img src={transactionsIcon} alt="" />
<span>Transactions</span>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/Features.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import image6 from '../../assets/Finances.png'

const Features = () => {
return (
<div className='bg-[#FCFDFD] '>
<div id="features" className='bg-[#FCFDFD] '>
<div className=' mx-20 xl:mx-36 mt-10'>
<EmblaCarousel />
<div className=' flex flex-col text-center items-center justify-center '>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/carousel/Testimonial.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Testimonial = () => {
};

return (
<div className='max-w-7xl mx-auto p-10'>
<div id="testimonials" className='max-w-7xl mx-auto p-10'>
<div className='mt-5'>
<Slider {...settings}>
{data.map((d, index) => (
Expand Down
15 changes: 10 additions & 5 deletions src/components/home/footer/footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import logo from '../../../assets/logos/logo.png'
import facebook from '../../../assets/icon/facebook.png'
import instagram from '../../../assets/icon/instagram.png'
import twitter from '../../../assets/icon/x.png'
import linkedIn from '../../../assets/icon/linkedin.png'
export default function Footer() {
return (
<footer>
<div className=' flex mx-10 lg:mx-20 justify-between mt-10 lg:mt-20 '>
<div className='items-center justify-center mx-auto'>
<img src='src/assets/logos/logo.png' alt='logo' className='w-32' />
<img src={logo} alt='logo' className='w-32' />
<p className=' font-normal text-base mt-3 space-y-3'>
Join a network of top real estate companies on our platform.
Advertise <br /> your properties and elevate your business with a
trusted partner.
</p>
<div className='flex space-x-4 mt-7'>
<img src='src/assets/icon/facebook.png' alt='facebook' />
<img src='src/assets/icon/instagram.png' alt='insta' />
<img src='src/assets/icon/linkedin.png' alt='linkedin' />
<img src='src/assets/icon/x.png' alt='twitter' />
<a href="https://web.facebook.com/profile.php?id=61566534966411" target='_blank'><img src={facebook} alt='facebook' /></a>
<img src={instagram} alt='insta' />
<a target='_blank' href="https://www.linkedin.com/posts/propertyhivehq_property-hive-activity-7249392696048439297-sbon?utm_source=share&utm_medium=member_android"><img src={linkedIn} alt='linkedin' /></a>
<a href="https://www.linkedin.com/company/propertyhivehq/" target="_blank" rel="noopener noreferrer"><img src={twitter} alt='twitter' /></a>
</div>
</div>
<div className='md:flex space-x-20 mt-14 hidden '>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/manage/Preview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Preview = () => {
formData.append('sellerId', 1);
formData.append('is_sold', false);
formData.append('common_propertyimages',data.propertyImage)
FormData.append("propertyImage", data.propertyImage)

Object.entries(data).forEach(([key, value]) => {
formData.append(key, value);
});
Expand All @@ -38,7 +38,7 @@ Object.entries(data).forEach(([key, value]) => {
<>
<h3 className='leading-[32px] tracking-[-1px] font-semibold text-[24px]'>Preview</h3>
<div>
{/* <div>
<div>
<div>
<div className='rounded-t-2xl'><img src={URL?.createObjectURL(data.propertyImage[0])} alt="" className='w-[1088px] h-[585px] object-cover rounded-t-2xl'/></div>
</div>
Expand All @@ -52,7 +52,7 @@ Object.entries(data).forEach(([key, value]) => {
<div className='w-[164px] h-[108px] rounded-lg'><img src={URL.createObjectURL(data?.propertyImage[5])} className='w-full h-full object-cover rounded-lg' alt="" /></div>
</div>

</div> */}
</div>

<div>
<span className='leading-[28px] tracking-[-0.75px] text-[20px]'>{data.propertyType}</span>
Expand Down

0 comments on commit fcb798c

Please sign in to comment.