Help Center page added #1197

src/App.jsx

@@ -31,6 +31,7 @@ const NotFound = React.lazy(() => import("./pages/NotFound"));
 const Contributors = React.lazy(() =>
   import("./pages/FooterPages/ContributorPage"),
 );
+const HelpCenter = React.lazy(() => import("./pages/FooterPages/HelpCenter"));
 // ------------------------------------- Components ------------------------------------------------
 const Notifications = React.lazy(() => import("./components/Notification"));
 const SideBar = React.lazy(() => import("./components/SideBar"));
@@ -193,34 +194,43 @@ function App() {
                 }
               />
               <Route errorElement path="*" element={<NotFound />} />
-            </Route>
 
-            <Route
-              path="about"
-              element={
-                <ErrorBoundary inApp={true}>
-                  <About />
-                </ErrorBoundary>
-              }
-            />
+              <Route
+                path="about"
+                element={
+                  <ErrorBoundary inApp={true}>
+                    <About />
+                  </ErrorBoundary>
+                }
+              />
 
-            <Route
-              path="contributors"
-              element={
-                <ErrorBoundary inApp={true}>
-                  <Contributors />
-                </ErrorBoundary>
-              }
-            />
+              <Route
+                path="contributors"
+                element={
+                  <ErrorBoundary inApp={true}>
+                    <Contributors />
+                  </ErrorBoundary>
+                }
+              />
 
-            <Route
-              path="guidelines"
-              element={
-                <ErrorBoundary inApp={true}>
-                  <Guidelines />
-                </ErrorBoundary>
-              }
-            />
+              <Route
+                path="guidelines"
+                element={
+                  <ErrorBoundary inApp={true}>
+                    <Guidelines />
+                  </ErrorBoundary>
+                }
+              />
+
+              <Route
+                path="help-center"
+                element={
+                  <ErrorBoundary inApp={true}>
+                    <HelpCenter />
+                  </ErrorBoundary>
+                }
+              />
+            </Route>
 
             <Route
               path="settings"

src/components/Caption.jsx

@@ -19,7 +19,7 @@ export default function Caption({ caption }) {
   const isUrl = (part) => urlRegex.test(part);
 
   // Render each part of the caption
-  const renderCaptionParts = () => {
+  const RenderCaptionParts = () => {
     return parts.map((part, index) => {
       if (isUrl(part)) {
         // If the part is a URL, render it as a clickable link.
@@ -35,5 +35,5 @@ export default function Caption({ caption }) {
     });
   };
 
-  return <>{renderCaptionParts()}</>;
+  return <RenderCaptionParts />;
 }

src/pages/FooterPages/HelpCenter/index.css

@@ -0,0 +1,79 @@
+.faq {
+  display: flex;
+  justify-content: center;
+}
+.faqTitle {
+  font-size: 50px;
+  margin-bottom: 20px;
+}
+.faqSubtitle {
+  display: flex;
+  font-size: 20px;
+  justify-content: center;
+}
+
+/* Accordion Header */
+.accordion-header {
+  background-color: #f1f1f1;
+  padding: 20px;
+  cursor: pointer;
+}
+
+/* Accordion Content */
+.accordion-content {
+  padding: 10px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #eee;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  margin-bottom: 40px;
+}
+.accordionTrue {
+  margin-top: 20px;
+}
+
+.accordionTitle {
+  width: 70%;
+}
+
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.active,
+.accordion:hover {
+  background-color: #ccc;
+}
+
+.panel {
+  padding: 0 18px;
+  display: none;
+  background-color: white;
+  overflow: hidden;
+}
+
+@media only screen and (max-width: 460px) {
+  .faqTitle {
+    font-size: 20px;
+    margin-bottom: 20px;
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .faqSubtitle {
+    font-size: 15px;
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

src/pages/FooterPages/HelpCenter/index.jsx

@@ -0,0 +1,101 @@
+import "./index.css";
+
+import React, { useState } from "react";
+
+import Faq from "../../../assets/preview.webp";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import { useNavigate } from "react-router-dom";
+
+const accordionData = [
+  {
+    key: 1,
+    title: "What is Dummygram ?",
+    content:
+      "Dummygram is a social media platform that allows users to share photos, videos, and stories with their followers. ",
+  },
+  {
+    key: 2,
+    title: "How To Upload Images ?",
+    content: "Click on Post on left side menu and then click on upload Images",
+  },
+  {
+    key: 3,
+    title: "How To See Other User Profile",
+    content: "Click on Post Profile Avatar Image",
+  },
+  {
+    key: 4,
+    title: "How To Logout",
+    content:
+      "Click on your profile in side menu you will get DropDown click on logout",
+  },
+  // Add more sections as needed
+];
+
+export default function HelpCenter() {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <div className="footer-page-header-img" style={{ position: "relative" }}>
+        <img src={Faq} style={{ objectFit: "cover" }} />
+      </div>
+
+      <div
+        className="back-icon"
+        style={{ height: "90px", cursor: "pointer" }}
+        onClick={() => navigate("/dummygram")}
+      >
+        <KeyboardBackspaceIcon className="icon" /> <span>Back to Home</span>
+      </div>
+
+      <section className="faq">
+        <div>
+          <h1 className="faqTitle">Dummygram Frequently Asked Question</h1>
+          <p className="faqSubtitle">
+            Have a question in mind? We've got the answers!
+          </p>
+        </div>
+      </section>
+
+      <div style={{ marginTop: "60px", marginBottom: "60px" }}>
+        {accordionData.map((section) => {
+          return (
+            <Accordion
+              key={section.key}
+              title={section.title}
+              content={section.content}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+const Accordion = ({ title, content }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <div className="accordionTitle">
+          {/* <div className="accordion-header" onClick={toggleAccordion}>
+          </div> */}
+          <button
+            className={`accordion ${isOpen == true && "accordionTrue"}`}
+            onClick={toggleAccordion}
+          >
+            {title}
+          </button>
+          <hr />
+          {isOpen && <div className="accordion-content">{content}</div>}
+        </div>
+      </div>
+    </>
+  );
+};

src/pages/NotFound/index.jsx

@@ -1,4 +1,5 @@
 import "./index.css";
+
 import { Box, Button, Container, Typography } from "@mui/material";
 
 import Grid from "@mui/material/Grid";

src/pages/index.js

@@ -3,6 +3,7 @@ import ChatPage from "./Chat";
 import Contributor from "./FooterPages/ContributorPage";
 import Feedback from "./FooterPages/Feedback";
 import Guidelines from "./FooterPages/Guidelines";
+import HelpCenter from "./FooterPages/HelpCenter";
 import LoginScreen from "./Login";
 import PostView from "./PostView";
 import Profile from "./Profile";
@@ -14,6 +15,7 @@ export {
   Contributor,
   Feedback,
   Guidelines,
+  HelpCenter,
   LoginScreen,
   PostView,
   Profile,