diff --git a/public/images/Map.jpg b/public/images/Map.jpg index d9538e1..a243b89 100644 Binary files a/public/images/Map.jpg and b/public/images/Map.jpg differ diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..eff4560 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,38 @@ +import LogoIcon from "./icons/LogoIcon"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/companyPage/OurStory.tsx b/src/components/companyPage/OurStory.tsx index b18b5a3..e9ad266 100644 --- a/src/components/companyPage/OurStory.tsx +++ b/src/components/companyPage/OurStory.tsx @@ -45,10 +45,10 @@ const OurStory = () => { 2 {/*
*/} -
+

Our influence extends even further through strategic partnerships with esteemed local and international hospitality brands, diff --git a/src/components/companyPage/OurValues/OurValues.tsx b/src/components/companyPage/OurValues/OurValues.tsx index 1846857..bef49a0 100644 --- a/src/components/companyPage/OurValues/OurValues.tsx +++ b/src/components/companyPage/OurValues/OurValues.tsx @@ -1,7 +1,7 @@ import Slider from "./Slider"; const OurValues = () => { return ( -

+
our values diff --git a/src/components/companyPage/OurValues/Slider.tsx b/src/components/companyPage/OurValues/Slider.tsx index 47a8fdf..9d82089 100644 --- a/src/components/companyPage/OurValues/Slider.tsx +++ b/src/components/companyPage/OurValues/Slider.tsx @@ -1,10 +1,11 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { useSwipeable } from "react-swipeable"; import { Image } from "../../../types/image"; import { useLayoutEffect, useRef, useState } from "react"; import Button from "../../Button"; -import RightArrowIcon from "../../icons/RightArrowIcon"; import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon"; import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon"; +import { isMobile } from "react-device-detect"; const images: Image[] = [ { id: "1", src: "./images/company/slider/1.png" }, @@ -14,8 +15,8 @@ const images: Image[] = [ const getGapOffset = (screenWidth: number) => { if (screenWidth > 1600) return 16; - if (screenWidth > 1280) return 12; - if (screenWidth > 640) return 8; + if (screenWidth > 1280) return 24; + if (screenWidth > 640) return 16; return 16; }; @@ -27,9 +28,9 @@ const Slider = () => { useLayoutEffect(() => { if (!imageRef.current?.src) return; - const width = imageRef.current.clientWidth; + const width = imageRef.current.width; setImageWidth(width); - }, [imageRef, window.innerWidth]); + }, [imageRef.current, window.innerWidth]); useLayoutEffect(() => { const screenWidth = window.innerWidth; @@ -40,7 +41,8 @@ const Slider = () => { ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${ selectedImageIndex * (imageWidth + gapOffset) }px)` - : `${selectedImageIndex * imageWidth}px`; + : `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`; + setRightImageOffset(_rightImageOffset); }, [imageWidth, selectedImageIndex, window.innerWidth]); @@ -51,7 +53,9 @@ const Slider = () => { }); function next() { - if (selectedImageIndex === images.length - 2) return; + const lastIndex = isMobile ? images.length - 2 : images.length - 3; + + if (selectedImageIndex === lastIndex) return; setSelectedImageIndex((prev) => prev + 1); } @@ -61,37 +65,50 @@ const Slider = () => { } return ( -
+
- {images.map((image) => ( - + {images.map((image) => ( + + ))} +
+
+
+ {images.map((image, index) => ( +
+ className={`transition-all duration-300 ease-in-out rounded-full h-2 ${ + index - 1 === selectedImageIndex + ? "w-6 bg-[#0D1922]" + : "w-2 bg-[#0D192266]" + }`} + >
))}
-
); }; diff --git a/src/components/masterplanPage/map/Map.tsx b/src/components/masterplanPage/map/Map.tsx index 6f86189..7c45290 100644 --- a/src/components/masterplanPage/map/Map.tsx +++ b/src/components/masterplanPage/map/Map.tsx @@ -20,13 +20,13 @@ const Map = () => { initialScale={isMobile ? 2 : 1} minScale={isMobile ? 2 : 1} alignmentAnimation={{ sizeX: 50, sizeY: 50 }} - wheel={{ step: 1 }} - zoomAnimation={{ - disabled: false, - size: 0, - animationType: "easeOutQuart", - animationTime: 500, - }} + wheel={{ step: 2 }} + // zoomAnimation={{ + // disabled: false, + // size: 0, + // animationType: "easeOutQuart", + // animationTime: 500, + // }} // velocityAnimation={{ // sensitivity: 1000, diff --git a/src/components/masterplanPage/map/Marker.tsx b/src/components/masterplanPage/map/Marker.tsx index 7e560f4..c61047f 100644 --- a/src/components/masterplanPage/map/Marker.tsx +++ b/src/components/masterplanPage/map/Marker.tsx @@ -32,7 +32,9 @@ const Marker = (props: MarkerComponentProps) => { handleOnScroll(); if (map) map.addEventListener("wheel", handleOnScroll); - return () => map?.removeEventListener("wheel", handleOnScroll); + return () => { + if (map) map.removeEventListener("wheel", handleOnScroll); + }; }, []); return ( diff --git a/src/index.css b/src/index.css index 24f69ae..6418923 100644 --- a/src/index.css +++ b/src/index.css @@ -68,6 +68,7 @@ body { } .left-slider-btn-offset { + /* left: clamp(230px, 3.8007rem + 13.2075vw, 401px); */ left: clamp(230px, 0.5927rem + 17.2144vw, 370px); } } diff --git a/src/pages/Company.tsx b/src/pages/Company.tsx index 16a608b..b48a644 100644 --- a/src/pages/Company.tsx +++ b/src/pages/Company.tsx @@ -2,10 +2,11 @@ import { isMobile } from "react-device-detect"; import OurStory from "../components/companyPage/OurStory"; import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio"; import OurValues from "../components/companyPage/OurValues/OurValues"; +import Footer from "../components/Footer"; const Company = () => { return ( -
+
{/*

*/}

IRTH is a privately held real estate investment platform part of a large @@ -18,6 +19,7 @@ const Company = () => {

+
); };