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,56 +29,66 @@ 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">
-      >
-          <div className="w-full flex justify-between py-12 pb-8 px-6">
         <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
-              <Home className="w-6" />My Projects
+          <Home className="w-6" />
+          My Projects
         </span>
         <div className="flex gap-2">
-              <Button variant="primary" onClick={() => {
+          <Button
+            variant="primary"
+            onClick={() => {
               downloadFlows();
-              }}>
+            }}
+          >
             <Download className="w-4 mr-2" />
             Download Database
           </Button>
-              <Button variant="primary" onClick={() => {uploadFlows();}}>
+          <Button
+            variant="primary"
+            onClick={() => {
+              uploadFlows();
+            }}
+          >
             <Upload className="w-4 mr-2" />
             Upload Database
           </Button>
-              <Button variant="primary" onClick={() => {addFlow().then((id) => {
+          <Button
-                  navigate("/flow/"+id);
+            variant="primary"
-                });}}>
+            onClick={() => {
+              addFlow().then((id) => {
+                navigate("/flow/" + id);
+              });
+            }}
+          >
             <Plus className="w-4 mr-2" />
             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
+          <CardComponent key={idx} flow={flow} id={flow.id} />
-                key={idx}
-                flow={flow}
-                id={flow.id}
-              />
         ))}
       </div>
     </div>