feat:added about page

src/App.tsx

@@ -13,17 +13,18 @@ import CreateBlog from "./app/blog/CreateBlog";
 import ShowBlog from "./app/blog/ShowBlog";
 import NotBlog from "./app/misc/NoBlog";
 import AboutUser from "./app/user/AboutUser";
+import About from "./app/platform/About";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <RootLayout />,
     children: [
-  {
-    path: "/",
-    element: <Home />,
-  },
-]
+      {
+        path: "/",
+        element: <Home />,
+      },
+    ],
   },
   {
     path: "/:blogId",
@@ -33,7 +34,6 @@ const router = createBrowserRouter([
     path: "/",
     element: <PrivateRoutes />,
     children: [
-
       {
         path: "/user/:userId",
         element: <AboutUser />,
@@ -58,6 +58,16 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: "/",
+    element: <RootLayout />,
+    children: [
+      {
+        path: "/about",
+        element: <About />,
+      },
+    ],
+  },
   {
     path: "/auth/login",
     element: <Login />,
@@ -74,7 +84,7 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <Stack sx={{ background: "#BDBDBD" }}>
+    <Stack sx={{ background: "#FAF8FF" }}>
       <RouterProvider router={router} />
     </Stack>
   );

src/app/platform/About.tsx

@@ -0,0 +1,76 @@
+import { IconButton, Stack, Typography } from "@mui/material";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import InstagramIcon from "@mui/icons-material/Instagram";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+
+export default function About() {
+  return (
+    <Stack paddingY={8} justifyContent={"center"} alignItems={"center"}>
+      <Stack
+        width={"70%"}
+        padding={2}
+        direction={"row"}
+        alignItems={"center"}
+        gap={5}
+      >
+        <Stack className="image">
+          <img src="/png/about.png" width={600} alt="" />
+        </Stack>
+
+        <Stack
+          flexGrow={1}
+          gap={8}
+          justifyContent={"center"}
+          alignItems={"start"}
+        >
+          <Typography variant="h3">Know About Us</Typography>
+
+          <Typography variant="body1">
+            Pensdown is a platform for writers to share their thoughts and ideas
+            with the world. It is a place where you can write about anything you
+            want and share it with the world.
+          </Typography>
+
+          <Stack
+            className="socials"
+            direction={"row"}
+            gap={4}
+            justifyContent={"center"}
+            width={"100%"}
+          >
+            <IconButton>
+              <InstagramIcon
+                sx={{
+                  fontSize: "38px",
+                  "&:hover": {
+                    color: "#ff471a",
+                  },
+                }}
+              />
+            </IconButton>
+            <IconButton>
+              <TwitterIcon
+                sx={{
+                  fontSize: "38px",
+                  "&:hover": {
+                    color: "#1DA1F2",
+                  },
+                }}
+              />
+            </IconButton>
+            <IconButton>
+              <LinkedInIcon
+                sx={{
+                  fontSize: "38px",
+                  "&:hover": {
+                    color: "#0e76a8",
+                  },
+                }}
+              />
+            </IconButton>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

src/layout/Footer.tsx

@@ -7,7 +7,7 @@ export default function Footer() {
       <Typography variant="caption">
         <a style={{
           paddingInline: '5px',
-        }} className="footer-link" href="/" >
+        }} className="footer-link" href="/about" >
           About 
           </a>
           •

src/layout/headeroptions/Header.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Link, Stack, Typography } from "@mui/material";
 import HeaderActions from "./HeaderActions";
 
 export default function Header() {
@@ -23,7 +23,15 @@ export default function Header() {
             src="/png/mainicon.png"
             alt=""
           />
-          <Typography fontSize={20} fontWeight={500}>
+          <Typography
+            component={Link}
+            href="/"
+            style={{
+              textDecoration: "none",
+            }}
+            fontSize={20}
+            fontWeight={500}
+          >
             Pensdown
           </Typography>
         </Stack>