zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

company page

Browse Source
This commit is contained in:
zojgame
2024-04-25 17:58:06 +05:00
parent 6181662e2e
commit 9377b3241f
9 changed files with 105 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/Map.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 MiB

After

Width:  |  Height:  |  Size: 3.5 MiB

src/components/Footer.tsx
+38
View File
@@ -0,0 +1,38 @@
import LogoIcon from "./icons/LogoIcon";
const Footer = () => {
return (
<footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white px-7 py-8 gap-4">
<div className="flex flex-col justify-between sm:row-span-2 sm:col-span-2 col-span-8">
<LogoIcon />
<p className="text-caption-s text-[#73787C] font-semibold hidden sm:block">
Privacy Policy
</p>
</div>
<div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-4 sm:col-span-5 col-span-8">
<p className="text-[#73787C] py-3">COMPANY</p>
<div className="flex flex-col text-m text-[#73787C]">
<p className="py-3">Masterplan</p>
<p className="py-3">Search</p>
<p className="py-3">Favorites</p>
<p className="py-3 text-[#0D1922] text-s">Company</p>
</div>
</div>
<div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-4 sm:col-span-5 col-span-8">
<p className="text-[#73787C] py-3">FOLLOW US</p>
<div className="flex flex-col text-m text-[#73787C]">
<p className="py-3">Facebook</p>
<p className="py-3">Instagram</p>
<p className="py-3">LinkedIn</p>
</div>
</div>
<div className="block sm:hidden col-span-8 border-t">
<p className="text-caption-s text-[#73787C] font-semibold pt-3">
Privacy Policy
</p>
</div>
</footer>
);
};
export default Footer;
src/components/companyPage/OurStory.tsx
+2 -2
View File
@@ -45,10 +45,10 @@ const OurStory = () => {
<img
src="./images/company/3.png"
alt="2"
className="rounded-2xl object-cover 2xl:col-span-6 xl:col-span-7 sm:col-span-6 col-span-full 2xl:aspect-[7/4] xl:aspect-[14/9] sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 "
className="rounded-2xl object-cover 2xl:col-span-6 xl:col-span-7 sm:col-span-6 col-span-full 2xl:aspect-[7/4] xl:aspect-[14/9] sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 mb-20 sm:mb-0"
/>
{/* <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]"> */}
<div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C] text-s">
<div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 text-[#73787C] text-s">
<p className="sm:col-span-1 col-span-full">
Our influence extends even further through strategic partnerships
with esteemed local and international hospitality brands,
src/components/companyPage/OurValues/OurValues.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import Slider from "./Slider";
const OurValues = () => {
return (
<div>
<div className="xl:pb-16 pb-10">
<div className="grid grid-cols-12 xl:px-6 px-4 gap-4 xl:gap-y-6 gap-y-35">
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
our values
src/components/companyPage/OurValues/Slider.tsx
+50 -33
View File
@@ -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 (
<div
className="relative col-span-full overflow-x-hidden "
style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
>
<div className="flex flex-col gap-6 " {...handlers}>
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
style={{
right: `${rightImageOffset}`,
}}
{...handlers}
className="relative col-span-full overflow-x-hidden flex flex-col"
style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
>
{images.map((image) => (
<img
ref={imageRef}
src={image.src}
alt=""
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
style={{
right: `${rightImageOffset}`,
}}
>
{images.map((image) => (
<img
ref={imageRef}
src={image.src}
alt=""
key={image.id}
className="rounded-2xl sm:aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]"
/>
))}
</div>
<Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-slider-btn-offset left-6 hidden sm:block"
/>
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-6 hidden sm:block"
/>
</div>
<div className="self-center gap-1 sm:hidden flex">
{images.map((image, index) => (
<div
key={image.id}
className="rounded-2xl aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none"
/>
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
index - 1 === selectedImageIndex
? "w-6 bg-[#0D1922]"
: "w-2 bg-[#0D192266]"
}`}
></div>
))}
</div>
<Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-slider-btn-offset left-4"
/>
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-6"
/>
</div>
);
};
src/components/masterplanPage/map/Map.tsx
+7 -7
View File
@@ -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,
src/components/masterplanPage/map/Marker.tsx
+3 -1
View File
@@ -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 (
src/index.css
+1
View File
@@ -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);
}
}
src/pages/Company.tsx
+3 -1
View File
@@ -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 (
<section className={`xl:py-16 py-10 font-usual ${isMobile ? "pt-24" : ""}`}>
<section className={`xl:pt-16 pt-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"> */}
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4">
IRTH is a privately held real estate investment platform part of a large
@@ -18,6 +19,7 @@ const Company = () => {
</h1>
<InvestmentPortfolio />
<OurValues />
<Footer />
</section>
);
};