added all sections

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState, useRef } from 'react'
+
+function HomeTabFeatured () {
+  const [state, setState] = useState<{
+    searchInput: string
+  }>({
+    searchInput: ''
+  })
+  useEffect(() => {
+  
+    document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
+    
+    return () => {
+      document.removeEventListener("keyup", handleSearchKeyDown)
+    }
+  }, [])
+
+  const searchInputRef = useRef(null)
+  const remiAudioEl = useRef(null)
+
+  const playRemi = async () => {
+    remiAudioEl.current.play()
+  }
+  const handleSearchKeyDown = (e: KeyboardEvent) => {
+    if (e.target !== searchInputRef.current) return
+    if (e.key === "Enter") {
+      openLink()
+      setState(prevState => {
+        return { ...prevState, searchInput: '' }
+      })
+      searchInputRef.current.value = ""
+    }
+  }
+
+  const openLink = (url = "") => {
+    if (url === "") {
+      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank')
+    } else {
+      window.open(url, '_blank')
+    }
+  }
+
+  return (
+    <div className="" id="hTFeaturedeSection">
+      <label style={{fontSize: "1.2rem"}}>Featured</label>
+      <div className="border"></div>
+    </div>
+  )
+}
+
+export default HomeTabFeatured

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState, useRef } from 'react'
+
+function HomeTabFeaturedPlugins () {
+  const [state, setState] = useState<{
+    searchInput: string
+  }>({
+    searchInput: ''
+  })
+  useEffect(() => {
+  
+    document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
+    
+    return () => {
+      document.removeEventListener("keyup", handleSearchKeyDown)
+    }
+  }, [])
+
+  const searchInputRef = useRef(null)
+  const remiAudioEl = useRef(null)
+
+  const playRemi = async () => {
+    remiAudioEl.current.play()
+  }
+  const handleSearchKeyDown = (e: KeyboardEvent) => {
+    if (e.target !== searchInputRef.current) return
+    if (e.key === "Enter") {
+      openLink()
+      setState(prevState => {
+        return { ...prevState, searchInput: '' }
+      })
+      searchInputRef.current.value = ""
+    }
+  }
+
+  const openLink = (url = "") => {
+    if (url === "") {
+      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank')
+    } else {
+      window.open(url, '_blank')
+    }
+  }
+
+  return (
+    <div className="" id="hTFeaturedPlugins">
+      <label style={{fontSize: "1.2rem"}}>Featured Plugins</label>
+      <div className="border"></div>
+    </div>
+  )
+}
+
+export default HomeTabFeaturedPlugins

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -137,7 +137,7 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
       <div className="justify-content-start p-2 border-bottom d-flex flex-column" id="hTFileSection">
-        <label>Files</label>
+        <label style={{fontSize: "1rem"}}>Files</label>
         <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => createNewFile()}>New File</button>
         <label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput">Open File</label>
         <input title="open file" type="file" id="openFileInput" onChange={(event) => {

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState, useRef } from 'react'
+
+function HomeTabGetStarted () {
+  const [state, setState] = useState<{
+    searchInput: string
+  }>({
+    searchInput: ''
+  })
+
+  return (
+    <div className="pl-2" id="hTGetStartedSection">
+      <label style={{fontSize: "1.2rem"}}>Get Started</label>
+      <div className="border"></div>
+    </div>
+  )
+}
+
+export default HomeTabGetStarted

libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx

@@ -1,14 +1,23 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState, useContext } from 'react'
 import { ThemeContext } from '../themeContext'
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = window._paq = window._paq || [] //eslint-disable-line
 
 enum VisibleTutorial {
   Basics,
   Intermediate,
   Advanced
 }
+interface  HomeTabLearnProps {
+  plugin: any
+}
 
