adaptive footer

src/components/Footer.tsx

@@ -1,5 +1,4 @@
-import clsx from "clsx";
-import { Link, useLocation } from "react-router";
+import { Link } from "react-router";
 import YoutubeIcon from "./icons/YoutubeIcon";
 import InstagramIcon from "./icons/InstagramIcon";
 import FacebookIcon from "./icons/FacebookIcon";
@@ -7,89 +6,102 @@ import LinkedInIcon from "./icons/LinkedInIcon";
 import TwitterIcon from "./icons/TwitterIcon";
 
 function Footer() {
-  const { pathname } = useLocation();
-
   return (
-    <div
-      className={clsx(
-        "lg:px-[2.222vw] lg:pb-[2.222vw] lg:pt-[2.778vw] md:max-lg:p-6 px-4 py-6 flex lg:gap-[1.667vw] gap-6 lg:rounded-[1.667vw] rounded-3xl border border-[#E2E2DC] max-lg:hidden",
-        (pathname === "/" || pathname.startsWith("/complex")) && "hidden"
-      )}
-    >
-      <div className="space-y-14 flex-1">
-        <img src="/images/logo.svg" className="lg:w-[5.972vw]" alt="" />
-        <div className="flex lg:gap-[2.778vw] gap-10">
-          <p className="lg:max-w-[17.083vw] text-s text-[#0D1922]/40">
-            For more information, visit our website: 
-            <Link
-              className="text-[#00BED7] underline"
-              to={"https://www.irth.ae"}
-            >
-              www.irth.ae
-            </Link>
-          </p>
-          <div className="lg:space-y-[0.833vw] space-y-3">
-            <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
-            <div className="flex lg:gap-[0.278vw] gap-1">
-              <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-                <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
-                  <YoutubeIcon />
-                </div>
-              </div>
-              <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-                <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
-                  <InstagramIcon />
-                </div>
-              </div>
-              <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-                <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
-                  <FacebookIcon />
-                </div>
-              </div>
-              <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-                <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
-                  <LinkedInIcon />
-                </div>
-              </div>
-              <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-                <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
-                  <TwitterIcon />
-                </div>
-              </div>
+    <footer className="lg:px-[2.222vw] lg:pb-[2.222vw] lg:pt-[2.778vw] md:max-lg:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 lg:grid-rows-2 lg:gap-x-[1.667vw] lg:gap-y-[1.111vw] max-lg:gap-y-6 lg:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
+      <img
+        src="/images/logo.svg"
+        className="lg:w-[5.972vw] w-[86px] cursor-pointer"
+        onClick={() => {
+          window.location.href = "/";
+        }}
+        alt="IRTH"
+      />
+
+      <p className="lg:max-w-[17.083vw] text-s text-[#0D1922]/40 lg:col-start-1 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-2 max-md:row-start-3 max-lg:pt-4 max-lg:border-t border-[#E2E2DC]">
+        For more information, visit
+        <br />
+        our website: 
+        <Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
+          www.irth.ae
+        </Link>
+      </p>
+
+      <div className="lg:space-y-[0.833vw] space-y-3 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-3 max-md:row-start-4 max-lg:mb-9">
+        <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
+        <div className="flex lg:gap-[0.278vw] gap-1">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+              <YoutubeIcon />
+            </div>
+          </div>
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+              <InstagramIcon />
+            </div>
+          </div>
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+              <FacebookIcon />
+            </div>
+          </div>
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+              <LinkedInIcon />
+            </div>
+          </div>
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+              <TwitterIcon />
             </div>
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-3 lg:gap-[1.667vw] gap-6 flex-1">
-        <div className="lg:border-l-[0.069vw] border-l border-[#E2E2DC] lg:pl-[1.111vw] pl-4 flex flex-col">
-          <Link to={"/"} className="text-m flex-1 content-center">
-            Map
-          </Link>
-          <Link to={"/unit-types"} className="text-m flex-1 content-center">
-            Unit Types
-          </Link>
-          <Link to={"/about-irth"} className="text-m flex-1 content-center">
-            About IRTH
-          </Link>
-        </div>
-        <div className="lg:border-l-[0.069vw] border-l border-[#E2E2DC] lg:pl-[1.111vw] pl-4 flex flex-col">
-          <Link to={"/favorites"} className="text-m flex-1 content-center">
-            Favorites
-          </Link>
-          <Link to={"/search"} className="text-m flex-1 content-center">
-            Search
-          </Link>
-          <Link to={"/"} className="text-m flex-1 content-center">
-            Brochures
-          </Link>
-        </div>
-        <div className="content-end text-right">
-          <Link to={"/"} className="text-m">
-            Privacy Policy
-          </Link>
-        </div>
+
+      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-4 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-4 col-start-1 max-lg:pt-4 max-lg:border-t">
+        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
+          Map
+        </Link>
+        <Link
+          to={"/unit-types"}
+          className="text-m flex-1 content-center max-lg:py-2.5"
+        >
+          Unit Types
+        </Link>
+        <Link
+          to={"/about-irth"}
+          className="text-m flex-1 content-center max-lg:py-2.5"
+        >
+          About IRTH
+        </Link>
       </div>
-    </div>
+
+      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-5 lg:row-start-1 lg:row-span-2 max-lg:col-span-2 max-lg:pt-4 max-lg:border-t">
+        <Link
+          to={"/favorites"}
+          className="text-m flex-1 content-center max-lg:py-2.5"
+        >
+          Favorites
+        </Link>
+        <Link
+          to={"/search"}
+          className="text-m flex-1 content-center max-lg:py-2.5"
+        >
+          Search
+        </Link>
+        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
+          Brochures
+        </Link>
+      </div>
+
+      <div className="content-end lg:text-right lg:col-start-6 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-1 md:max-lg:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
+        <Link
+          to={"/"}
+          className="lg:text-caption-m text-caption-s max-lg:text-[#73787C]"
+        >
+          Privacy Policy
+        </Link>
+      </div>
+    </footer>
   );
 }
 

