upd

2024-08-19 20:22:59 +05:00
parent f05047910b
commit b67d789e88
19 changed files with 628 additions and 58 deletions
@@ -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;