[Ideation branch] - For reference only

package.json

@@ -41,6 +41,7 @@
     "lodash-webpack-plugin": "^0.11.6",
     "lodash.find": "^4.6.0",
     "lodash.startcase": "^4.4.0",
+    "lucide-react": "^0.308.0",
     "mdx-utils": "^0.2.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",

src/components/NavBar/MegaMenu/index.js

@@ -13,16 +13,16 @@ const data = {
   documentation: {
     explore: {
       title: 'Explore our documentation',
-      text: 'Learn how to install the Data Management System (DMS) or individual products using our easy-to-use guides.',
+      text: 'Learn how to install and use o individual products using our easy-to-use tutorials.',
       link: {
         to: '/documentation/',
         text: 'Documentation Overview',
       },
     },
     sections: [
       {
-        title: 'Products',
-        color: 'dark-blue',
+        title: 'User Docs',
+        color: 'blue',
         links: [
           {
             to: 'documentation/song',
@@ -53,32 +53,179 @@ const data = {
         ],
       },
       {
-        title: 'dms bundle',
-        color: 'yellow-green',
+        title: 'Developer Docs',
+        color: 'dark-blue',
         links: [
           {
-            to: '/documentation/dms/',
-            text: 'Introduction',
+            to: 'documentation/song',
+            text: 'Song',
           },
           {
-            to: '/documentation/dms/installation/installation',
-            text: 'How to Install',
+            to: 'documentation/score',
+            text: 'Score',
+          },
+
+          {
+            to: 'documentation/maestro',
+            text: 'Maestro',
+          },
+          {
+            to: 'documentation/arranger',
+            text: 'Arranger',
           },
 
           {
-            to: '/documentation/dms/admin-guide/tasks',
-            text: 'For Administrators',
+            to: 'documentation/ego',
+            text: 'Ego',
+          },
+          {
+            to: 'documentation/dms-ui',
+            text: 'DMS-UI',
+          },
+        ],
+      },
+      {
+        title: 'System Admin Docs',
+        color: 'yellow',
+        links: [
+          {
+            to: 'documentation/song',
+            text: 'Deployment',
+          },
+          {
+            to: 'documentation/score',
+            text: 'Load Balancing',
+          },
+          {
+            to: 'documentation/ego',
+            text: 'Logging',
+          },
+          {
+            to: 'documentation/ego',
+            text: 'Recovery',
+          },
+        ],
+      },
+    ],
+  },
+  tutorials: {
+    explore: {
+      title: 'Explore our tutorials and Tutorials',
+      text: 'Covering a range of topics for data consumers, providers, and administrators, these step-by-step tutorials provide practical insight and hands-on experience.',
+      link: {
+        to: '/tutorials/',
+        text: 'tutorials and Tutorials',
+      },
+    },
+    sections: [
+      {
+        title: 'Consumers',
+        color: 'blue',
+        links: [
+          {
+            to: 'documentation/song',
+            text: 'Downloading Data',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Visualizing data with Jbrowse2',
+          },
+        ],
+      },
+      {
+        title: 'Providers',
+        color: 'dark-blue',
+        links: [
+          {
+            to: 'documentation/song',
+            text: 'Submitting Data (CLI)',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Bulk Data Submission (Scripting)',
+          },
+        ],
+      },
+      {
+        title: 'Administrators',
+        color: 'yellow',
+        links: [
+          {
+            to: 'documentation/song',
+            text: 'Local Setup',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Server Setup',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Data Modeling',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Portal Customization',
+          },
+          {
+            to: 'documentation/song',
+            text: 'Managing Permissions',
+          },
+        ],
+      },
+    ],
+  },
+  community: {
+    explore: {
+      title: 'Check out our Community Information',
+      text: 'Connect with our community resources covering feature requests, deployment showcases, events, office hours and scholarly contributions.      ',
+      link: {
+        to: '',
+        text: '',
+      },
+    },
+    sections: [
+      {
+        title: '',
+        color: 'blue',
+        links: [
+          {
+            text: 'Feature Requests'
+          },
+          {
+            text: 'How to Contribute'
           },
           {
-            to: '/documentation/dms/user-guide/data-portal',
-            text: 'For Users',
+            text: 'Public Roadmap'
+          },
+          {
+            text: 'Deployment List'
           },
         ],
       },
+      {
+        title: '',
+        color: 'dark-blue',
+        links: [
+          {
+            text: 'Events'
+          },
+          {
+            text: 'Office Hours'
+          },
+          {
+            text: 'Publications '
+          },
+          {
+            text: 'How to Cite Us '
+          },
+
+        ],
+      },
     ],
   },
 };
 
+
 const MegaMenu = ({ className, closeMenus, megaMenuType, path }) => {
   if (!megaMenuType) {
     // leave an empty element to help with CSS animations

src/components/NavBar/MegaMenu/styles.scss

@@ -99,7 +99,16 @@
     }
   }
 
-  .yellow-green-section {
+  .blue-section {
+    max-width: 700px;
+
+    @include breakpoint(navmenu-up) {
+      max-height: 70px;
+      max-width: 400px;
+    }
+  }
+
+  .yellow-section {
     max-width: 500px;
 
     @include breakpoint(navmenu-up) {

src/components/NavBar/MegaMenuLink/index.js

@@ -7,6 +7,10 @@ const MegaMenuLink = ({ children, isActive, name, path, toggleMegaMenu, type })
 
   const megaMenuActive = path.startsWith(`/${type}`);
 
+  const shouldDisplayArrow = (name) => {
+    return name === 'Documentation' || name === 'Tutorials';
+  };
+
   return (
     <div className="megamenu-link-box" key={key} activeClassName="active-item">
       <div style={{ flex: '1', display: 'flex' }}>
@@ -18,7 +22,7 @@ const MegaMenuLink = ({ children, isActive, name, path, toggleMegaMenu, type })
           onClick={() => toggleMegaMenu(type)}
         >
           {name}
-          {name === 'Documentation' ? (
+          {shouldDisplayArrow(name) ? (
             <Icon
               img="arrowDownNavbar"
               className={`documentation-down-arrow ${

src/components/NavBar/index.js

@@ -18,6 +18,7 @@ import {
 import { SLACK_LINK } from 'constants/external-links';
 import logo from './assets/overture_logo.svg';
 import './styles.scss';
+import { Construction } from 'lucide-react';
 
 class NavBar extends Component {
   render() {
@@ -71,8 +72,43 @@ class NavBar extends Component {
                   )}
                 </div>
               </MegaMenuLink>
+              <MegaMenuLink
+                isActive={megaMenuType === 'tutorials'}
+                name={<><Construction style={{ marginRight: '8px' }}/>Tutorials</>}
+                path={path}
+                toggleMegaMenu={toggleMegaMenu}
+                type="tutorials"
+              >
+                <div ref={(ref) => (this.popoverRef = ref)}>
+                  {mobileMegaCheck && (
+                    <MegaMenu
+                      className="open"
+                      closeMenus={closeMenus}
+                      megaMenuType="tutorials"
+                      path={path}
+                    />
+                  )}
+                </div>
+              </MegaMenuLink>
               <NavLink closeMenus={closeMenus} url={CASE_STUDIES_PATH} name="Case Studies" />
-              {/* <NavLink closeMenus={closeMenus} url={COMMUNITY_PATH} name="Community" /> */}
+              <MegaMenuLink
+                isActive={megaMenuType === 'community'}
+                name={<><Construction style={{ marginRight: '8px' }}/>Community</>}
+                path={path}
+                toggleMegaMenu={toggleMegaMenu}
+                type="community"
+              >
+                <div ref={(ref) => (this.popoverRef = ref)}>
+                  {mobileMegaCheck && (
+                    <MegaMenu
+                      className="open"
+                      closeMenus={closeMenus}
+                      megaMenuType="community"
+                      path={path}
+                    />
+                  )}
+                </div>
+              </MegaMenuLink>             
               <NavLink closeMenus={closeMenus} url={SERVICES_PATH} name="Services" />
               <NavLink closeMenus={closeMenus} url={ABOUT_US_PATH} name="About Us" />
             </div>

src/components/Terminal/index.js

@@ -19,7 +19,6 @@ export const Terminal = ({ prompts }) => (
     <div className="Terminal-inner">
       {prompts.map(p => (
         <div key={p} className="Terminal-text">
-          <span className="pr2">$</span>
           {p}
         </div>
       ))}

src/components/Terminal/styles.scss

@@ -6,6 +6,7 @@
   padding: 16px 2px 2px;
   border-radius: 4px;
   margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.4);
 }
 
 .Terminal-inner {
@@ -14,11 +15,12 @@
   padding: 24px;
   margin: 8px;
   font-family: $font-monospace;
-  font-size: 18px;
+  font-size: 15px;
 }
 
 .Terminal-text {
   color: $terminal-text;
+  margin-bottom: 10px;
 }
 
 .Browser {