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

rubber text size

Browse Source
This commit is contained in:
zojgame
2024-04-22 13:15:55 +05:00
parent 77be4d0ea1
commit d34647654a
7 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const Button = ({
return (
<button
className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
className ? className : ""
}`}
>
src/components/companyPage/InvestmentPortfolio.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ const projectStyles = [
const InvestmentPortfolio = () => {
return (
<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 text-caption-m">
OUR INVESTMENT PORTFOLIO
</div>
{projects.map((project, index) => {
@@ -31,9 +31,9 @@ const InvestmentPortfolio = () => {
/>
<div className="flex gap-1 pt-3 items-center">
<div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
<div className="">{project.title}</div>
<div className="text-m">{project.title}</div>
</div>
<div className="text-[12px] font-semibold text-[#73787C] pt-2">
<div className="caption-m font-semibold text-[#73787C] pt-2">
{project.city}
</div>
</div>
src/components/companyPage/OurStory.tsx
+8 -4
View File
@@ -1,7 +1,8 @@
const OurStory = () => {
return (
<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">
{/* <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full "> */}
<div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full text-caption-m">
Our story
</div>
<div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
@@ -11,12 +12,14 @@ const OurStory = () => {
alt="1"
className="aspect-[7/5] rounded-2xl col-span-full object-cover"
/>
<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 xl:col-span-5 col-span-full pt-6 text-subheadline-s"> */}
<p className="text-[#00BED7] font-semibold xl:col-span-5 col-span-full pt-6 text-subheadline-s">
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] text-[#73787C]">
{/* <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] text-[#73787C]"> */}
<div className="grid grid-cols-2 gap-4 text-s 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] text-[#73787C]">
<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
@@ -44,7 +47,8 @@ const OurStory = () => {
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 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]"> */}
<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">
<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/header/Auth/AuthDesktop.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface AuthProps {
const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
return (
<div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
<div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end text-s">
{isAuth ? (
<>
<p>{userName}</p>
src/components/header/Header/DesktopHeader.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
import Location from "../Location";
const DesktopHeader = () => (
<header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm font-usual">
<header className="bg-white w-full text-white sm:grid grid-cols-6 font-usual text-m">
<div className="flex gap-4 col-span-2">
<Logo />
<Location />
src/index.css
+51
View File
@@ -13,3 +13,54 @@ body {
.font-mixcase {
font-family: "Mixcase", sans-serif;
}
@layer components {
.text-caption-s {
font-family: "Usual", sans-serif;
line-height: 135%;
/* clamp(10px, 0.6774rem + 0.3226vi, 12px); */
}
.text-caption-m {
font-family: "Usual", sans-serif;
line-height: 135%;
font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
}
.text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
}
.text-m {
font-family: "Usual", sans-serif;
line-height: 125%;
font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
}
.text-subheadline-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
}
.text-subheadline-m {
font-family: "Usual", sans-serif;
line-height: 135%;
/* clamp(20px, 0.6774rem + 0.3226vi, 28px); */
}
.text-subheadline-l {
font-family: "Usual", sans-serif;
line-height: 135%;
/* clamp(32px, 0.6774rem + 0.3226vi, 48px); */
}
.text-headline-s {
font-family: "Mixcase", sans-serif;
line-height: 100%;
letter-spacing: -0.03em;
font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
}
}
src/pages/Company.tsx
+3 -2
View File
@@ -5,12 +5,13 @@ import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
const Company = () => {
return (
<section className={`xl:py-16 py-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 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 text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
IRTH is a privately held real estate investment platform part of a large
local family conglomerate from Dubai
</h1>
<OurStory />
<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 text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
IRTHS’s real estate portfolio is spread across numerous projects, below
is a snapshot of some of our current and previous investments
</h1>