-function HomeTabLearn () {
+function HomeTabLearn ({plugin}: HomeTabLearnProps) {
   const [state, setState] = useState<{
     visibleTutorial: VisibleTutorial
   }>({
@@ -18,13 +27,19 @@ function HomeTabLearn () {
   const themeFilter = useContext(ThemeContext)
 
   const openLink = () => {
-      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=learneth&check_keywords=yes&area=default", '_blank')
+      window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
+  }
+
+  const startLearnEth = async () => {
+    await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
+    plugin.verticalIcons.select('LearnEth')
+    _paq.push(['trackEvent', 'homeTab', 'startLearnEth'])
   }
 
   return (
     <div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection">
       <div className="d-flex justify-content-between">
-        <label className="pt-2 align-self-center m-0">Learn</label>
+        <label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>Learn</label>
         <button
           onClick={ ()=> openLink()}
           className="h-100 px-2 pt-0 btn"
@@ -33,19 +48,24 @@ function HomeTabLearn () {
         </button>
       </div>
       <div className="d-flex flex-column">
-        <button className="btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
+        <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
-          {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="text-left">
+          <label className="float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
-            Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.
+          {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
+            <span>Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.</span>
+            <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEth()}>Get Started</button>
           </div>}
-          <label className="pb-1 float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
         </button>
-        <button className="btn border " onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
+        <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
-          {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="text-left">Using the web3.js to interact with a contract. Using Recorder tool.</div>}
+          <label className="float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
-          <label className="pb-1 float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
+          {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">Using the web3.js to interact with a contract. Using Recorder tool.
+          <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEth()}>Get Started</button>
+          </div>}
         </button>
-        <button className="btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
+        <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
-          {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="text-left">Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger</div>}
+          <label className="float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
-          <label className="pb-1 float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
+          {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.
+          <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEth()}>Get Started</button>
+          </div>}
         </button>
       </div>
       <br/>

libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState, useRef } from 'react'
+
+function HomeTabScamAlert () {
+  return (
+    <div className="" id="hTScamAlertSection">
+      <label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}>Scam Alert</label>
+      <div className="ml-2 align-self-end mb-2 d-flex flex-column border border-danger">
+        <span className="pl-4 mt-2">
+          <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
+          <b>Scam Alerts:</b>
+        </span>
+        <span className="pl-4 mt-1">
+          The only URL Remix uses is remix.ethereum.org 
+        </span>
+        <span className="pl-4 mt-1">        
+          Beware of online videos promoting "liquidity front runner bots":  
+          <a className="pl-2 remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
+        </span>
+        <span className="pl-4 mt-1">
+          Additional safety tips: &nbsp;<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
+        </span>
+      </div>
+      <br/>
+    </div>
+  )
+}
+
+export default HomeTabScamAlert

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -63,6 +63,10 @@ function HomeTabTitle () {
             onClick={ ()=> openLink("https://twitter.com/EthereumRemix")}
             className="h-100 pl-2 btn fab fa-twitter">
           </button>
+          <button
+            onClick={ ()=> openLink(" https://www.linkedin.com/company/ethereum-remix/")}
+            className="h-100 pl-2 btn fab fa-linkedin-in">
+          </button>
         </span>
       </div>
       <b className="pb-1 text-dark" style={{fontStyle: 'italic'}}>The Native IDE for Solidity Development.</b>

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -8,6 +8,9 @@ import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Bas
 import HomeTabTitle from './components/homeTabTitle'
 import HomeTabFile from './components/homeTabFile'
 import HomeTabLearn from './components/homeTabLearn'
+import HomeTabScamAlert from './components/homeTabScamAlert'
+import HomeTabGetStarted from './components/homeTabGetStarted'
+import HomeTabFeatured from './components/homeTabFeatured'
 
 declare global {
   interface Window {
@@ -66,7 +69,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     }
   }, [])
   
-  
   const startSolidity = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
     plugin.verticalIcons.select('solidity')
@@ -101,23 +103,19 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   
   return (
     <div className="d-flex flex-row w-100" id="remixUIHTAll">
-      <div className="justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2}}>
+      <div className="px-2 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2}}>
         <HomeTabTitle />
         <HomeTabFile plugin={plugin} />
         <ThemeContext.Provider value={ state.themeQuality }>
-          <HomeTabLearn />
+          <HomeTabLearn plugin={plugin}/>
         </ThemeContext.Provider>
       </div>
-      <div className="justify-content-between d-flex" id="remixUIHTRight" style={{flex: 4}}>
+      <div className="px-2 justify-content-between d-flex flex-column" id="remixUIHTRight" style={{flex: 4}}>
         <div className="" id="hTFeaturedeSection">
-
-        </div>
-        <div className="" id="hTScamAlertSection">
-
-        </div>
-        <div className="" id="hTGetStartedSection">
-
         </div>
+        <HomeTabFeatured></HomeTabFeatured>
+        <HomeTabGetStarted></HomeTabGetStarted>
+        <HomeTabScamAlert></HomeTabScamAlert>
       </div>
     </div>
   )
@@ -134,22 +132,7 @@ export default RemixUiHomeTab
               <div className="mx-4 my-4 pt-4 d-flex">
                 <label style={ { fontSize: 'xxx-large' } }>Remix IDE</label>
               </div>
-              <div className="pt-4 align-self-end mb-2 d-flex flex-column">
+              
-                <span className="pl-4 text-danger mt-2">
-                  <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
-                  <b>Scam Alerts:</b>
-                </span>
-                <span className="pl-4 text-danger mt-1">
-                  The only URL Remix uses is remix.ethereum.org 
-                </span>
-                <span className="pl-4 text-danger mt-1">        
-                  Beware of online videos promoting "liquidity front runner bots":  
-                  <a className="pl-2 remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
-                </span>
-                <span className="pl-4 text-danger mt-1">
-                  Additional safety tips: &nbsp;<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
-                </span>
-              </div>
             </div>
             <div className="mr-4 d-flex">
               <img className="align-self-end remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>