slider start
This commit is contained in:
@@ -15,6 +15,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-image-marker": "^1.2.0",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-zoom-pan-pinch": "^3.4.4",
|
||||
"usehooks-ts": "^3.1.0",
|
||||
"zustand": "^4.5.2"
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -24,7 +24,9 @@ const Button = ({
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
|
||||
className={`min-w-[40px] ${
|
||||
icon && !text ? "p-[10px]" : "py-3 px-6"
|
||||
} transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
|
||||
className ? className : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
const OurValues = () => {
|
||||
return (
|
||||
<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
|
||||
</div>
|
||||
<div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
Trust is the cornerstone of IRTH's foundation. We uphold an
|
||||
unshakeable commitment to transparency, integrity, and ethical
|
||||
practices in every facet of our operations.
|
||||
</p>
|
||||
<p>
|
||||
Through open communication and responsible stewardship, we build
|
||||
enduring relationships with our stakeholders and business partners,
|
||||
ensuring that trust is at the heart of every interaction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">
|
||||
Strength
|
||||
</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(2)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
Strength isn't just a physical attribute; it's a reflection of our
|
||||
resilience, determination, and unwavering resolve.
|
||||
</p>
|
||||
<p>
|
||||
At IRTH, we harness the strength of our heritage, experience, and
|
||||
expertise to overcome challenges and seize opportunities. With a
|
||||
robust foundation, we stand strong, poised to create lasting impact
|
||||
and achieve remarkable results
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">Agility</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(3)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
In a rapidly evolving landscape, adaptability is paramount. IRTH
|
||||
embraces agility as a guiding principle, allowing us to swiftly
|
||||
respond to changing dynamics and emerging trends.
|
||||
</p>
|
||||
<p>
|
||||
Our flexible mindset empowers us to navigate complexities, explore
|
||||
new avenues, and innovate with confidence, ensuring that we remain
|
||||
at the forefront of progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
|
||||
These core values not only shape our identity but also drive our
|
||||
actions, decisions, and aspirations as we shape the future of real
|
||||
estate with dedication and purpose.
|
||||
</div>
|
||||
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
|
||||
<div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
|
||||
<img
|
||||
src="./images/company/9.png"
|
||||
alt="9"
|
||||
className="object-cover rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
|
||||
<h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
|
||||
Osman Celiker
|
||||
</h2>
|
||||
<div className="flex gap-1 items-center xl:pb-8 pb-6">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<div className="text-m">Managing Director, IRTH</div>
|
||||
</div>
|
||||
<div className="text-[#73787C] text-s pb-4">
|
||||
Osman Celiker, the Managing Director of IRTH, possesses a robust
|
||||
history in real estate development, both on a local and
|
||||
international scale.
|
||||
</div>
|
||||
<div className="text-[#73787C] text-s">
|
||||
Osman oversees a skilled and seasoned development team responsible
|
||||
for crafting remarkable projects. This team has brought to life many
|
||||
local and international projects.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
|
||||
our values
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3 border gap-6">
|
||||
<div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
|
||||
Nestled at the pulsating core of Dubai, IRTH’s headquarters finds its
|
||||
strategic abode within the iconic masterpiece, The Opus, envisioned by
|
||||
the architectural virtuoso Zaha Hadid.
|
||||
</div>
|
||||
<div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
|
||||
This exceptional location mirrors our commitment to being at the
|
||||
forefront of innovation and design, reflecting the very essence of our
|
||||
brand. Just as The Opus stands as a testament to architectural
|
||||
brilliance, IRTH’s presence within it signifies our dedication to
|
||||
crafting exceptional legacies within the world of real estate.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurValues;
|
||||
@@ -0,0 +1,124 @@
|
||||
import Slider from "./Slider";
|
||||
const OurValues = () => {
|
||||
return (
|
||||
<div>
|
||||
<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
|
||||
</div>
|
||||
<div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
Trust is the cornerstone of IRTH's foundation. We uphold an
|
||||
unshakeable commitment to transparency, integrity, and ethical
|
||||
practices in every facet of our operations.
|
||||
</p>
|
||||
<p>
|
||||
Through open communication and responsible stewardship, we build
|
||||
enduring relationships with our stakeholders and business
|
||||
partners, ensuring that trust is at the heart of every
|
||||
interaction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">
|
||||
Strength
|
||||
</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(2)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
Strength isn't just a physical attribute; it's a reflection of our
|
||||
resilience, determination, and unwavering resolve.
|
||||
</p>
|
||||
<p>
|
||||
At IRTH, we harness the strength of our heritage, experience, and
|
||||
expertise to overcome challenges and seize opportunities. With a
|
||||
robust foundation, we stand strong, poised to create lasting
|
||||
impact and achieve remarkable results
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
|
||||
<div className="flex justify-between items-start pb-[50px]">
|
||||
<p className="text-subheadline-l font-bold text-[#0D1922]">
|
||||
Agility
|
||||
</p>
|
||||
<p className="text-caption-m font-semibold text-[#73787C]">(3)</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
|
||||
<p>
|
||||
In a rapidly evolving landscape, adaptability is paramount. IRTH
|
||||
embraces agility as a guiding principle, allowing us to swiftly
|
||||
respond to changing dynamics and emerging trends.
|
||||
</p>
|
||||
<p>
|
||||
Our flexible mindset empowers us to navigate complexities, explore
|
||||
new avenues, and innovate with confidence, ensuring that we remain
|
||||
at the forefront of progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
|
||||
These core values not only shape our identity but also drive our
|
||||
actions, decisions, and aspirations as we shape the future of real
|
||||
estate with dedication and purpose.
|
||||
</div>
|
||||
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
|
||||
<div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
|
||||
<img
|
||||
src="./images/company/9.png"
|
||||
alt="9"
|
||||
className="object-cover rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
|
||||
<h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
|
||||
Osman Celiker
|
||||
</h2>
|
||||
<div className="flex gap-1 items-center xl:pb-8 pb-6">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<div className="text-m">Managing Director, IRTH</div>
|
||||
</div>
|
||||
<div className="text-[#73787C] text-s pb-4">
|
||||
Osman Celiker, the Managing Director of IRTH, possesses a robust
|
||||
history in real estate development, both on a local and
|
||||
international scale.
|
||||
</div>
|
||||
<div className="text-[#73787C] text-s">
|
||||
Osman oversees a skilled and seasoned development team responsible
|
||||
for crafting remarkable projects. This team has brought to life
|
||||
many local and international projects.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
|
||||
our values
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3 gap-6">
|
||||
<div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
|
||||
Nestled at the pulsating core of Dubai, IRTH’s headquarters finds
|
||||
its strategic abode within the iconic masterpiece, The Opus,
|
||||
envisioned by the architectural virtuoso Zaha Hadid.
|
||||
</div>
|
||||
<div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
|
||||
This exceptional location mirrors our commitment to being at the
|
||||
forefront of innovation and design, reflecting the very essence of
|
||||
our brand. Just as The Opus stands as a testament to architectural
|
||||
brilliance, IRTH’s presence within it signifies our dedication to
|
||||
crafting exceptional legacies within the world of real estate.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Slider />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurValues;
|
||||
@@ -0,0 +1,73 @@
|
||||
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";
|
||||
|
||||
const images: Image[] = [
|
||||
{ id: "1", src: "./images/company/slider/1.png" },
|
||||
{ id: "2", src: "./images/company/slider/2.png" },
|
||||
{ id: "3", src: "./images/company/slider/3.png" },
|
||||
];
|
||||
|
||||
const Slider = () => {
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
|
||||
const [imageWidth, setImageWidth] = useState(0);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!imageRef.current?.src) return;
|
||||
const width = imageRef.current.clientWidth;
|
||||
setImageWidth(width);
|
||||
}, [imageRef]);
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: next,
|
||||
onSwipedRight: prev,
|
||||
trackMouse: true,
|
||||
});
|
||||
|
||||
function next() {
|
||||
if (selectedImageIndex === images.length - 2) return;
|
||||
setSelectedImageIndex((prev) => prev + 1);
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (selectedImageIndex === -1) return;
|
||||
setSelectedImageIndex((prev) => prev - 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative col-span-full overflow-x-hidden"
|
||||
style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
|
||||
>
|
||||
<div
|
||||
className="flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
right: `calc(clamp(315px, 6.5317rem + 16.4319vw, 420px) + ${
|
||||
selectedImageIndex * imageWidth
|
||||
}px)`,
|
||||
}}
|
||||
{...handlers}
|
||||
>
|
||||
{images.map((image) => (
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={image.src}
|
||||
alt=""
|
||||
key={image.id}
|
||||
className="rounded-2xl aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)]"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* <Button
|
||||
icon={<LeftArrowSliderIcon />}
|
||||
className="top-0 slider-offset absolute text-[#73787C]"
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
@@ -0,0 +1,21 @@
|
||||
const LeftArrowSliderIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 12L18 12M6 12L12.3636 6M6 12L12.3636 18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeftArrowSliderIcon;
|
||||
@@ -0,0 +1,21 @@
|
||||
const RightArrowSliderIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18 12L6 12M18 12L11.6364 18M18 12L11.6364 6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default RightArrowSliderIcon;
|
||||
@@ -66,4 +66,9 @@ body {
|
||||
.rubber-headline-indent {
|
||||
text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
|
||||
}
|
||||
|
||||
.slider-offset {
|
||||
/* left: clamp(315px, 6.5317rem + 16.4319vw, 281px); */
|
||||
left: clamp(315px, 6.5317rem + 16.4319vw, 420px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { isMobile } from "react-device-detect";
|
||||
import OurStory from "../components/companyPage/OurStory";
|
||||
import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
|
||||
import OurValues from "../components/companyPage/OurValues";
|
||||
import OurValues from "../components/companyPage/OurValues/OurValues";
|
||||
|
||||
const Company = () => {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
interface Image {
|
||||
src: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export type { Image };
|
||||
@@ -1814,6 +1814,11 @@ react-router@6.22.3:
|
||||
dependencies:
|
||||
"@remix-run/router" "1.15.3"
|
||||
|
||||
react-swipeable@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
|
||||
integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
|
||||
|
||||
react-zoom-pan-pinch@^3.4.4:
|
||||
version "3.4.4"
|
||||
resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.4.4.tgz#5450b027dbf9f161773cde71b061423ff1109328"
|
||||
|
||||
Reference in New Issue
Block a user