Make new project card

designs
https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1150%3A1619
Resolves #492

app/web/src/components/Projects/Projects.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 import { Link, routes } from '@redwoodjs/router'
+import Svg from 'src/components/Svg/Svg'
+import CadPackage from 'src/components/CadPackage/CadPackage'
 
 import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
@@ -11,6 +13,8 @@ const ProjectsList = ({
   // temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
   // it helps avoid the look of the website just being filled with dumby data.
   // related issue-104
+
+  // note to self the projectCard is hardcoded directly into this component will not be hard the extract later when we need it elsewhere.
   const filteredProjects = useMemo(
     () =>
       (shouldFilterProjectsWithoutImage
@@ -24,67 +28,68 @@ const ProjectsList = ({
         ),
     [projects, shouldFilterProjectsWithoutImage]
   )
+
   return (
-    <section className="max-w-6xl mx-auto mt-8">
+    <section className="max-w-6xl mx-auto">
       <ul
         className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
-        {filteredProjects.map(({ title, mainImage, user, Reaction }) => (
-          <li
-            className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
-            key={`${user?.userName}--${title}`}
-          >
-            <Link
-              to={routes.project({
-                userName: user?.userName,
-                projectTitle: title,
-              })}
+        {filteredProjects.map(
+          ({ title, mainImage, user, Reaction, cadPackage }) => (
+            <li
+              className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
+              key={`${user?.userName}--${title}`}
             >
-              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
-                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
+              <Link
+                to={routes.project({
+                  userName: user?.userName,
+                  projectTitle: title,
+                })}
+              >
+                <div className="relative">
                   <ImageUploader
-                    className=""
-                    aspectRatio={1}
-                    imageUrl={user?.image}
-                    width={50}
+                    className="rounded"
+                    aspectRatio={1.4}
+                    imageUrl={mainImage}
+                    width={700}
+                  />
+                  <CadPackage
+                    cadPackage={cadPackage}
+                    className="absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50"
+                    dotClass="w-3 h-3"
                   />
                 </div>
-                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">
-                  {title}
-                </span>
-              </div>
-              <div className="w-full overflow-hidden relative rounded-b-lg">
-                <ImageUploader
-                  className=""
-                  aspectRatio={1.4}
-                  imageUrl={mainImage}
-                  width={700}
-                />
-                <div
-                  className="absolute inset-0"
-                  style={{
-                    background:
-                      'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
-                  }}
-                />
-              </div>
-              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
-                {countEmotes(Reaction).map(({ emoji, count }) => (
-                  <div
-                    key={emoji}
-                    className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
-                  >
-                    <div className="-ml-px text-sm w-1">{emoji}</div>
-                    <div className="text-sm pl-1 font-ropa-sans text-gray-800">
-                      {count}
-                    </div>
+                <div className="flex items-center mt-1">
+                  <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
+                    <ImageUploader
+                      className=""
+                      aspectRatio={1}
+                      imageUrl={user?.image}
+                      width={50}
+                    />
                   </div>
-                ))}
-              </div>
-            </Link>
-          </li>
-        ))}
+                  <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
+                    <div className="">{title}</div>
+                    <div className="text-sm">{user?.userName}</div>
+                  </div>
+                </div>
+                <div className="grid grid-flow-col-dense gap-2 justify-start mt-1.5">
+                  <div className="px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm">
+                    <Svg name="reactions" className="w-4 mr-2" />
+                    {countEmotes(Reaction).reduce(
+                      (prev, { count }) => prev + count,
+                      0
+                    )}
+                  </div>
+                  <div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
+                    <Svg name="fork-new" className="w-4 mr-2" />0
+                  </div>
+                </div>
+              </Link>
+            </li>
+          )
+        )}
       </ul>
     </section>
   )