src/components/Header.tsx

@@ -3,6 +3,8 @@ import LocationIcon from "./icons/LocationIcon";
 import clsx from "clsx";
 import ArrowDownIcon from "./icons/ArrowDownIcon";
 import { useState } from "react";
+import Button from "./ui/Button";
+import BurgerIcon from "./icons/BurgerIcon";
 
 function Header() {
   function handleLogoClick() {
@@ -10,7 +12,7 @@ function Header() {
   }
 
   return (
-    <div className="sticky top-0 left-0 w-full h-[3.889vw] max-lg:h-14 max-md:h-16 flex items-center justify-center bg-white">
+    <div className="sticky top-0 left-0 w-full h-[3.889vw] max-lg:h-14 max-md:h-16 flex items-center justify-center bg-white outline outline-[#E2E2DC]">
       <div className="flex lg:gap-[1.111vw] gap-4 flex-1">
         <div
           className="lg:px-[1.667vw] lg:py-[1.111vw] md:max-lg:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
@@ -30,7 +32,9 @@ function Header() {
         </div>
       </div>
       <NavBar />
-      <div className="flex-1"></div>
+      <div className="flex-1 flex justify-end">
+        <ProfileBar />
+      </div>
     </div>
   );
 }
@@ -39,7 +43,7 @@ export default Header;
 
 function NavBar() {
   return (
-    <>
+    <div className="max-lg:order-2">
       <nav className="flex lg:gap-[0.556vw] gap-2 items-center max-lg:hidden">
         <NavItem href={"/"} title={"Map"} />
         <NavItem href={"/unit-types"} title={"Unit Types"} />
@@ -48,7 +52,17 @@ function NavBar() {
         <BrochuresDropdown />
         <NavItem href={"/search"} title={"Search"} />
       </nav>
-    </>
+      <Button
+        onlyIcon
+        variant="secondary"
+        size="small"
+        className="lg:hidden !outline !outline-[#E2E2DC] mr-4"
+      >
+        <span className="w-5 h-5 text-[#0D1922]">
+          <BurgerIcon />
+        </span>
+      </Button>
+    </div>
   );
 }
 
@@ -68,6 +82,14 @@ function NavItem({ href, title }: { href: string; title: string }) {
   );
 }
 
+function ProfileBar() {
+  return (
+    <Button className="!bg-[#F3F3F2] lg:mr-[2.222vw] mr-4" variant="secondary">
+      Login
+    </Button>
+  );
+}
+
 function BrochuresDropdown() {
   const [opened, setOpened] = useState(false);
 

src/components/Map.tsx

@@ -17,7 +17,7 @@ import { isMobile } from "react-device-detect";
 import SelectedComplexCard from "./SelectedComplexCard";
 import FullScreenButton from "./FullScreenButton";
 import useWindowSize from "../hooks/useWindowSize";
-import TouchIcon from "./icons/TouchIcon";
+import TouchIcon from "./icons/map/TouchIcon";
 
 interface Position {
   x: number;
@@ -540,10 +540,10 @@ function Map({ maxZoom = 1 }: MapProps) {
     let lastTimestamp = performance.now();
 
     function animateClouds(now: number) {
-      const delta = (now - lastTimestamp) / 100;
+      const delta = (now - lastTimestamp) / 200;
       lastTimestamp = now;
       setCloudOffset((prev) => {
-        let next = prev + (windSpeed * delta) / 10;
+        let next = prev + windSpeed * delta;
         if (cloudImageWidth > 0 && next > 0) next -= cloudImageWidth;
         return next;
       });
@@ -561,7 +561,7 @@ function Map({ maxZoom = 1 }: MapProps) {
   return (
     <div
       ref={containerRef}
-      className="relative h-full overflow-hidden select-none"
+      className="relative h-full overflow-hidden select-none touch-none"
       style={{ cursor: isDragging ? "grabbing" : "grab" }}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
@@ -606,7 +606,7 @@ function Map({ maxZoom = 1 }: MapProps) {
         )}
       >
         <div
-          className="h-full flex transition-transformduration-300"
+          className="h-full flex transition-[translate]"
           style={{
             rotate: `${90 + windDirection}deg`,
             transform: `translateX(${Math.round(

src/components/SequenceSlider.tsx

@@ -204,7 +204,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("prev")}
           >
-            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
               <ArrowLeftIcon />
             </span>
           </Button>
@@ -216,7 +216,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("next")}
           >
-            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
               <ArrowRightIcon />
             </span>
           </Button>

src/components/icons/BurgerIcon.tsx

@@ -0,0 +1,14 @@
+function BurgerIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.75 17a.75.75 0 0 1-.75.75H5a.75.75 0 0 1 0-1.5h14a.75.75 0 0 1 .75.75m0-5a.75.75 0 0 1-.75.75H5a.75.75 0 0 1 0-1.5h14a.75.75 0 0 1 .75.75m0-5a.75.75 0 0 1-.75.75H5a.75.75 0 0 1 0-1.5h14a.75.75 0 0 1 .75.75"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default BurgerIcon;

src/layout/DefaultLayout.tsx

@@ -4,7 +4,7 @@ import Footer from "../components/Footer";
 
 function DefaultLayout() {
   return (
-    <div className="select-none touch-none">
+    <div className="select-none flex flex-col">
       <Header />
       <div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
         <Outlet />

src/layout/LayoutWithoutFooter.tsx

@@ -0,0 +1,15 @@
+import Header from "../components/Header";
+import { Outlet } from "react-router";
+
+function LayoutWithoutFooter() {
+  return (
+    <div className="select-none flex flex-col">
+      <Header />
+      <div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export default LayoutWithoutFooter;

src/main.tsx

@@ -1,6 +1,5 @@
-// import { QueryClientProvider } from "@tanstack/react-query";
-import { createRoot } from "react-dom/client";
 import "./index.css";
+import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router";
 import DefaultLayout from "./layout/DefaultLayout.tsx";
 import MainPage from "./pages/MainPage.tsx";
@@ -11,23 +10,12 @@ import UnitTypesPage from "./pages/UnitTypesPages.tsx";
 import AboutPage from "./pages/AboutPages.tsx";
 import FavouritesPage from "./pages/FavouritesPage.tsx";
 import SearchPage from "./pages/SearchPage.tsx";
+import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
 
 const route = createBrowserRouter([
   {
     element: <DefaultLayout />,
     children: [
-      {
-        path: "/",
-        element: <MainPage />,
-      },
-      {
-        path: "/complex/:complexName",
-        element: <ComplexPage />,
-      },
-      {
-        path: "/complex/:complexName/floors",
-        element: <FloorsPage />,
-      },
       {
         path: "/unit-types",
         element: <UnitTypesPage />,
@@ -46,13 +34,28 @@ const route = createBrowserRouter([
       },
     ],
   },
+  {
+    element: <LayoutWithoutFooter />,
+    children: [
+      {
+        path: "/",
+        element: <MainPage />,
+      },
+      {
+        path: "/complex/:complexName",
+        element: <ComplexPage />,
+      },
+      {
+        path: "/complex/:complexName/floors",
+        element: <FloorsPage />,
+      },
+    ],
+  },
 ]);
 
 createRoot(document.getElementById("root")!).render(
   <>
-    {/* <QueryClientProvider client={}> */}
     <RouterProvider router={route} />
     <ModalContainer />
-    {/* </QueryClientProvider> */}
   </>
 );