inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2025-04-22 13:22:50 +05:00
parent 853fb156cd
commit 16ef9c5dce
16 changed files with 98 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+25 -25
View File
@@ -7,17 +7,17 @@ import TwitterIcon from "./icons/TwitterIcon";
function Footer() {
return (
<footer className="lg:px-[2.222vw] lg:pb-[2.222vw] lg:pt-[2.778vw] md:max-lg:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 lg:grid-rows-2 lg:gap-x-[1.667vw] lg:gap-y-[1.111vw] max-lg:gap-y-6 lg:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
<footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
<img
src="/images/logo.svg"
className="lg:w-[5.972vw] w-[86px] cursor-pointer"
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
onClick={() => {
window.location.href = "/";
}}
alt="IRTH"
/>
<p className="lg:max-w-[17.083vw] text-s text-[#0D1922]/40 lg:col-start-1 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-2 max-md:row-start-3 max-lg:pt-4 max-lg:border-t border-[#E2E2DC]">
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-2xl:pt-4 max-2xl:border-t border-[#E2E2DC]">
For more information, visit
<br />
our website: 
@@ -26,77 +26,77 @@ function Footer() {
</Link>
</p>
<div className="lg:space-y-[0.833vw] space-y-3 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-3 max-md:row-start-4 max-lg:mb-9">
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-2xl:mb-9">
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
<div className="flex lg:gap-[0.278vw] gap-1">
<div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
<div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className="flex 2xl:gap-[0.278vw] gap-1">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<YoutubeIcon />
</div>
</div>
<div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
<div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<InstagramIcon />
</div>
</div>
<div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
<div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<FacebookIcon />
</div>
</div>
<div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
<div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<LinkedInIcon />
</div>
</div>
<div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
<div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<TwitterIcon />
</div>
</div>
</div>
</div>
<div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-4 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-4 col-start-1 max-lg:pt-4 max-lg:border-t">
<Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
<div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-4 col-start-1 max-2xl:pt-4 max-2xl:border-t">
<Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
Map
</Link>
<Link
to={"/unit-types"}
className="text-m flex-1 content-center max-lg:py-2.5"
className="text-m flex-1 content-center max-2xl:py-2.5"
>
Unit Types
</Link>
<Link
to={"/about-irth"}
className="text-m flex-1 content-center max-lg:py-2.5"
className="text-m flex-1 content-center max-2xl:py-2.5"
>
About IRTH
</Link>
</div>
<div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-5 lg:row-start-1 lg:row-span-2 max-lg:col-span-2 max-lg:pt-4 max-lg:border-t">
<div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-2xl:pt-4 max-2xl:border-t">
<Link
to={"/favorites"}
className="text-m flex-1 content-center max-lg:py-2.5"
className="text-m flex-1 content-center max-2xl:py-2.5"
>
Favorites
</Link>
<Link
to={"/search"}
className="text-m flex-1 content-center max-lg:py-2.5"
className="text-m flex-1 content-center max-2xl:py-2.5"
>
Search
</Link>
<Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
<Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
Brochures
</Link>
</div>
<div className="content-end lg:text-right lg:col-start-6 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-1 md:max-lg:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
<Link
to={"/"}
className="lg:text-caption-m text-caption-s max-lg:text-[#73787C]"
className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C]"
>
Privacy Policy
</Link>
src/components/FullScreenButton.tsx
+2 -2
View File
@@ -34,10 +34,10 @@ function FullScreenButton({
onlyIcon
size="small"
variant="secondary"
className="absolute lg:top-[1.667vw] lg:right-[1.667vw] top-4 right-4"
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] top-4 right-4"
onClick={handleClick}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
{isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
</span>
</Button>
src/components/Header.tsx
+14 -14
View File
@@ -12,20 +12,20 @@ function Header() {
}
return (
<div className="sticky top-0 left-0 w-full h-[3.889vw] max-lg:h-14 max-md:h-16 flex items-center justify-center bg-white outline outline-[#E2E2DC]">
<div className="flex lg:gap-[1.111vw] gap-4 flex-1">
<div className="sticky top-0 left-0 w-full h-16 md:max-2xl:h-18 2xl:h-[4.444vw] flex items-center justify-center bg-white outline outline-[#E2E2DC]">
<div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
<div
className="lg:px-[1.667vw] lg:py-[1.111vw] md:max-lg:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
className="2xl:px-[1.667vw] 2xl:py-[1.111vw] md:max-2xl:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
onClick={handleLogoClick}
>
<img
src="/images/logo.svg"
alt="logo"
className="lg:w-[5.972vw] w-22"
className="2xl:w-[5.972vw] w-22"
/>
</div>
<div className="flex lg:gap-[0.278vw] gap-1 items-center max-md:hidden">
<span className="lg:w-[1.389vw] w-5 text-[#0D1922]/40">
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center max-md:hidden">
<span className="2xl:w-[1.389vw] w-5 text-[#0D1922]/40">
<LocationIcon />
</span>
<p className="text-s text-[#0D1922]/40">Dubai</p>
@@ -43,8 +43,8 @@ export default Header;
function NavBar() {
return (
<div className="max-lg:order-2">
<nav className="flex lg:gap-[0.556vw] gap-2 items-center max-lg:hidden">
<div className="max-2xl:order-2">
<nav className="flex 2xl:gap-[0.556vw] gap-2 items-center max-2xl:hidden">
<NavItem href={"/"} title={"Map"} />
<NavItem href={"/unit-types"} title={"Unit Types"} />
<NavItem href={"/about"} title={"About IRTH"} />
@@ -56,7 +56,7 @@ function NavBar() {
onlyIcon
variant="secondary"
size="small"
className="lg:hidden !outline !outline-[#E2E2DC] mr-4"
className="2xl:hidden !outline !outline-[#E2E2DC] mr-4"
>
<span className="w-5 h-5 text-[#0D1922]">
<BurgerIcon />
@@ -72,7 +72,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
to={href}
className={({ isActive }) =>
clsx(
"text-m lg:px-[1.25vw] lg:py-[0.903vw] px-4.5 py-[13px] lg:rounded-[0.833vw] rounded-xl transition-colors duration-300",
"text-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] px-4.5 py-[13px] 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none",
isActive && "bg-[#00BED7] text-[#FFFFFF]"
)
}
@@ -84,7 +84,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
function ProfileBar() {
return (
<Button className="!bg-[#F3F3F2] lg:mr-[2.222vw] mr-4" variant="secondary">
<Button className="!bg-[#F3F3F2] 2xl:mr-[2.222vw] mr-4" variant="secondary">
Login
</Button>
);
@@ -96,15 +96,15 @@ function BrochuresDropdown() {
return (
<div>
<button
className="lg:px-[0.972vw] lg:py-[0.694vw] px-3.5 py-2.5 flex items-center"
className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center"
onClick={() => setOpened((prev) => !prev)}
>
<p className="lg:px-[0.278vw] lg:py-[0.208vw] px-1 py-[3px]">
<p className="2xl:px-[0.278vw] 2xl:py-[0.208vw] px-1 py-[3px]">
<span className="text-m">Brochures</span>
</p>
<span
className={clsx(
"text-[#0D1922] lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 transition-transform duration-300",
"text-[#0D1922] 2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
opened && "rotate-180"
)}
>
src/components/Map.tsx
+9 -9
View File
@@ -652,13 +652,13 @@ function Map({ maxZoom = 1 }: MapProps) {
exit={{ opacity: 0 }}
className="absolute inset-0 flex items-center justify-center pointer-events-none"
>
<div className="w-fit bg-[#0D1922]/40 lg:rounded-[0.556vw] rounded-lg backdrop-blur-sm lg:space-y-[0.833vw] space-y-3 lg:p-[1.111vw] p-4 text-white">
<div className="w-fit bg-[#0D1922]/40 2xl:rounded-[0.556vw] rounded-lg backdrop-blur-sm 2xl:space-y-[0.833vw] space-y-3 2xl:p-[1.111vw] p-4 text-white">
<div className="flex items-center justify-center gap-4">
<span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
<span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
<MoveIcon />
</span>
<div className="w-px lg:h-[1.111vw] h-4 bg-white" />
<span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
<div className="w-px 2xl:h-[1.111vw] h-4 bg-white" />
<span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
<TouchIcon />
</span>
</div>
@@ -672,13 +672,13 @@ function Map({ maxZoom = 1 }: MapProps) {
exit={{ opacity: 0 }}
className="absolute inset-0 flex items-center justify-center pointer-events-none"
>
<div className="w-fit bg-[#0D1922]/40 lg:rounded-[0.556vw] rounded-lg backdrop-blur-sm lg:space-y-[0.833vw] space-y-3 lg:p-[1.111vw] p-4 text-white">
<div className="w-fit bg-[#0D1922]/40 2xl:rounded-[0.556vw] rounded-lg backdrop-blur-sm 2xl:space-y-[0.833vw] space-y-3 2xl:p-[1.111vw] p-4 text-white">
<div className="flex items-center justify-center gap-4">
<span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
<span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
<SearchIcon />
</span>
<div className="w-px lg:h-[1.111vw] h-4 bg-white" />
<span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
<div className="w-px 2xl:h-[1.111vw] h-4 bg-white" />
<span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
<MoveIcon />
</span>
</div>
@@ -692,7 +692,7 @@ function Map({ maxZoom = 1 }: MapProps) {
onFullScreenChange={setIsFullScreen}
onClick={handleFullScreenClick}
/>
<div className="absolute lg:right-[1.667vw] lg:bottom-[1.667vw] right-4 bottom-4 flex lg:gap-[0.556vw] gap-2">
<div className="absolute 2xl:right-[1.667vw] 2xl:bottom-[1.667vw] right-4 bottom-4 flex 2xl:gap-[0.556vw] gap-2">
<DisclaimerButton />
<PrivacyPolicyButton />
</div>
src/components/ModalContainer.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ function ModalContainer() {
className="absolute top-[1.111vw] right-[1.111vw]"
onClick={() => setModal(null)}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
<CloseIcon />
</span>
</Button>
src/components/PrivacyPolicyButton.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function PrivacyPolicyButton() {
onlyIcon
onClick={() => setModal(<PrivacyPolicyModal />)}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<QuestionIcon />
</span>
</Button>
src/components/SequenceSlider.tsx
+7 -8
View File
@@ -109,7 +109,6 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<AnimatePresence>
{imageLoaded < FRAME_COUNT && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-white"
@@ -168,19 +167,19 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
</AnimatePresence>
{imageLoaded === FRAME_COUNT && (
<>
<div className="absolute flex lg:gap-[0.556vw] gap-2 lg:left-[1.667vw] lg:top-[1.667vw] left-4 top-4">
<div className="absolute flex 2xl:gap-[0.556vw] gap-2 2xl:left-[1.667vw] 2xl:top-[1.667vw] left-4 top-4">
<Button
onlyIcon
variant="secondary"
className="!bg-white"
onClick={() => navigate("/")}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
<ArrowLeftIcon />
</span>
</Button>
<Button variant="secondary" size="small" className="max-md:hidden">
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
<InfoIcon />
</span>
<span>About Complex</span>
@@ -199,24 +198,24 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<Button
onlyIcon
variant="secondary"
className="absolute top-1/2 -translate-y-1/2 lg:left-[1.111vw] left-4"
className="absolute top-1/2 -translate-y-1/2 2xl:left-[1.111vw] left-4"
roundedFull
disabled={isAnimating || !isShowVideo}
onClick={() => handleSwipe("prev")}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<ArrowLeftIcon />
</span>
</Button>
<Button
onlyIcon
variant="secondary"
className="absolute top-1/2 -translate-y-1/2 lg:right-[1.111vw] right-4"
className="absolute top-1/2 -translate-y-1/2 2xl:right-[1.111vw] right-4"
roundedFull
disabled={isAnimating || !isShowVideo}
onClick={() => handleSwipe("next")}
>
<span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
<ArrowRightIcon />
</span>
</Button>
src/components/modals/DisclaimerModal.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
export default function DisclaimerModal() {
return (
<div className="bg-white z-40 lg:rounded-[0.556vw] rounded-lg py-[37px] px-8 lg:w-[29.236vw] md:max-lg:w-[54.818vw] w-full">
<h2 className="text-subheadline-m font-semibold py-6 lg:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
<div className="bg-white z-40 2xl:rounded-[0.556vw] rounded-lg py-[37px] px-8 2xl:w-[29.236vw] md:max-2xl:w-[54.818vw] w-full">
<h2 className="text-subheadline-m font-semibold py-6 2xl:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
Disclaimer
</h2>
<div className="flex flex-col gap-4">
src/components/modals/PrivacyPolicyModal.tsx
+8 -8
View File
@@ -1,9 +1,9 @@
function PrivacyPolicyModal() {
return (
<div className="lg:rounded-[1.111vw] bg-white rounded-2xl lg:p-[2.222vw] lg:w-[38.889vw] p-8">
<div className="bg-[#00BED7] lg:h-[0.139vw] h-0.5 lg:w-[8.646vw] lg:rounded-[0.208vw] rounded-[3px]" />
<div className="2xl:rounded-[1.111vw] bg-white rounded-2xl 2xl:p-[2.222vw] 2xl:w-[38.889vw] p-8">
<div className="bg-[#00BED7] 2xl:h-[0.139vw] h-0.5 2xl:w-[8.646vw] 2xl:rounded-[0.208vw] rounded-[3px]" />
<h2 className="text-subheadline-m font-semibold py-6">
Privacy Policy for IRTH Group and its companies:
Privacy Policy for IRTH Group and its companies:
</h2>
<div className="space-y-4">
<p className="text-caption-s">
@@ -17,13 +17,13 @@ function PrivacyPolicyModal() {
<p className="text-caption-m">Information We Collect:</p>
<ul className="text-caption-s list-disc ml-5">
<li>
Personal Information: We may collect personal information such as
Personal Information: We may collect personal information such as
your name, contact details, and address when you voluntarily
provide it to us, such as when you register through a form or
request information
</li>
<li>
Usage Information: We automatically collect certain information
Usage Information: We automatically collect certain information
about your device and usage of our website, such as your IP
address, browser type, operating system, pages visited, and time
spent on each page. This information helps us analyze trends,
@@ -42,19 +42,19 @@ function PrivacyPolicyModal() {
updates and notifications
</li>
<li>
To Improve Our Services: We analyze usage data to understand how
To Improve Our Services: We analyze usage data to understand how
our website is accessed and used, identify areas for improvement,
and enhance the user experience.
</li>
<li>
To Communicate with You: We may use your contact information to
To Communicate with You: We may use your contact information to
communicate with you about properties, services, promotions, and
updates. You can opt out of receiving marketing communications at
any time by following the unsubscribe instructions provided in our
emails or contacting us directly.
</li>
<li>
To Protect Our Rights: We may use your information to enforce our
To Protect Our Rights: We may use your information to enforce our
terms of service, protect our rights, or comply with legal
obligations.
</li>
src/components/ui/Button.tsx
+7 -7
View File
@@ -30,16 +30,16 @@ function Button({
variant !== "link" && [
size === "large" &&
(onlyIcon
? "lg:p-[0.833vw] p-3"
: "lg:px-[1.111vw] lg:py-[0.833vw] lg:gap-[0.556vw] px-4 py-3 gap-2"),
? "2xl:p-[0.833vw] p-3"
: "2xl:px-[1.111vw] 2xl:py-[0.833vw] 2xl:gap-[0.556vw] px-4 py-3 gap-2"),
size === "medium" &&
(onlyIcon
? "lg:p-[0.694vw] p-2.5"
: "lg:px-[0.972vw] lg:py-[0.694vw] lg:gap-[0.278vw] px-3 py-2.5 gap-1"),
? "2xl:p-[0.694vw] p-2.5"
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-2.5 gap-1"),
size === "small" &&
(onlyIcon
? "lg:p-[0.694vw] p-2.5"
: "lg:px-[0.972vw] lg:py-[0.694vw] lg:gap-[0.278vw] lg:text-[0.833vw] px-3 py-2.5 gap-1 text-xs"),
? "2xl:p-[0.694vw] p-2.5"
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] 2xl:text-[0.833vw] px-3 py-2.5 gap-1 text-xs"),
],
variant === "link" && "text-sm text-black/50 w-fit",
variant === "primary" &&
@@ -47,7 +47,7 @@ function Button({
variant === "secondary" && "bg-white text-[#0D1922]/70",
variant === "tertiary" &&
"text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:text-[#0D1922] disabled:bg-transparent",
roundedFull ? "rounded-full" : "lg:rounded-[0.833vw] rounded-xl",
roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
className
)}
>
src/index.css
+18 -16
View File
@@ -2,49 +2,51 @@
@import "tailwindcss";
@theme {
--breakpoint-lg: 1440px;
--breakpoint-2xl: 1440px;
}
body {
font-family: "Usual", sans-serif;
color: #0d1922;
}
@layer base {
body {
font-family: "Usual", sans-serif;
color: #0d1922;
}
button {
cursor: pointer;
outline: none;
button {
cursor: pointer;
outline: none;
}
}
@layer utilities {
.text-headline-l {
@apply lg:text-[clamp(56px,3.889vw,68px)] md:max-lg:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
@apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
}
.text-subheadline-l {
@apply lg:text-[clamp(40px,2.778vw,48px)] md:max-lg:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
@apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
}
.text-subheadline-m {
@apply lg:text-[clamp(24px,1.667vw,28px)] md:max-lg:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
@apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
}
.text-subheadline-s {
@apply lg:text-[clamp(20px,1.389vw,24px)] md:max-lg:text-[clamp(16px,2.315vw,20px)] leading-[140%];
@apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] leading-[140%];
}
.text-m {
@apply lg:text-[clamp(16px,1.111vw,19px)] md:max-lg:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
@apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
}
.text-s {
@apply lg:text-[clamp(14px,0.972vw,16px)] md:max-lg:text-[clamp(12px,1.737vw,14px)] text-xs leading-[140%];
@apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-xs leading-[140%];
}
.text-caption-m {
@apply lg:text-[clamp(12px,0.833vw,14px)] md:max-lg:text-[clamp(12px,1.563vw,18px)] text-[clamp(12px,3.333vw,18px)] leading-[135%];
@apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,18px)] text-[clamp(12px,3.333vw,18px)] leading-[135%];
}
.text-caption-s {
@apply lg:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
@apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
}
}
src/layout/DefaultLayout.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ function DefaultLayout() {
return (
<div className="select-none flex flex-col">
<Header />
<div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
<div className="h-[calc(100dvh-64px)] md:max-2xl:h-[calc(100dvh-56px)] 2xl:h-[calc(100dvh-3.889vw)]">
<Outlet />
</div>
<Footer />
src/layout/LayoutWithoutFooter.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ function LayoutWithoutFooter() {
return (
<div className="select-none flex flex-col">
<Header />
<div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
<div className="h-[calc(100dvh-3.889vw)] max-2xl:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
<Outlet />
</div>
</div>
src/main.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import MainPage from "./pages/MainPage.tsx";
import ModalContainer from "./components/ModalContainer.tsx";
import ComplexPage from "./pages/ComplexPage.tsx";
import FloorsPage from "./pages/FloorsPage.tsx";
import UnitTypesPage from "./pages/UnitTypesPages.tsx";
import UnitTypesPage from "./pages/UnitTypesPage.tsx";
import AboutPage from "./pages/AboutPages.tsx";
import FavouritesPage from "./pages/FavouritesPage.tsx";
import SearchPage from "./pages/SearchPage.tsx";
src/pages/UnitTypesPages.tsx → src/pages/UnitTypesPage.tsx
View File
vite.config.ts
+1 -1
View File
@@ -6,6 +6,6 @@ import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
server: {
host: true,
// host: true,
},
});