FIX: Handle Dynamic Content Display on Login Page (#853)

Fixed static content in the login page

frontend/src/components/log-in/Login.jsx

@@ -1,10 +1,10 @@
-import { Typography, Button } from "antd";
+import { Button } from "antd";
 import { Row, Col } from "antd";
 
-import loginRightBanner from "../../assets/login-right-panel.svg";
 import { getBaseUrl } from "../../helpers/GetStaticData";
 import "./Login.css";
 import { UnstractBlackLogo } from "../../assets";
+import { ProductContentLayout } from "./ProductContentLayout";
 
 let LoginForm = null;
 try {
@@ -23,12 +23,12 @@ function Login() {
   return (
     <div className="login-main">
       <Row>
-        <Col xs={24} md={12} className="login-left-section">
-          <div className="button-wraper">
-            {LoginForm ? (
-              <LoginForm handleLogin={handleLogin} />
-            ) : (
-              <>
+        {LoginForm ? (
+          <LoginForm handleLogin={handleLogin} />
+        ) : (
+          <>
+            <Col xs={24} md={12} className="login-left-section">
+              <div className="button-wraper">
                 <UnstractBlackLogo className="logo" />
                 <div>
                   <Button
@@ -38,33 +38,13 @@ function Login() {
                     Login
                   </Button>
                 </div>
-              </>
-            )}
-          </div>
-        </Col>
-        <Col xs={24} md={12} className="login-right-section">
-          <div className="right-section-text-wrapper">
-            <div className="right-title-cover">
-              <Typography.Title className="right-section-title">
-                UNLOCK VALUE FROM UNSTRUCTURED DATA.
-              </Typography.Title>
-            </div>
-            <div className="right-subtitle-cover">
-              <Typography align="center" className="right-subtitle">
-                Unstract is a no-code LLM platform that lets you automate even
-                the most complex workflows involving unstructured data, saving
-                you time, money, and automation headaches.
-              </Typography>
-            </div>
-            <div>
-              <img
-                src={loginRightBanner}
-                alt="login background"
-                className="login-background"
-              />
-            </div>
-          </div>
-        </Col>
+              </div>
+            </Col>
+            <Col xs={24} md={12} className="login-right-section">
+              <ProductContentLayout />
+            </Col>
+          </>
+        )}
       </Row>
     </div>
   );

frontend/src/components/log-in/ProductContentLayout.jsx

@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+
+import loginRightBanner from "../../assets/login-right-panel.svg";
+import { Typography } from "antd";
+
+const defaultUnstractContent = {
+  title: "UNLOCK VALUE FROM UNSTRUCTURED DATA.",
+  description:
+    "Unstract is a no-code LLM platform that lets you automate even the most complex workflows involving unstructured data, saving you time, money, and automation headaches.",
+};
+
+function ProductContentLayout({ title, description, image }) {
+  return (
+    <div className="right-section-text-wrapper">
+      <div className="right-title-cover">
+        <Typography.Title className="right-section-title">
+          {title || defaultUnstractContent.title}
+        </Typography.Title>
+      </div>
+      <div className="right-subtitle-cover">
+        <Typography align="center" className="right-subtitle">
+          {description || defaultUnstractContent.description}
+        </Typography>
+      </div>
+      <div>
+        <img
+          src={image || loginRightBanner}
+          alt="login background"
+          className="login-background"
+        />
+      </div>
+    </div>
+  );
+}
+
+ProductContentLayout.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.any,
+};
+
+export { ProductContentLayout };