created landing page and guest features

src/layouts/authentication/sign-up/index.js

@@ -25,6 +25,7 @@ import VerificationDialog from "./VerificationDialog";
 import { useNavigate } from "react-router-dom";
 import { useUser } from "utils/userContext";
 import baseURL from "config";
+import TermModal from "./term";
 
 function Cover() {
   const [email, setEmail] = useState("");
@@ -117,6 +118,15 @@ function Cover() {
         alert("An error occurred during registration.");
       });
   };
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
 
   return (
     <BasicLayout image={bgImage}>
@@ -190,15 +200,17 @@ function Cover() {
                 &nbsp;&nbsp;I agree the&nbsp;
               </MDTypography>
               <MDTypography
-                component="a"
-                href="#"
+                // component="a"
+                // href="#"
                 variant="button"
                 fontWeight="bold"
                 color="info"
                 textGradient
+                onClick={handleOpenModal}
               >
                 Terms and Conditions
               </MDTypography>
+              <TermModal open={isModalOpen} onClose={handleCloseModal} />
             </MDBox>
             <MDBox mt={4} mb={1}>
               <MDButton

src/layouts/authentication/sign-up/term.js

@@ -0,0 +1,107 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import Modal from "@mui/material/Modal";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Grid";
+import MDTypography from "components/MDTypography";
+
+function TermModal({ open, onClose }) {
+  const cardContentStyle = {
+    // Add your desired width and height for the modal
+    width: "80%", // Adjust as needed
+    height: "80vh", // Adjust as needed
+    overflowY: "scroll", // Add a vertical scroll when the content exceeds the height
+  };
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      <Card style={cardContentStyle}>
+        <CardContent>
+          <Grid container spacing={2}>
+            <Grid item xs={12} mt={5}>
+              <MDTypography variant="h5" fontWeight="medium" textAlign="center">
+                Welcome to the Digital Newspaper Advertisement Analyzer.
+              </MDTypography>
+              <MDTypography mt={2} variant="h6" fontWeight="medium">
+                Please read these Terms and Conditions (&quot;Terms&quot;) carefully before using
+                this service.
+              </MDTypography>
+              <MDTypography mt={2} fontWeight="bold">
+                Acceptance of Terms
+              </MDTypography>
+              <MDTypography variant="h6" fontWeight="medium">
+                By using the Digital Newspaper Advertisement Analyzer (hereafter referred to as
+                &quot;the Service&quot;), you agree to comply with and be bound by these Terms. If
+                you do not agree with any part of these Terms, you should not use the Service.
+                <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Use of the Service
+                </MDTypography>
+                You must be at least 18 years old to use this Service. You are responsible for
+                maintaining the security of your account and password. The Service cannot and will
+                not be liable for any loss or damage from your failure to comply with this security
+                obligation. <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Privacy
+                </MDTypography>
+                Your use of the Service is also governed by our Privacy Policy. Please review our
+                Privacy Policy to understand our data practices. <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  User Content
+                </MDTypography>
+                You retain the rights to your content, but you grant the Service a worldwide,
+                royalty-free, non-exclusive license to use, distribute, reproduce, modify, adapt,
+                and publish your content solely for the purpose of displaying, distributing, and
+                promoting the Service. You agree not to use the Service to submit or link to any
+                content which is defamatory, abusive, hateful, threatening, spam, or spam-like.{" "}
+                <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Intellectual Property
+                </MDTypography>
+                The Service and its original content (excluding user-provided content) are protected
+                by copyright, trademark, patent, trade secret, and other laws. You may not modify,
+                reproduce, distribute, create derivative works or adaptations of, publicly display
+                or in any way exploit any of the content in whole or in part except as expressly
+                authorized by the Service. Trademarks, service marks, graphics, and logos used in
+                connection with the Service are trademarks or registered trademarks of the
+                Service&apos;s licensors. You are granted no right or license with respect to any of
+                the aforesaid trademarks. <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Termination
+                </MDTypography>
+                We may terminate or suspend access to our Service immediately, without prior notice
+                or liability, for any reason whatsoever, including without limitation if you breach
+                the Terms. <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Changes to the Terms
+                </MDTypography>
+                We reserve the right, at our sole discretion, to modify or replace these Terms at
+                any time. If a revision is material, we will try to provide at least 30 days&apos;
+                notice prior to any new terms taking effect. What constitutes a material change will
+                be determined at our sole discretion. <br></br>
+                <MDTypography mt={2} fontWeight="bold">
+                  Contact Us{" "}
+                </MDTypography>
+                If you have any questions about these Terms, please contact us. <br></br>By using
+                the Digital Newspaper Advertisement Analyzer, you agree to these Terms and
+                Conditions. Thank you for using our service!
+              </MDTypography>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Modal>
+  );
+}
+
+TermModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default TermModal;

src/layouts/landing/App.js

@@ -9,18 +9,52 @@ import Action from "./Page/Action";
 import "./index.css";
 // import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 // import DashboardNavbar from "examples/Navbars/DashboardNavbar";
-import backgroundImage from "./Assets/images/background8.jpg";
+// import backgroundImage from "./Assets/images/background8.jpg";
+import DefaultNavbar from "examples/Navbars/DefaultNavbar";
+import Configurator from "examples/Configurator";
+import { useMaterialUIController, setOpenConfigurator } from "context";
+import Icon from "@mui/material/Icon";
+import MDBox from "components/MDBox";
 
 function App() {
   const containerStyle = {
-    backgroundImage: `url(${backgroundImage})`,
+    // backgroundImage: `url(${backgroundImage})`,
     backgroundSize: "cover",
     backgroundRepeat: "no-repeat",
-    backgroundColor: "rgba(255, 255, 255, 0.8)",
   };
+  const [controller, dispatch] = useMaterialUIController();
+  const { openConfigurator } = controller;
+  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+  const configsButton = (
+    <MDBox
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      width="3.25rem"
+      height="3.25rem"
+      bgColor="white"
+      shadow="sm"
+      borderRadius="50%"
+      position="fixed"
+      right="2rem"
+      bottom="2rem"
+      zIndex={99}
+      color="dark"
+      sx={{ cursor: "pointer" }}
+      onClick={handleConfiguratorOpen}
+    >
+      <Icon fontSize="small" color="inherit">
+        settings
+      </Icon>
+    </MDBox>
+  );
+
   return (
     <div className="landing-page" style={containerStyle}>
       <main className="main">
+        <DefaultNavbar />
+        <Configurator />
+        {configsButton}
         <Hero />
         <Snippets />
         <Access />

src/layouts/upload/guestindex.js

@@ -3,14 +3,67 @@ import React from "react";
 import CenteredTabs from "./tabs";
 import MDBox from "components/MDBox";
 import DefaultNavbar from "examples/Navbars/DefaultNavbar";
+import Configurator from "examples/Configurator";
+import { useMaterialUIController, setOpenConfigurator } from "context";
+import Icon from "@mui/material/Icon";
+import SignInModal from "./guestsign";
+import { useEffect } from "react";
+import { useState } from "react";
 
 function GuestExtractor() {
+  const [controller, dispatch] = useMaterialUIController();
+  const { openConfigurator } = controller;
+  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+  const configsButton = (
+    <MDBox
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      width="3.25rem"
+      height="3.25rem"
+      bgColor="white"
+      shadow="sm"
+      borderRadius="50%"
+      position="fixed"
+      right="2rem"
+      bottom="2rem"
+      zIndex={99}
+      color="dark"
+      sx={{ cursor: "pointer" }}
+      onClick={handleConfiguratorOpen}
+    >
+      <Icon fontSize="small" color="inherit">
+        settings
+      </Icon>
+    </MDBox>
+  );
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      handleOpenModal();
+    }, 10000); // 5000 milliseconds (5 seconds)
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
   return (
     <>
       <DefaultNavbar />
+      <Configurator />
+      {configsButton}
       <MDBox p={10}>
         <MDBox mt={5}>
           <CenteredTabs />
+          <SignInModal open={isModalOpen} onClose={handleCloseModal} />
         </MDBox>
       </MDBox>
     </>

src/layouts/upload/guestsign.js

@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import Modal from "@mui/material/Modal";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Grid";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+import signinimage from "./signin.gif";
+import MDBox from "components/MDBox";
+import { Link } from "react-router-dom";
+
+function SignInModal({ open, onClose }) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      <Card>
+        <CardContent>
+          <Grid container spacing={2}>
+            <Grid item xs={12} mt={5}>
+              <MDTypography variant="h3" fontWeight="medium" textAlign="center">
+                Explore Extended Features Personalized For You.
+              </MDTypography>
+              <MDTypography variant="h3" fontWeight="medium" textAlign="center">
+                Join With Us
+              </MDTypography>
+              <MDBox display="flex" justifyContent="center" alignItems="center">
+                <img src={signinimage} alt="undraw-Add-user-re-5oib" border="0" />
+              </MDBox>
+            </Grid>
+            <Grid item xs={12}></Grid>
+            <Grid item xs={12} style={{ display: "flex", justifyContent: "center" }}>
+              <MDButton
+                variant="gradient"
+                color="info"
+                component={Link}
+                to={"/authentication/sign-up"}
+                size="large"
+              >
+                Sign Up
+              </MDButton>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Modal>
+  );
+}
+
+SignInModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default SignInModal;