upd

client/src/components/UnitTypesPage/UnitTypeCard.tsx

@@ -27,7 +27,7 @@ function UnitTypeCard({ wing, floor, name, desc, imageSrc, onClick }: Props) {
         </div> */}
       </div>
       <div className="flex justify-center">
-        <img src={imageSrc} alt="" className="h-[294px] pointer-events-none" />
+        <img src={imageSrc} alt="" className="aspect-square pointer-events-none" />
       </div>
       <div className="space-y-1">
         <p>{desc}</p>

client/src/pages/UnitTypesPage.tsx

@@ -24,18 +24,19 @@ function UnitTypesPage() {
   }, []);
 
   return (
-    <div className="pt-[calc(58px+24px)] p-6 space-y-6 bg-[#F3F3F2]">
+    <div className="mt-14 lg:p-6 sm:px-4 sm:py-6 p-4 pb-12 space-y-6 bg-[#F3F3F2]">
       <div className="text-2xl font-semibold pb-4 border-b border-[#E2E2DC] flex gap-4">
-        <p className="">Unit Types</p>
-        <p className="text-[#73787C]">8</p>
+        <p className="text-[#0D1922]">
+          Unit Types <span className="text-[#73787C]">8</span>
+        </p>
       </div>
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid xl:grid-cols-4 sm:grid-cols-2 lg:gap-4 sm:gap-3 gap-2">
         <UnitTypeCard
           wing="West Wing"
           floor="Floor 5-21"
           desc="Total Area: 341-366 Sqft"
           name="Studio Flex"
-          imageSrc="/images/layouts/studio_flex_left.png"
+          imageSrc="/images/pages/UnitTypes/studio-flex.jpg"
           onClick={() => navigate("studio-flex")}
         />
         <UnitTypeCard
@@ -43,7 +44,7 @@ function UnitTypesPage() {
           floor="Floor 5-21 / 24-31"
           desc="Total Area: 386-416 Sqft"
           name="Studio²"
-          imageSrc="/images/layouts/studio_left.png"
+          imageSrc="/images/pages/UnitTypes/studio-2.jpg"
           onClick={() => navigate("studio-2")}
         />
         <UnitTypeCard
@@ -51,7 +52,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 622 Sqft"
           name="1 Bedroom² Type A"
-          imageSrc="/images/layouts/1br_a_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-a.jpg"
           onClick={() => navigate("1br-type-a")}
         />
         <UnitTypeCard
@@ -59,7 +60,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 751-770 Sqft"
           name="1 Bedroom² Type B"
-          imageSrc="/images/layouts/1br_b_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-b.jpg"
           onClick={() => navigate("1br-type-b")}
         />
         <UnitTypeCard
@@ -67,7 +68,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 608-642 Sqft"
           name="1 Bedroom² Type C"
-          imageSrc="/images/layouts/1br_c_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-c.jpg"
           onClick={() => navigate("1br-type-c")}
         />
         <UnitTypeCard
@@ -75,7 +76,7 @@ function UnitTypesPage() {
           floor="Floor 5-21 / 24-31"
           desc="Total Area: 607-619 Sqft"
           name="1 Bedroom² Type D"
-          imageSrc="/images/layouts/1br_d_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-d.jpg"
           onClick={() => navigate("1br-type-d")}
         />
         <UnitTypeCard
@@ -83,7 +84,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 914 Sqft"
           name="2 Bedroom² Type A"
-          imageSrc="/images/layouts/2br_a_left.png"
+          imageSrc="/images/pages/UnitTypes/2br-type-a.jpg"
           onClick={() => navigate("2br-type-a")}
         />
         <UnitTypeCard
@@ -91,7 +92,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 1,058 Sqft"
           name="2 Bedroom² Type B"
-          imageSrc="/images/layouts/2br_b_left.png"
+          imageSrc="/images/pages/UnitTypes/2br-type-b.jpg"
           onClick={() => navigate("2br-type-b")}
         />
       </div>