upd

2024-08-19 20:22:59 +05:00
parent f05047910b
commit b67d789e88
19 changed files with 628 additions and 58 deletions
@@ -5,6 +5,7 @@ interface Props {
  icon?: JSX.Element;
  onlyIcon?: boolean;
  children?: React.ReactNode;
+  className?: string;
  onClick?: () => void;
 }

@@ -26,13 +27,16 @@ function Button2({
  icon,
  onlyIcon = false,
  children,
+  className,
  onClick,
 }: Props) {
  return (
    <button
      className={`flex items-center transition-colors w-fit ${
        variantClasses[variant]
-      } ${sizeClasses[size]} ${roundedFull ? "rounded-full" : "rounded-lg"} `}
+      } ${sizeClasses[size]} ${
+        roundedFull ? "rounded-full" : "rounded-lg"
+      } ${className}`}
      onClick={onClick}
    >
      {onlyIcon ? (
@@ -8,11 +8,13 @@ import SocialButton from "./SocialButton";

 function Footer2() {
  return (
-    <div className="bg-white p-10 rounded-t-2xl">
-      <div className="grid grid-cols-2 gap-4">
-        <div className="flex flex-col justify-between">
-          <Logo2Icon />
-          <div className="flex gap-10">
+    <div className="relative bg-white lg:p-10 px-4 py-8 rounded-t-2xl">
+      <div className="absolute top-0 left-0 lg:p-10 px-4 py-8">
+        <Logo2Icon />
+      </div>
+      <div className="grid lg:grid-cols-2 gap-4 lg:w-full sm:w-1/2 w-full ml-auto max-sm:py-12">
+        <div className="flex flex-col justify-between self-end max-lg:order-last">
+          <div className="flex max-lg:flex-col lg:gap-10 gap-6">
            <p className="text-[#0D192266] text-sm">
              For more information, visit our
              <br />
@@ -52,24 +54,23 @@ function Footer2() {
            </div>
          </div>
        </div>
-        <div className="grid grid-cols-3 gap-4">
-          <div className="border-l border-[#E2E2DC] px-6 py-3.5 flex flex-col items-start gap-6">
+        <div className="grid lg:grid-cols-3 grid-cols-2 gap-4 max-lg:border-y border-[#E2E2DC] max-lg:py-3 max-lg:text-sm">
+          <div className="lg:border-l border-[#E2E2DC] lg:px-6 py-3.5 flex flex-col items-start lg:gap-6 gap-5">
            <a href="/masterplan">Map</a>
            <a href="/unit-types">Unit Types</a>
            <a href="/about">About IRTH</a>
          </div>
-          <div className="border-l border-[#E2E2DC] px-6 py-3.5 flex flex-col items-start gap-6">
+          <div className="lg:border-l border-[#E2E2DC] lg:px-6 py-3.5 flex flex-col items-start lg:gap-6 gap-5">
            <a href="/favorites">Favorites</a>
            <a href="/search">Search</a>
-            {/* <a href="#">Brochures</a> */}
-          </div>
-          <div className="px-2.5 py-1 flex flex-col items-end justify-end gap-6">
-            <a href="#" className="text-xs font-semibold">
-              Privacy Policy
-            </a>
          </div>
        </div>
      </div>
+      <div className="absolute bottom-0 lg:right-0 max-lg:left-0 flex flex-col items-end justify-end lg:p-10 px-4 py-8">
+        <a href="#" className="text-xs font-semibold">
+          Privacy Policy
+        </a>
+      </div>
    </div>
  );
 }
@@ -0,0 +1,82 @@
+import { NavLink } from "react-router-dom";
+import LocationIcon from "./icons/LocationIcon";
+import Logo2Icon from "./icons/Logo2Icon";
+import Button2 from "./Button2";
+import BurgerIcon from "./icons/activities/BurgerIcon";
+import useModal from "../store/useModal";
+import NavbarModal from "./modals/NavbarModal";
+import { useState } from "react";
+import CloseIcon from "./icons/CloseIcon";
+
+function Header() {
+  const [showNavbar, setShowNavbar] = useState<boolean>(false);
+  const { setModal } = useModal();
+
+  function handleClick() {
+    setShowNavbar((prev) => !prev);
+
+    if (!showNavbar) {
+      setModal(<NavbarModal />);
+    } else {
+      setModal(null);
+    }
+  }
+
+  return (
+    <div className="fixed top-0 left-0 w-full flex justify-between bg-white z-50">
+      <div className="flex">
+        <div className="px-6 py-4 border-r border-[#E2E2DC]">
+          <Logo2Icon />
+        </div>
+        <div className="text-[#0D192266] flex gap-1 items-center px-4 py-[18px]">
+          <LocationIcon className="w-5 h-5" />
+          <p className="text-sm">Dubai</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-1 max-xl:hidden">
+        <NavLink to="/masterplan" className="p-4">
+          Map
+        </NavLink>
+        <div className="w-px h-3 bg-[#E2E2DC]"></div>
+        <NavLink to="/unit-types" className="p-4">
+          Unit Types
+        </NavLink>
+        <div className="w-px h-3 bg-[#E2E2DC]"></div>
+        <NavLink to="/about" className="p-4">
+          About IRTH
+        </NavLink>
+        <div className="w-px h-3 bg-[#E2E2DC]"></div>
+        <NavLink to="/favorites" className="p-4">
+          Favorites
+        </NavLink>
+        <div className="w-px h-3 bg-[#E2E2DC]"></div>
+        <NavLink to="#" className="p-4">
+          Brochures
+        </NavLink>
+        <div className="w-px h-3 bg-[#E2E2DC]"></div>
+        <NavLink to="/search" className="p-4">
+          Search
+        </NavLink>
+      </div>
+      <div className="w-[230px]"></div>
+      <div className="xl:hidden px-4 py-2">
+        <Button2
+          variant="secondary"
+          size="small"
+          icon={
+            showNavbar ? (
+              <CloseIcon className="w-5 h-5" />
+            ) : (
+              <BurgerIcon className="w-5 h-5" />
+            )
+          }
+          onlyIcon
+          className="ring-1 ring-[#E2E2DC]"
+          onClick={handleClick}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Header;
@@ -0,0 +1,15 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
+export default ScrollToTop;
@@ -1,20 +1,25 @@
-const LocationIcon = () => {
+interface Props {
+  className?: string;
+}
+
+function LocationIcon({ className }: Props) {
  return (
    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      className={className}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M4.16675 8.125C4.16675 7.38632 4.31763 6.65486 4.61078 5.97241C4.90394 5.28995 5.33362 4.66985 5.87529 4.14752C6.41697 3.6252 7.06003 3.21086 7.76776 2.92818C8.47549 2.6455 9.23404 2.5 10.0001 2.5C10.7661 2.5 11.5247 2.64549 12.2324 2.92818C12.9401 3.21086 13.5832 3.62519 14.1249 4.14752C14.6665 4.66985 15.0962 5.28995 15.3894 5.97241C15.6825 6.65486 15.8334 7.38631 15.8334 8.125C15.8334 12.2469 12.7012 15.3619 11.0271 16.7324C10.4211 17.2286 9.57906 17.2286 8.97304 16.7324C7.299 15.3619 4.16675 12.2469 4.16675 8.125ZM10.0001 11.6667C11.841 11.6667 13.3334 10.1743 13.3334 8.33333C13.3334 6.49238 11.841 5 10.0001 5C8.15913 5 6.66675 6.49238 6.66675 8.33333C6.66675 10.1743 8.15913 11.6667 10.0001 11.6667Z"
+        d="M5 9.75C5 8.86358 5.18106 7.98584 5.53284 7.16689C5.88463 6.34794 6.40024 5.60382 7.05025 4.97703C7.70026 4.35023 8.47194 3.85303 9.32122 3.51381C10.1705 3.17459 11.0807 3 12 3C12.9193 3 13.8295 3.17459 14.6788 3.51381C15.5281 3.85303 16.2997 4.35023 16.9497 4.97703C17.5998 5.60382 18.1154 6.34794 18.4672 7.16689C18.8189 7.98583 19 8.86358 19 9.75C19 14.8652 14.9802 18.6882 13.033 20.2401C12.4205 20.7282 11.5795 20.7282 10.967 20.2401C9.01984 18.6882 5 14.8652 5 9.75ZM12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14Z"
        fill="currentColor"
      />
    </svg>
  );
-};
+}

 export default LocationIcon;
@@ -0,0 +1,37 @@
+interface Props {
+  className?: string;
+}
+
+function BurgerIcon({ className }: Props) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.75 17C19.75 17.4142 19.4142 17.75 19 17.75L5 17.75C4.58579 17.75 4.25 17.4142 4.25 17C4.25 16.5858 4.58579 16.25 5 16.25L19 16.25C19.4142 16.25 19.75 16.5858 19.75 17Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.75 12C19.75 12.4142 19.4142 12.75 19 12.75L5 12.75C4.58579 12.75 4.25 12.4142 4.25 12C4.25 11.5858 4.58579 11.25 5 11.25L19 11.25C19.4142 11.25 19.75 11.5858 19.75 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.75 7C19.75 7.41421 19.4142 7.75 19 7.75L5 7.75C4.58579 7.75 4.25 7.41421 4.25 7C4.25 6.58579 4.58579 6.25 5 6.25L19 6.25C19.4142 6.25 19.75 6.58579 19.75 7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default BurgerIcon;
@@ -0,0 +1,113 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from "react";
+import DownloadIcon from "../icons/DownloadIcon";
+
+function NavbarModal() {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  return (
+    <div className="fixed top-[56px] left-0 w-full h-[calc(100vh-56px)] bg-[#F3F3F2] z-50 sm:p-4 p-3 space-y-4 overflow-y-auto">
+      <div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
+        <div className="flex flex-col gap-2">
+          <a
+            href="/masterplan"
+            className="p-4 bg-white rounded-lg text-[#0D1922]"
+          >
+            Map
+          </a>
+          <a
+            href="/unit-types"
+            className="p-4 bg-white rounded-lg text-[#0D1922]"
+          >
+            Unit Types
+          </a>
+          <a href="/about" className="p-4 bg-white rounded-lg text-[#0D1922]">
+            About IRTH
+          </a>
+        </div>
+        <div className="flex flex-col gap-2">
+          <a
+            href="/favorites"
+            className="p-4 bg-white rounded-lg text-[#0D1922]"
+          >
+            Favorites
+          </a>
+          <a href="/search" className="p-4 bg-white rounded-lg text-[#0D1922]">
+            Search
+          </a>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <p className="font-semibold text-[#0D1922]">Brochures</p>
+        <div className="grid sm:grid-cols-2 gap-4">
+          <div className="space-y-3">
+            <p className="text-sm text-[#0D1922]">Rove Home Marasi Drive</p>
+            <div className="flex flex-col gap-2">
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Main Brochure</p>
+                <DownloadIcon />
+              </a>
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Amenties Brochure</p>
+                <DownloadIcon />
+              </a>
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Technical Brochure</p>
+                <DownloadIcon />
+              </a>
+            </div>
+          </div>
+          <div className="space-y-3">
+            <p className="text-sm text-[#0D1922]">Rove Home Downtown</p>
+            <div className="flex flex-col gap-2">
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Main Brochure</p>
+                <DownloadIcon />
+              </a>
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Amenties Brochure</p>
+                <DownloadIcon />
+              </a>
+              <a
+                href="#"
+                className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
+                download
+              >
+                <p>Rove Technical Brochure</p>
+                <DownloadIcon />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NavbarModal;