upd

client/src/components/Button2.tsx

@@ -0,0 +1,50 @@
+interface Props {
+  variant?: "primary" | "secondary";
+  size?: "large" | "medium" | "small";
+  roundedFull?: boolean;
+  icon?: JSX.Element;
+  onlyIcon?: boolean;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+const variantClasses = {
+  primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]",
+  secondary: "",
+};
+
+const sizeClasses = {
+  large: "px-4 py-3 gap-2 text-base",
+  medium: "px-3.5 py-2.5 gap-1 text-sm",
+  small: "px-3 py-2.5 gap-1 text-xs",
+};
+
+function Button2({
+  variant = "primary",
+  size = "medium",
+  roundedFull = false,
+  icon,
+  onlyIcon = false,
+  children,
+  onClick,
+}: Props) {
+  return (
+    <button
+      className={`flex items-center transition-colors w-fit ${
+        variantClasses[variant]
+      } ${sizeClasses[size]} ${roundedFull ? "rounded-full" : "rounded-lg"} `}
+      onClick={onClick}
+    >
+      {onlyIcon ? (
+        icon
+      ) : (
+        <>
+          {icon}
+          {children}
+        </>
+      )}
+    </button>
+  );
+}
+
+export default Button2;

client/src/index.css

@@ -1,3 +1,5 @@
+@import url("/fonts/Mixcase/stylesheet.css");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -45,7 +47,7 @@ body {
 }
 
 .font-mixcase {
-  font-family: "Mixcase", sans-serif;
+  font-family: "Mixcase Unmixed", sans-serif;
 }
 
 @layer components {

client/src/layouts/WithFooterLayout.tsx

@@ -9,7 +9,7 @@ import DesktopHeader from "../components/header/Header/DesktopHeader";
 import MobileHeader from "../components/header/Header/MobileHeader";
 import Footer from "../components/Footer";
 
-const WithoutFooterLayout = () => {
+function WithFooterLayout() {
   const { modal } = useModal();
   const { setOnFullscreen } = useFullScreen();
   const onFullscreenHandle = useFullScreenHandle();
@@ -20,7 +20,10 @@ const WithoutFooterLayout = () => {
 
   return (
     <>
-      <FullScreen handle={onFullscreenHandle} className="flex flex-col min-h-screen">
+      <FullScreen
+        handle={onFullscreenHandle}
+        className="flex flex-col min-h-screen"
+      >
         {isMobile ? <MobileHeader /> : <DesktopHeader />}
         {modal}
         <Outlet />
@@ -28,6 +31,6 @@ const WithoutFooterLayout = () => {
       </FullScreen>
     </>
   );
-};
+}
 
-export default WithoutFooterLayout;
+export default WithFooterLayout;

client/src/main.tsx

@@ -5,7 +5,7 @@ import DefaultLayout from "./layouts/DefaultLayout";
 import MasterplanPage from "./pages/MasterplanPage";
 import ComplexPage from "./pages/ComplexPage";
 import ComplexWingPage from "./pages/ComplexWingPage";
-import AboutProjectsPage from "./pages/AboutProjectsPage";
+// import AboutProjectsPage from "./pages/AboutProjectsPage";
 import UnitTypesPage from "./pages/UnitTypesPage";
 import AboutPage from "./pages/AboutPage";
 // import ApartmentPage from "./pages/ApartmentPage";
@@ -13,7 +13,8 @@ import VirtualTourPage from "./pages/VirtualTourPage";
 import UnitTypesItemPage from "./pages/UnitTypesItemPage";
 import SearchPage2 from "./pages/SearchPage2";
 import FavoritesPage2 from "./pages/FavoritesPage2";
-import WithoutFooterLayout from "./layouts/WithFooterLayout";
+import WithFooterLayout from "./layouts/WithFooterLayout";
+import AboutProjects2Page from "./pages/AboutProjects2Page";
 
 const router = createBrowserRouter([
   {
@@ -44,11 +45,11 @@ const router = createBrowserRouter([
   },
   {
     path: "/",
-    element: <WithoutFooterLayout />,
+    element: <WithFooterLayout />,
     children: [
       {
         path: "about-projects",
-        element: <AboutProjectsPage />,
+        element: <AboutProjects2Page />,
       },
       {
         path: "about",

client/src/pages/AboutProjects2Page.tsx

@@ -0,0 +1,61 @@
+import Button2 from "../components/Button2";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+
+function AboutProjects2Page() {
+  return (
+    <div className="pt-[58px] space-y-[100px]">
+      <div className="px-6 pt-16 space-y-16">
+        <p className="text-[56px] text-[#0D1922] font-mixcase -tracking-[1.68px] uppercase leading-none">
+          Rove Home this residence a complete ecosystem that has everything
+          you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
+          thrive.
+        </p>
+        <div className="flex gap-6">
+          <div className="w-1/4 flex flex-col justify-between gap-6">
+            <div className="space-y-6">
+              <p className="text-xs font-semibold">ABOUT ROVE HOME</p>
+              <p className="text-2xl text-[#00BED7] font-semibold">
+                Embrace Rove’s forever-young spirit at Rove Home, where
+                inspiring design and vibrant art installations converge with an
+                exceptional location and an extended playlist of life-enhancing{" "}
+              </p>
+            </div>
+            <Button2 icon={<ArrowLeftIcon />}>Masterplan</Button2>
+          </div>
+          <div className="w-3/4">
+            <img
+              src=""
+              alt=""
+              className="aspect-[22/9] h-full w-full rounded-2xl object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative h-screen bg-blue-100">
+        <div className="absolute w-full h-full"></div>
+        <div className="absolute bottom-6 left-6 bg-white w-[378px] p-8 rounded-2xl space-y-8">
+          <div className="space-y-4">
+            <p className="text-2xl text-[#00BED7] font-semibold">Rove Home</p>
+            <p>
+              Rove Home branded residences are an extension of the Rove Hotels
+              brand. These branded residences are for hassle-free living, with
+              personalized expressions of your ideal living environment.
+            </p>
+            <p>
+              We’ve handpicked prime locations to ensure you get the very best.
+              From interiors that uplift and energise, and amenities that are
+              thoughtful and engaging to contemporarily stylish yet cosy
+              apartments, we decided that this is the kind of place where we’d
+              like to live – so we set out to build exactly that. We think
+              you’ll agree.
+            </p>
+          </div>
+          <div className=""></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AboutProjects2Page;