Added description to pages

src/frontend/src/pages/CommunityPage/index.tsx

@@ -67,7 +67,7 @@ export default function CommunityPage() {
   }, []);
   return (
     <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
-      <div className="w-full flex justify-between py-12 pb-8 px-6">
+      <div className="w-full flex justify-between py-12 pb-2 px-6">
         <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
           <Users2 className="w-6" />
           Community Examples
@@ -81,6 +81,9 @@ export default function CommunityPage() {
           </a>
         </div>
       </div>
+      <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
+      Discover and learn from shared examples by the LangFlow community. We welcome new example contributions that can help our community explore new and powerful features.
+      </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (

src/frontend/src/pages/MainPage/index.tsx

@@ -8,7 +8,16 @@ import ExtraSidebar from "../../components/ExtraSidebarComponent";
 import { ReactFlowProvider } from "reactflow";
 import FlowPage from "../FlowPage";
 import { useContext, useEffect, useState } from "react";
-import { SunIcon, MoonIcon, BellIcon, GithubIcon, Download, Upload, Plus, Home } from "lucide-react";
+import {
+  SunIcon,
+  MoonIcon,
+  BellIcon,
+  GithubIcon,
+  Download,
+  Upload,
+  Plus,
+  Home,
+} from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
 import { alertContext } from "../../contexts/alertContext";
@@ -20,58 +29,68 @@ import { FaGithub } from "react-icons/fa";
 
 import _ from "lodash";
 
-import { updateFlowInDatabase, uploadFlowsToDatabase } from "../../controllers/API";
+import {
+  updateFlowInDatabase,
+  uploadFlowsToDatabase,
+} from "../../controllers/API";
 import { MenuBar } from "../../components/headerComponent/components/menuBar";
 import { CardComponent } from "./components/cardComponent";
 import { useNavigate } from "react-router-dom";
 export default function HomePage() {
-  const {
+  const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
-    flows,
+    useContext(TabsContext);
-    setTabId,
-    downloadFlows,
-    uploadFlows,
-    addFlow,
-  } = useContext(TabsContext);
   useEffect(() => {
     setTabId("");
-  }, [])
+  }, []);
   const navigate = useNavigate();
   return (
-      <div
+    <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
-        className="w-full h-full flex overflow-auto flex-col bg-muted px-16"
+      <div className="w-full flex justify-between py-12 pb-2 px-6">
-      >
+        <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
-          <div className="w-full flex justify-between py-12 pb-8 px-6">
+          <Home className="w-6" />
-            <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
+          My Projects
-              <Home className="w-6" />My Projects
+        </span>
-            </span>
+        <div className="flex gap-2">
-            <div className="flex gap-2">
+          <Button
-              <Button variant="primary" onClick={() => {
+            variant="primary"
-                downloadFlows();
+            onClick={() => {
-              }}>
+              downloadFlows();
-              <Download className="w-4 mr-2" />
+            }}
-              Download Database
+          >
-              </Button>
+            <Download className="w-4 mr-2" />
-              <Button variant="primary" onClick={() => {uploadFlows();}}>
+            Download Database
-              <Upload className="w-4 mr-2" />
+          </Button>
-              Upload Database
+          <Button
-              </Button>
+            variant="primary"
-              <Button variant="primary" onClick={() => {addFlow().then((id) => {
+            onClick={() => {
-                  navigate("/flow/"+id);
+              uploadFlows();
-                });}}>
+            }}
-              <Plus className="w-4 mr-2" />
+          >
-              New Project
+            <Upload className="w-4 mr-2" />
-              </Button>
+            Upload Database
-            </div>
+          </Button>
-          </div>
+          <Button
-          <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            variant="primary"
-            {flows.map((flow, idx) => (
+            onClick={() => {
-              <CardComponent
+              addFlow().then((id) => {
-                key={idx}
+                navigate("/flow/" + id);
-                flow={flow}
+              });
-                id={flow.id}
+            }}
-              />
+          >
-            ))}
+            <Plus className="w-4 mr-2" />
-          </div>
+            New Project
+          </Button>
+        </div>
       </div>
+      <span className="flex pb-8 px-6 text-muted-foreground w-[60%]">
+        Manage your personal projects. Download or upload your complete project
+        collection.
+      </span>
+      <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {flows.map((flow, idx) => (
+          <CardComponent key={idx} flow={flow} id={flow.id} />
+        ))}
+      </div>
+    </div>
   );
 }