diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..3c20050 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,96 @@ +import clsx from "clsx"; +import { Link, useLocation } from "react-router"; +import YoutubeIcon from "./icons/YoutubeIcon"; +import InstagramIcon from "./icons/InstagramIcon"; +import FacebookIcon from "./icons/FacebookIcon"; +import LinkedInIcon from "./icons/LinkedInIcon"; +import TwitterIcon from "./icons/TwitterIcon"; + +function Footer() { + const { pathname } = useLocation(); + + return ( +
+
+ +
+

+ For more information, visit our website:  + + www.irth.ae + +

+
+

Follow us for more:

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ + Map + + + Unit Types + + + About IRTH + +
+
+ + Favorites + + + Search + + + Brochures + +
+
+ + Privacy Policy + +
+
+
+ ); +} + +export default Footer; diff --git a/src/components/FullScreenButton.tsx b/src/components/FullScreenButton.tsx index 5589f9c..a4d07e7 100644 --- a/src/components/FullScreenButton.tsx +++ b/src/components/FullScreenButton.tsx @@ -34,7 +34,7 @@ function FullScreenButton({ onlyIcon size="small" variant="secondary" - className="absolute lg:top-[1.667vw] lg:right-[1.667vw] top-4 right-4 z-10" + className="absolute lg:top-[1.667vw] lg:right-[1.667vw] top-4 right-4" onClick={handleClick} > diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 532e1e8..977c416 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,4 +1,8 @@ +import { NavLink } from "react-router"; import LocationIcon from "./icons/LocationIcon"; +import clsx from "clsx"; +import ArrowDownIcon from "./icons/ArrowDownIcon"; +import { useState } from "react"; function Header() { function handleLogoClick() { @@ -6,10 +10,10 @@ function Header() { } return ( -
-
+
+
Dubai

-
-
+ +
); } export default Header; + +function NavBar() { + return ( + <> + + + ); +} + +function NavItem({ href, title }: { href: string; title: string }) { + return ( + + clsx( + "text-m lg:px-[1.25vw] lg:py-[0.903vw] px-4.5 py-[13px] lg:rounded-[0.833vw] rounded-xl transition-colors duration-300", + isActive && "bg-[#00BED7] text-[#FFFFFF]" + ) + } + > + {title} + + ); +} + +function BrochuresDropdown() { + const [opened, setOpened] = useState(false); + + return ( +
+ +
+ ); +} diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 632f016..bd2132a 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -17,6 +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"; interface Position { x: number; @@ -589,7 +590,6 @@ function Map({ maxZoom = 1 }: MapProps) { onLoad={handleLoad} /> )} -
-
-
{markers.map((marker) => ( @@ -644,44 +642,61 @@ function Map({ maxZoom = 1 }: MapProps) { ))}
- - - {isShowInstruction && ( - -
-
- -
- + {isShowInstruction && + (isMobile ? ( + +
+
+ + + +
+ + + +
+

Tap to move

-
+ + ) : ( + +
+
+ + + +
+ + + +

Zoom and Move to select a location

-
- - )} + + ))} - -
- - {isMobile && hoveredMarker && ( diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index d3468b1..05836b1 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -29,13 +29,6 @@ function ModalContainer() { const rootRef = useRef(null); - // useEffect(() => { - // if (!rootRef.current || !modal) return; - // if (document.fullscreenElement) { - // rootRef.current?.requestFullscreen(); - // } - // }, [modal]); - useEffect(() => { window.addEventListener("resize", handleResize); window.addEventListener("keydown", handleKeydown); @@ -77,7 +70,7 @@ function ModalContainer() { {modal} diff --git a/src/components/SelectedComplexCard.tsx b/src/components/SelectedComplexCard.tsx index 8451bbd..410a7c2 100644 --- a/src/components/SelectedComplexCard.tsx +++ b/src/components/SelectedComplexCard.tsx @@ -59,7 +59,6 @@ export default function SelectedComplexCard({ marker }: { marker: IMarker }) { variant="tertiary" size="small" className="w-fit" - // onClick={() => navigate(`/complex/${marker.name}`)} onTouchStart={() => navigate(`/complex/${marker.name}`)} > Explore diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx index 48264ea..0fa8603 100644 --- a/src/components/SequenceSlider.tsx +++ b/src/components/SequenceSlider.tsx @@ -12,6 +12,7 @@ import InfoIcon from "./icons/InfoIcon"; import FullScreenButton from "./FullScreenButton"; import BottomButton from "./DisclaimerButton"; import PrivacyPolicyButton from "./PrivacyPolicyButton"; +import DisclaimerButton from "./DisclaimerButton"; interface SequenceSliderProps { complexName: string; @@ -198,7 +199,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) { +
+ +
+ + +
+
)} -
- -
- - -
-
); } diff --git a/src/components/WeatherWidget.tsx b/src/components/WeatherWidget.tsx index 89a22cf..ad39391 100644 --- a/src/components/WeatherWidget.tsx +++ b/src/components/WeatherWidget.tsx @@ -18,7 +18,7 @@ export default function WeatherWidget({ const formattedTime = `${hours}:${minutes}`; return ( -
+

{day}

diff --git a/src/components/icons/ArrowDownIcon.tsx b/src/components/icons/ArrowDownIcon.tsx new file mode 100644 index 0000000..6fc90ca --- /dev/null +++ b/src/components/icons/ArrowDownIcon.tsx @@ -0,0 +1,14 @@ +function ArrowDownIcon() { + return ( + + + + ); +} + +export default ArrowDownIcon; diff --git a/src/components/icons/FacebookIcon.tsx b/src/components/icons/FacebookIcon.tsx new file mode 100644 index 0000000..6a79d5d --- /dev/null +++ b/src/components/icons/FacebookIcon.tsx @@ -0,0 +1,12 @@ +function FacebookIcon() { + return ( + + + + ); +} + +export default FacebookIcon; diff --git a/src/components/icons/InstagramIcon.tsx b/src/components/icons/InstagramIcon.tsx new file mode 100644 index 0000000..207b725 --- /dev/null +++ b/src/components/icons/InstagramIcon.tsx @@ -0,0 +1,12 @@ +function InstagramIcon() { + return ( + + + + ); +} + +export default InstagramIcon; diff --git a/src/components/icons/LinkedInIcon.tsx b/src/components/icons/LinkedInIcon.tsx new file mode 100644 index 0000000..51d556f --- /dev/null +++ b/src/components/icons/LinkedInIcon.tsx @@ -0,0 +1,12 @@ +function LinkedInIcon() { + return ( + + + + ); +} + +export default LinkedInIcon; diff --git a/src/components/icons/TouchIcon.tsx b/src/components/icons/TouchIcon.tsx new file mode 100644 index 0000000..0cf825a --- /dev/null +++ b/src/components/icons/TouchIcon.tsx @@ -0,0 +1,20 @@ +function TouchIcon() { + return ( + + + + + ); +} + +export default TouchIcon; diff --git a/src/components/icons/TwitterIcon.tsx b/src/components/icons/TwitterIcon.tsx new file mode 100644 index 0000000..8d0240d --- /dev/null +++ b/src/components/icons/TwitterIcon.tsx @@ -0,0 +1,16 @@ +function TwitterIcon() { + return ( + + + + + ); +} + +export default TwitterIcon; diff --git a/src/components/icons/YoutubeIcon.tsx b/src/components/icons/YoutubeIcon.tsx new file mode 100644 index 0000000..24c8d25 --- /dev/null +++ b/src/components/icons/YoutubeIcon.tsx @@ -0,0 +1,14 @@ +function YoutubeIcon() { + return ( + + + + ); +} + +export default YoutubeIcon; diff --git a/src/components/icons/map/MoveIcon.tsx b/src/components/icons/map/MoveIcon.tsx index c14914a..2e5a292 100644 --- a/src/components/icons/map/MoveIcon.tsx +++ b/src/components/icons/map/MoveIcon.tsx @@ -1,15 +1,11 @@ function MoveIcon() { return ( - + diff --git a/src/components/icons/map/SearchIcon.tsx b/src/components/icons/map/SearchIcon.tsx index ebe3b77..e43bf08 100644 --- a/src/components/icons/map/SearchIcon.tsx +++ b/src/components/icons/map/SearchIcon.tsx @@ -1,18 +1,12 @@ function SearchIcon() { return ( - + ); diff --git a/src/components/modals/PrivacyPolicyModal.tsx b/src/components/modals/PrivacyPolicyModal.tsx new file mode 100644 index 0000000..aa488b1 --- /dev/null +++ b/src/components/modals/PrivacyPolicyModal.tsx @@ -0,0 +1,117 @@ +function PrivacyPolicyModal() { + return ( +
+
+

+ Privacy Policy for IRTH Group and its companies: +

+
+

+ At IRTH Group and its companies, we are committed to protecting the + privacy and security of your personal information. This Privacy Policy + explains how we collect, use, disclose, and safeguard your information + when you visit our website or use our services. +

+ +
+

Information We Collect:

+
    +
  • + Personal Information: We may collect personal information such as + your name, contact details, and address when you voluntarily + provide it to us, such as when you register through a form or + request information +
    • +
  • + Usage Information: We automatically collect certain information + about your device and usage of our website, such as your IP + address, browser type, operating system, pages visited, and time + spent on each page. This information helps us analyze trends, + administer the website, and improve our services. +
    • +
+
+ +
+

How We Use Your Information:

+
    +
  • + To Provide Services:We use your personal information to deliver + the services you request, such as facilitating property + transactions, responding to inquiries, and sending you relevant + updates and notifications +
    • +
  • + To Improve Our Services: We analyze usage data to understand how + our website is accessed and used, identify areas for improvement, + and enhance the user experience. +
    • +
  • + To Communicate with You: We may use your contact information to + communicate with you about properties, services, promotions, and + updates. You can opt out of receiving marketing communications at + any time by following the unsubscribe instructions provided in our + emails or contacting us directly. +
    • +
  • + To Protect Our Rights: We may use your information to enforce our + terms of service, protect our rights, or comply with legal + obligations. +
    • +
+
+ +
+

Information Sharing and Disclosure:

+

+ We may share your personal information with trusted third-party + service providers who assist us in operating our website, conducting + business, or servicing you, as long as those parties agree to keep + this information confidential. We may also disclose your information + when required by law, to enforce our site policies, or to protect + our or others' rights, property, or safety. +

+
+ +
+

Data Security:

+

+ We implement a variety of security measures to safeguard your + personal information and protect it from unauthorized access, + alteration, disclosure, or destruction. However, no method of + transmission over the Internet or electronic storage is 100% secure, + so we cannot guarantee absolute security. +

+
+ +
+

Your Rights:

+

+ You have the right to access, update, or delete your personal + information at any time. You can do this by contacting us directly. + We will make reasonable efforts to accommodate your request, subject + to any legal or contractual obligations. +

+
+ +
+

Contact Us:

+

+ If you have any questions or concerns about this Privacy Policy or + our privacy practices, please contact us at info@irth.ae +

+
+ +
+

Effective Date:

+

+ This Privacy Policy is effective as of 07/03/2024 and supersedes any + prior versions +

+
+
+
+ ); +} + +export default PrivacyPolicyModal; diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index c65a78d..96e9833 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -1,5 +1,6 @@ import Header from "../components/Header"; import { Outlet } from "react-router"; +import Footer from "../components/Footer"; function DefaultLayout() { return ( @@ -8,6 +9,7 @@ function DefaultLayout() {
+
); } diff --git a/src/main.tsx b/src/main.tsx index bf5670d..413d381 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,6 +7,10 @@ import MainPage from "./pages/MainPage.tsx"; import ModalContainer from "./components/ModalContainer.tsx"; import ComplexPage from "./pages/ComplexPage.tsx"; import FloorsPage from "./pages/FloorsPage.tsx"; +import UnitTypesPage from "./pages/UnitTypesPages.tsx"; +import AboutPage from "./pages/AboutPages.tsx"; +import FavouritesPage from "./pages/FavouritesPage.tsx"; +import SearchPage from "./pages/SearchPage.tsx"; const route = createBrowserRouter([ { @@ -24,6 +28,22 @@ const route = createBrowserRouter([ path: "/complex/:complexName/floors", element: , }, + { + path: "/unit-types", + element: , + }, + { + path: "/about", + element: , + }, + { + path: "/favourites", + element: , + }, + { + path: "/search", + element: , + }, ], }, ]); diff --git a/src/pages/AboutPages.tsx b/src/pages/AboutPages.tsx new file mode 100644 index 0000000..7e7241f --- /dev/null +++ b/src/pages/AboutPages.tsx @@ -0,0 +1,5 @@ +function AboutPage() { + return
AboutPage
; +} + +export default AboutPage; diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx new file mode 100644 index 0000000..1c9e248 --- /dev/null +++ b/src/pages/FavouritesPage.tsx @@ -0,0 +1,5 @@ +function FavouritesPage() { + return
FavouritesPage
; +} + +export default FavouritesPage; diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx new file mode 100644 index 0000000..e5c9ecd --- /dev/null +++ b/src/pages/SearchPage.tsx @@ -0,0 +1,5 @@ +function SearchPage() { + return
SearchPage
; +} + +export default SearchPage; diff --git a/src/pages/UnitTypesPages.tsx b/src/pages/UnitTypesPages.tsx new file mode 100644 index 0000000..53afe02 --- /dev/null +++ b/src/pages/UnitTypesPages.tsx @@ -0,0 +1,5 @@ +function UnitTypesPage() { + return
UnitTypesPage
; +} + +export default UnitTypesPage;