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 { import { projects } from "../../consts/projects";
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",
},
];
const projectStyles = [ const projectStyles = [
"xl:col-start-3 xl:col-end-7", "xl:col-start-3 xl:col-end-7",
@@ -48,7 +10,7 @@ const projectStyles = [
const InvestmentPortfolio = () => { const InvestmentPortfolio = () => {
return ( 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"> <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3">
OUR INVESTMENT PORTFOLIO OUR INVESTMENT PORTFOLIO
</div> </div>
+55 -70
View File
@@ -1,82 +1,67 @@
const OurStory = () => { const OurStory = () => {
return ( 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="grid grid-cols-12 xl:px-6 px-4 gap-x-4">
<div className="xl:h-full uppercase text-[#73787C] font-semibold 2xl:w-[261px] xl:w-[208px] pb-3"> <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full">
Our story Our story
</div> </div>
<div className="flex flex-col items-center w-full"> <div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
<div className="flex flex-col max-w-[1030px]"> <div className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<img <img
className="rounded-2xl"
src="./images/company/1.jpg" src="./images/company/1.jpg"
alt="Company" alt="1"
width={1030} className="aspect-[7/5] rounded-2xl col-span-full object-cover"
height={720}
/> />
<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 xl:col-span-5 col-span-full pt-6">
<p className="text-[#00BED7] font-semibold text-2xl"> IRTH is prominently positioned among the top tier establishments in
IRTH is prominently positioned among the top tier establishments United Arab Emirates, a family backed investment company with core
in United Arab Emirates, a family backed investment company with values of trust, strength and agility.
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> </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>
<div className="flex flex-col gap-6"> </div>
<div className="flex gap-4"> <div className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<img <img
src="./images/company/2.jpg" src="./images/company/2.jpg"
alt="2" 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" 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"
style={{ overflowClipMargin: "unset" }} />
/> <img
<img src="./images/company/3.png"
src="./images/company/3.png" alt="2"
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: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 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">
</div> <p className="sm:col-span-1 col-span-full">
<div className="flex gap-4 text-[#73787C] text-sm sm:flex-row flex-col"> Our influence extends even further through strategic partnerships
<div className="2xl:min-w-[246px] xl:min-w-[195px] xl:block hidden"></div> with esteemed local and international hospitality brands,
<p className="2xl:w-1/2 xl:min-w-[397px] xl:max-w-[397px]"> elevating our stature and enriching our portfolio. With an
Our influence extends even further through strategic unwavering dedication to investment, IRTH paves the way for a
partnerships with esteemed local and international hospitality diverse range of property ventures. Our footprint is set to expand
brands, elevating our stature and enriching our portfolio. With both within the dynamic landscapes of Dubai and across
an unwavering dedication to investment, IRTH paves the way for a international horizons. As we forge ahead, our legacy remains
diverse range of property ventures. Our footprint is set to intertwined with the enduring values of trust, strength, and
expand both within the dynamic landscapes of Dubai and across agility.
international horizons. As we forge ahead, our legacy remains </p>
intertwined with the enduring values of trust, strength, and <p className="sm:col-span-1 col-span-full">
agility. The Alshamsi Family , the visionary founders behind IRTH, have
</p> sown the seeds of a legacy that continues to flourish. Our story
<p className="2xl:w-1/2 xl:w-full "> is one of resilience, growth, and an unyielding pursuit of
The Alshamsi Family , the visionary founders behind IRTH, have excellence.
sown the seeds of a legacy that continues to flourish. Our story </p>
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>
</div> </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 };