Improve three scene performance and add JSCAD

- smoothed follow mouse animation
- made mobile friendlier down to about 330px ish
- added default social image
- used smaller hero asset

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,9 +1,7 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
-import CadPackage, {
-  CadPackageType,
-} from 'src/components/CadPackage/CadPackage'
+import { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 const menuOptions: {
   name: string
@@ -24,9 +22,15 @@ const menuOptions: {
     sub: 'beta',
     bgClasses: 'bg-ch-blue-700',
     dotClasses: 'bg-blue-800',
-    ideType: 'cadquery'
+    ideType: 'cadquery',
+  },
+  {
+    name: 'JSCAD',
+    sub: 'beta',
+    bgClasses: 'bg-ch-purple-500',
+    dotClasses: 'bg-yellow-300',
+    ideType: 'jscad',
   },
-  // { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
 ]
 
 const NavPlusButton: React.FC = () => {
@@ -42,9 +46,12 @@ const NavPlusButton: React.FC = () => {
           {menuOptions.map(({ name, sub, ideType, bgClasses, dotClasses }) => (
             <li
               key={name}
-              className={bgClasses+" px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2"}
+              className={
+                bgClasses +
+                ' px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2'
+              }
             >
-              <div className={dotClasses + " w-5 h-5 rounded-full"}></div>
+              <div className={dotClasses + ' w-5 h-5 rounded-full'}></div>
               <Link to={routes.draftProject({ cadPackage: ideType })}>
                 <div>{name}</div>
                 <div className="text-xs text-ch-gray-400 font-light">{sub}</div>