new style for landing page

src/app/ui/landing-page/section.js

@@ -27,12 +27,11 @@ class Section {
   constructor (title, actions) {
     this.title = title
     this.actions = actions
-    this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-light' : 'bg-light text-dark'
   }
 
   render () {
     let sectionLook = yo`
-      <div class="card ${this.cardStyle} p-3" style="min-width: 300px; min-height: 190px;">
+      <div class="card border-0 bg-light bd-light text-dark p-1" style="min-width: 300px; min-height: 210px;">
         <div class="card-header font-weight-bold" style="user-select: none;">${this.title}</div>
         <p></p>
       </div>
@@ -41,7 +40,7 @@ class Section {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
           <div>
-            <span class ="${css.text}" onclick=${this.actions[i].payload} >
+            <span class="${css.text} text-dark" onclick=${this.actions[i].payload} >
               ${this.actions[i].label}
             </span>
           </div>
@@ -49,7 +48,7 @@ class Section {
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
           <div >
-            <a class="${css.link} text-decoration-none" href=${this.actions[i].payload} target="_blank" >
+            <a class="${css.link} text-dark text-decoration-none" href=${this.actions[i].payload} target="_blank" >
               ${this.actions[i].label}
             </a>
           </div>

src/app/ui/landing-page/workspace.js

 export class Workspace {
-  constructor (title, description, activate, deactivate) {
+  constructor (title, description, isMain, activate, deactivate) {
     this.title = title
     this.description = description
+    this.isMain = isMain
     this.activate = activate
     this.deactivate = deactivate
   }
@@ -9,23 +10,31 @@ export class Workspace {
 
 export const defaultWorkspaces = (appManager) => {
   return [
-    new Workspace('Solidity', '', () => {
+    new Workspace(
+      'Solidity',
+      'Writing smart contracts. It is used for implementing smart contracts on various blockchain platforms',
+      true,
+      () => {
         appManager.ensureActivated('solidity')
         appManager.ensureActivated('run')
         appManager.ensureActivated('solidityStaticAnalysis')
         appManager.ensureActivated('solidityUnitTesting')
       }, () => {}),
-    new Workspace('Vyper', '', () => {
+    new Workspace(
+      'Vyper',
+      'Vyper is a contract-oriented, pythonic programming language that targets the Ethereum Virtual Machine (EVM)',
+      true,
+      () => {
         appManager.ensureActivated('vyper')
         appManager.ensureActivated('run')
       }, () => {}),
-    new Workspace('Pipeline', '', () => {
+    new Workspace('Debugger', 'Debug transactions with remix', false, () => {
+      appManager.ensureActivated('debugger')
+    }, () => {}),
+    new Workspace('Pipeline', '', false, () => {
       appManager.ensureActivated('solidity')
-      appManager.ensureActivated('run')
       appManager.ensureActivated('pipeline')
-    }, () => {}),
-    new Workspace('Debugger', '', () => {
-      appManager.ensureActivated('debugger')
-    }, () => {})
+      appManager.ensureActivated('run')
+    })
   ]
 }