mobile header styled + refactoring + our strory section on company

src/components/companyPage/OurStory.tsx

@@ -0,0 +1,87 @@
+const OurStory = () => {
+  return (
+    <div className="flex 2xl:pr-[285px] xl:pr-[128px] xl:flex-row flex-col xl:px-6 px-4">
+      <div className="xl:h-full uppercase text-[#73787C] font-semibold 2xl:w-[261px] xl:w-[208px] pb-3">
+        Our story
+      </div>
+      <div className="flex flex-col items-center w-full">
+        <div className="flex flex-col max-w-[1030px]">
+          <img
+            className="rounded-2xl"
+            src="./images/company/1.jpg"
+            alt="Company"
+            width={1030}
+            height={720}
+          />
+          <div className="flex gap-4 pt-6 2xl:pb-14 pb-10 xl:flex-row flex-col text-[#73787C]">
+            <p className="text-[#00BED7] font-semibold text-2xl">
+              IRTH is prominently positioned among the top tier establishments
+              in United Arab Emirates, a family backed investment company with
+              core values of trust, strength and agility.
+            </p>
+            <div className="flex xl:flex-col gap-4 xl:min-w-[375px] xl:max-w-[375px] text-sm sm:flex-row flex-col">
+              <p className="sm:w-1/2 xl:w-full">
+                IRTH embodies the essence of legacy, anchoring its roots in the
+                heart of a vibrant Dubai. As a part of a distinguished local
+                family conglomerate, our privately held real estate investment
+                platform draws strength from a heritage spanning over a century.
+              </p>
+              <p className="sm:w-1/2 xl:w-full">
+                At IRTH, our foundation is built upon three CORE values: Trust,
+                Strength, and Agility. These principles serve as our guiding
+                light, propelling us forward as a prominent player in the realm
+                of real estate investment. We proudly stand among the elite
+                establishments within the UAE, a testament to our unwavering
+                commitment to excellence.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="flex gap-4">
+              <img
+                src="./images/company/2.jpg"
+                alt="2"
+                className="rounded-2xl 2xl:w-[246px] 2xl:h-[302px] 2xl:max-w-[246px] 2xl:max-h-[302px] xl:min-w-[195px] xl:min-h-[240px] xl:max-w-[195px] xl:max-h-[240px] sm:w-[175px] sm:object-cover overflow-clip"
+                style={{ overflowClipMargin: "unset" }}
+              />
+              <img
+                src="./images/company/3.png"
+                alt="2"
+                className="rounded-2xl object-cover 2xl:h-[436px] 2xl:w-[768px] xl:w-full xl:h-[436px] h-full  sm:min-w-[200px] sm:min-h-[235px] sm:block hidden"
+              />
+            </div>
+            <div className="flex gap-4 text-[#73787C] text-sm sm:flex-row flex-col">
+              <div className="2xl:min-w-[246px] xl:min-w-[195px] xl:block hidden"></div>
+              <p className="2xl:w-1/2 xl:min-w-[397px] xl:max-w-[397px]">
+                Our influence extends even further through strategic
+                partnerships with esteemed local and international hospitality
+                brands, elevating our stature and enriching our portfolio. With
+                an unwavering dedication to investment, IRTH paves the way for a
+                diverse range of property ventures. Our footprint is set to
+                expand both within the dynamic landscapes of Dubai and across
+                international horizons. As we forge ahead, our legacy remains
+                intertwined with the enduring values of trust, strength, and
+                agility.
+              </p>
+              <p className="2xl:w-1/2 xl:w-full ">
+                The Alshamsi Family , the visionary founders behind IRTH, have
+                sown the seeds of a legacy that continues to flourish. Our story
+                is one of resilience, growth, and an unyielding pursuit of
+                excellence.
+              </p>
+            </div>
+            <div className="sm:hidden block">
+              <img
+                src="./images/company/3.png"
+                alt="2"
+                className="rounded-2xl object-cover h-[260px]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OurStory;

src/components/header/Auth/Auth.tsx

@@ -2,8 +2,11 @@ import { isMobile } from "react-device-detect";
 import AuthDesktop from "./AuthDesktop";
 import AuthMobile from "./AuthMobile";
 
-const Auth = () => {
-  const isAuth = false;
+interface AuthProps {
+  isAuth?: boolean;
+}
+
+const Auth = ({ isAuth = false }: AuthProps) => {
   const userName = "Name";
 
   return (

src/components/header/Auth/AuthMobile.tsx

@@ -7,18 +7,20 @@ interface AuthProps {
 
 const AuthMobile = ({ isAuth, userName }: AuthProps) => {
   return (
-    <div className="flex gap-4 p-4 text-black justify-center w-full items-center">
+    <>
       {isAuth ? (
-        <>
+        <div className="flex gap-4 text-black justify-start w-full items-center px-4 py-2 bg-white rounded-lg">
           <p>{userName}</p>
           <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
             {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
           </div>
-        </>
+        </div>
       ) : (
-        <Button buttonType="cta" text="Login" className="w-full" />
+        <div className="flex gap-4 text-black justify-center w-full items-center">
+          <Button buttonType="cta" text="Login" className="w-full" />
+        </div>
       )}
-    </div>
+    </>
   );
 };
 

src/components/header/Header/DesktopHeader.tsx

@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const DesktopHeader = () => (
-  <header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm font-usual">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />

src/components/header/Header/MobileHeader.tsx

@@ -6,35 +6,38 @@ import Location from "../Location";
 
 const MobileHeader = () => {
   const [isToggled, setIsToggled] = useState(false);
+  const isAuth = false;
 
   const handleOnToggleClick = () => {
     setIsToggled((prev) => !prev);
   };
   return (
     <header
-      className={`bg-white w-full text-white flex flex-col text-sm items-center transition-[height] duration-500 ease-in-out absolute top-0 left-0 z-30 overflow-hidden ${
-        isToggled ? "h-[472px]" : "h-14"
+      className={`bg-white w-full ${
+        isToggled
+          ? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
+          : ""
+      } text-white flex flex-col text-sm items-center transition-all duration-500 ease-in-out absolute top-0 left-0 z-30 overflow-hidden font-usual ${
+        isToggled ? "max-h-[472px]" : "max-h-14"
       }`}
     >
       <div className="flex justify-between w-full p-4">
-        <div
-          className={`text-[#0D1922] transition-opacity duration-500 ${
-            isToggled ? "opacity-0" : "opacity-100"
-          }`}
-        >
+        <div className={`text-[#0D1922] transition-opacity duration-500`}>
           <LogoIcon />
         </div>
         <div className="bg-black w-6 h-6" onClick={handleOnToggleClick}></div>
       </div>
-      <div className="flex flex-col justify-between h-full items-center w-full ">
-        <div className="flex flex-col gap-4">
-          <div className="text-[#0D1922] items-center">
-            <LogoIcon />
+      <div className="flex flex-col justify-between h-full items-end w-full p-4 bg-[#F3F3F2]">
+        {isAuth && (
+          <div className="pb-2 w-full">
+            <Auth isAuth={isAuth} />
           </div>
+        )}
+        <Navbar />
+        <div className="py-3">
           <Location />
         </div>
-        <Navbar />
-        <Auth />
+        {!isAuth && <Auth isAuth={isAuth} />}
       </div>
     </header>
   );

src/components/header/Navbar/Navbar.tsx

@@ -1,21 +1,40 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isMobile } from "react-device-detect";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Tab } from "../../../types/tab";
 import NavbarDesktop from "./NavbarDesktop";
 import NavbarMobile from "./NavbarMobile";
+import { tabs } from "../../../consts/tabs";
 
 const Navbar = () => {
   const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  const location = useLocation();
+  useEffect(() => {
+    const pathname = location.pathname;
+    const tab = tabs.find((tab) => tab.path === pathname);
+    const defaultTab = tabs[0];
+    if (tab) {
+      setSelectedTab(tab);
+    } else {
+      setSelectedTab(defaultTab);
+    }
+  }, [location.pathname]);
+  const navigate = useNavigate();
   const onTabClick = (tab: Tab) => {
     setSelectedTab(tab);
+    navigate(tab.path);
   };
 
   return (
     <>
       {isMobile ? (
-        <NavbarMobile selectedTab={selectedTab} onTabClick={onTabClick} />
+        <NavbarMobile onTabClick={onTabClick} tabs={tabs} />
       ) : (
-        <NavbarDesktop selectedTab={selectedTab} onTabClick={onTabClick} />
+        <NavbarDesktop
+          selectedTab={selectedTab}
+          onTabClick={onTabClick}
+          tabs={tabs}
+        />
       )}
     </>
   );

src/components/header/Navbar/NavbarDesktop.tsx

@@ -1,16 +1,16 @@
-import { tabs } from "../../../consts/tabs";
 import { Tab } from "../../../types/tab";
-import NavbarTab from "../NavbarTab";
+import NavbarTabDesktop from "./NavbarTabDesktop";
 
 interface NavbarProps {
   selectedTab: Tab | null;
   onTabClick: (tab: Tab) => void;
+  tabs: Tab[];
 }
 
-const NavbarDesktop = ({ selectedTab, onTabClick }: NavbarProps) => (
+const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
   <nav className={`text-[#73787C] self-center col-span-2 justify-center flex`}>
     {tabs.map((tab) => (
-      <NavbarTab
+      <NavbarTabDesktop
         key={tab.id}
         tab={tab}
         isSelected={selectedTab?.id === tab.id}

src/components/header/Navbar/NavbarMobile.tsx

@@ -1,23 +1,17 @@
-import { tabs } from "../../../consts/tabs";
 import { Tab } from "../../../types/tab";
-import NavbarTab from "../NavbarTab";
+import NavbarTabMobile from "./NavbarTabMobile";
 
 interface NavbarProps {
-  selectedTab: Tab | null;
   onTabClick: (tab: Tab) => void;
+  tabs: Tab[];
 }
 
-const NavbarMobile = ({ selectedTab, onTabClick }: NavbarProps) => (
+const NavbarMobile = ({ onTabClick, tabs }: NavbarProps) => (
   <nav
-    className={`text-[#73787C] self-center justify-center flex w-full flex-col items-center`}
+    className={`text-[#73787C] flex w-full flex-col bg-white rounded-lg px-4`}
   >
     {tabs.map((tab) => (
-      <NavbarTab
-        key={tab.id}
-        tab={tab}
-        isSelected={selectedTab?.id === tab.id}
-        onClick={onTabClick}
-      />
+      <NavbarTabMobile key={tab.id} tab={tab} onClick={onTabClick} />
     ))}
   </nav>
 );

src/components/header/Navbar/NavbarTabDesktop.tsx

@@ -1,4 +1,4 @@
-import { Tab } from "../../types/tab";
+import { Tab } from "../../../types/tab";
 
 interface NavbarTabProps {
   tab: Tab;
@@ -6,7 +6,11 @@ interface NavbarTabProps {
   onClick: (tab: Tab) => void;
 }
 
-const NavbarTab = ({ tab, onClick, isSelected = false }: NavbarTabProps) => {
+const NavbarTabDesktop = ({
+  tab,
+  onClick,
+  isSelected = false,
+}: NavbarTabProps) => {
   return (
     <button
       className="px-4 text-[#73787C] hover:text-black relative w-fit"
@@ -30,4 +34,4 @@ const NavbarTab = ({ tab, onClick, isSelected = false }: NavbarTabProps) => {
   );
 };
 
-export default NavbarTab;
+export default NavbarTabDesktop;

src/components/header/Navbar/NavbarTabMobile.tsx

@@ -0,0 +1,30 @@
+import { Tab } from "../../../types/tab";
+import RightArrowIcon from "../../icons/RightArrowIcon";
+
+interface NavbarTabProps {
+  tab: Tab;
+  onClick: (tab: Tab) => void;
+}
+
+const NavbarTabMobile = ({ tab, onClick }: NavbarTabProps) => {
+  return (
+    <button className="w-full border-b last:border-b-0 flex justify-between py-4 ">
+      <div
+        className=" text-[#0D1922] relative w-fit"
+        onClick={() => onClick(tab)}
+      >
+        <div className={` transition-all duration-300`}>{tab.value}</div>
+        {tab.count !== 0 && (
+          <div className="absolute top-0 -right-4 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center">
+            {tab.count}
+          </div>
+        )}
+      </div>
+      <div className="text-[#73787C]">
+        <RightArrowIcon />
+      </div>
+    </button>
+  );
+};
+
+export default NavbarTabMobile;

src/components/icons/RightArrowIcon.tsx

@@ -0,0 +1,21 @@
+const RightArrowIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.50018 15.8331L13.3335 9.99982L7.50018 4.1665"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RightArrowIcon;

src/components/map/Marker.tsx

@@ -19,7 +19,7 @@ const Marker = (props: MarkerComponentProps) => {
 
   return (
     <div
-      className={`flex gap-1 transition-all duration-300 ease-in-out ${
+      className={`flex gap-1 transition-all duration-300 ease-in-out  ${
         hoveredMarker && hoveredMarker.itemNumber !== currentMarker?.itemNumber
           ? "brightness-[.7]"
           : ""

src/consts/tabs.tsx

@@ -5,21 +5,25 @@ const tabs: Tab[] = [
     value: "Masterplan",
     id: "1",
     count: 0,
+    path: "/masterplan",
   },
   {
     value: "Search",
     id: "2",
     count: 0,
+    path: "/search",
   },
   {
     value: "Favorites",
     id: "3",
     count: 3,
+    path: "/favorites",
   },
   {
     value: "Company",
     id: "4",
     count: 0,
+    path: "/company",
   },
 ];
 

src/index.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  background-color: #f3f3f2;
+}
+
+.font-usual {
+  font-family: "Usual", sans-serif;
+}
+
+.font-mixcase {
+  font-family: "Mixcase", sans-serif;
+}

src/main.tsx

@@ -1,7 +1,8 @@
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Header from "./components/header/Header/Header";
-import Main from "./pages/Main";
+import Masterplan from "./pages/Masterplan";
+import Company from "./pages/Company";
 import "./index.css";
 
 const router = createBrowserRouter([
@@ -11,7 +12,15 @@ const router = createBrowserRouter([
     children: [
       {
         path: "/",
-        element: <Main />,
+        element: <Masterplan />,
+      },
+      {
+        path: "/masterplan",
+        element: <Masterplan />,
+      },
+      {
+        path: "/company",
+        element: <Company />,
       },
     ],
   },

src/pages/Company.tsx

@@ -0,0 +1,16 @@
+import { isMobile } from "react-device-detect";
+import OurStory from "../components/companyPage/OurStory";
+
+const Company = () => {
+  return (
+    <section className={`xl:py-16 py-10 font-usual ${isMobile ? "pt-24" : ""}`}>
+      <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
+        IRTH is a privately held real estate investment platform part of a large
+        local family conglomerate from Dubai
+      </h1>
+      <OurStory />
+    </section>
+  );
+};
+
+export default Company;

src/pages/Masterplan.tsx

@@ -3,7 +3,7 @@ import useModal from "../store/useModal";
 import ZoomHint from "../components/modals/ZoomHint";
 import Map from "../components/map/Map";
 
-const Main = () => {
+const Masterplan = () => {
   const { setModal } = useModal();
   useEffect(() => {
     setModal(<ZoomHint />);
@@ -16,4 +16,4 @@ const Main = () => {
   );
 };
 
-export default Main;
+export default Masterplan;

src/types/tab.ts

@@ -2,6 +2,7 @@ interface Tab {
   value: string;
   id: string;
   count: number;
+  path: string;
 }
 
 export type { Tab };