lp: Added big curl cmd to hero section.

web/package-lock.json

@@ -23,6 +23,7 @@
         "react-feather": "^2.0.10",
         "react-modal": "^3.14.3",
         "react-syntax-highlighter": "^15.5.0",
+        "react-tooltip": "^4.5.1",
         "react-transition-group": "^4.4.5",
         "tailwindcss": "^3.2.4"
       },
@@ -9844,6 +9845,30 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.5.1.tgz",
+      "integrity": "sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "uuid": "^7.0.3"
+      },
+      "engines": {
+        "npm": ">=6.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/react-tooltip/node_modules/uuid": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -19828,6 +19853,22 @@
         "use-latest": "^1.2.1"
       }
     },
+    "react-tooltip": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.5.1.tgz",
+      "integrity": "sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==",
+      "requires": {
+        "prop-types": "^15.8.1",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

web/package.json

@@ -29,6 +29,7 @@
     "react-feather": "^2.0.10",
     "react-modal": "^3.14.3",
     "react-syntax-highlighter": "^15.5.0",
+    "react-tooltip": "^4.5.1",
     "react-transition-group": "^4.4.5",
     "tailwindcss": "^3.2.4"
   },

web/src/components/Hero.js

@@ -4,6 +4,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 import { qtcreatorLight, atomOneLight, atomOneDark, a11ylight } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
 import { Terminal } from 'react-feather'
 
+import InstallCmd from './InstallCmd'
 import SectionContainer from './Layouts/SectionContainer'
 
 const StartIcon = () => (
@@ -171,6 +172,22 @@ page MainPage {
 
       </div>
 
+      <div className='hidden md:flex md:mt-28 items-center justify-center'>
+        <div className='flex flex-col items-center gap-2'>
+          <InstallCmd />
+          <Link to='https://github.com/wasp-lang/wasp/blob/main/waspc/README.md#setup'>
+            <small
+              className={`
+                text-neutral-500 text-xs
+                hover:text-neutral-400
+              `}
+            >
+              or <span className='underline decoration-neutral-500'>compile from the source</span>
+            </small>
+          </Link>
+        </div>
+      </div>
+
       <div className='flex justify-center items-center space-x-4 mt-20 mb-10 md:mt-28 md:mb-0'>
         <PHBadge />
         <div

web/src/components/InstallCmd.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactTooltip from 'react-tooltip'
+import { Clipboard } from 'react-feather'
+
+
+const copyToClipboard = (code) => {
+  navigator.clipboard.writeText(code)
+}
+
+const InstallCmd = () => {
+
+  const code = 'curl -sSL https://get.wasp-lang.dev/installer.sh | sh'
+  
+  return (
+    <div
+      className='cursor-pointer text-neutral-500 border border-yellow-500/75 rounded'
+      data-tip
+      data-event='click'
+      data-event-off='click'
+      data-delay-hide='2000'
+    >
+      <pre
+        className={`
+          flex justify-between gap-4
+        `}
+      >
+        <code>
+          <span className='select-none'>$ </span>
+          {code}
+        </code>
+        <Clipboard size={18} />
+      </pre>
+      <ReactTooltip
+        place='top'
+        effect='float'
+        backgroundColor='#eab307'
+        textColor='white'
+        afterShow={() => copyToClipboard(code)}
+      >
+        <b>Copied to clipboard!</b>
+      </ReactTooltip>
+    </div>
+  )
+}
+
+export default InstallCmd