refactor section to grid

This commit is contained in:
2024-04-19 17:27:46 +05:00
parent ee9cf60b9d
commit ba8baa0456
4 changed files with 101 additions and 110 deletions
@@ -1,42 +1,4 @@
interface Project {
title: string;
city: string;
image: string;
id: string;
}
const projects: Project[] = [
{
title: "Nef Kandilli",
city: "Instanbul",
image: "./images/company/4.png",
id: "1",
},
{
title: "Résidence Seniors Palazzo Chessy",
city: "Paris",
image: "./images/company/5.png",
id: "2",
},
{
title: "5 Beaujon",
city: "Paris",
image: "./images/company/6.png",
id: "3",
},
{
title: "Edenwood Resort Privé",
city: "Paris",
image: "./images/company/7.png",
id: "4",
},
{
title: "Rove Home Downtown",
city: "Dubai",
image: "./images/company/8.png",
id: "5",
},
];
import { projects } from "../../consts/projects";
const projectStyles = [
"xl:col-start-3 xl:col-end-7",
@@ -48,7 +10,7 @@ const projectStyles = [
const InvestmentPortfolio = () => {
return (
<div className="grid grid-cols-12 px-6 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5">
<div className="grid grid-cols-12 xl:px-6 px-4 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5">
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3">
OUR INVESTMENT PORTFOLIO
</div>
+55 -70
View File
@@ -1,82 +1,67 @@
const OurStory = () => {
return (
<div className="flex 2xl:pr-[285px] xl:pr-[128px] xl:flex-row flex-col xl:px-6 px-4 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
<div className="xl:h-full uppercase text-[#73787C] font-semibold 2xl:w-[261px] xl:w-[208px] pb-3">
<div className="grid grid-cols-12 xl:px-6 px-4 gap-x-4">
<div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full">
Our story
</div>
<div className="flex flex-col items-center w-full">
<div className="flex flex-col max-w-[1030px]">
<div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
<div className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<img
className="rounded-2xl"
src="./images/company/1.jpg"
alt="Company"
width={1030}
height={720}
alt="1"
className="aspect-[7/5] rounded-2xl col-span-full object-cover"
/>
<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 className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6">
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="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px]">
<p className="xl:col-span-full sm:col-span-1 col-span-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="xl:col-span-full sm:col-span-1 col-span-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 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 className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<img
src="./images/company/2.jpg"
alt="2"
className="rounded-2xl object-cover sm:col-span-2 col-span-full 2xl:aspect-[5/6] xl:aspect-[4/5] sm:aspect-[7/13] order-1 mb-6"
/>
<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 "
/>
<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">
<p className="sm:col-span-1 col-span-full">
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="sm:col-span-1 col-span-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>
</div>
+36
View File
@@ -0,0 +1,36 @@
import { Project } from "../types/project";
const projects: Project[] = [
{
title: "Nef Kandilli",
city: "Instanbul",
image: "./images/company/4.png",
id: "1",
},
{
title: "Résidence Seniors Palazzo Chessy",
city: "Paris",
image: "./images/company/5.png",
id: "2",
},
{
title: "5 Beaujon",
city: "Paris",
image: "./images/company/6.png",
id: "3",
},
{
title: "Edenwood Resort Privé",
city: "Paris",
image: "./images/company/7.png",
id: "4",
},
{
title: "Rove Home Downtown",
city: "Dubai",
image: "./images/company/8.png",
id: "5",
},
];
export { projects };
+8
View File
@@ -0,0 +1,8 @@
interface Project {
title: string;
city: string;
image: string;
id: string;
}
export type { Project };