Redo homepage to @franknoirot 's new designs

Not finished but enough for a mvp
designs; https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1652%3A4224

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

@@ -5,10 +5,12 @@ import CadPackage from 'src/components/CadPackage/CadPackage'
 
 import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
+import ProjectCard from 'src/components/ProjectCard/ProjectCard'
 
 const ProjectsList = ({
   projects,
   shouldFilterProjectsWithoutImage = false,
+  projectLimit = 80,
 }) => {
   // 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.
@@ -18,7 +20,9 @@ const ProjectsList = ({
   const filteredProjects = useMemo(
     () =>
       (shouldFilterProjectsWithoutImage
-        ? projects.filter(({ mainImage }) => mainImage)
+        ? projects
+            .filter(({ mainImage }) => mainImage)
+            .slice(0, projectLimit || 80)
         : [...projects]
       )
         // sort should probably be done on the service, but the filtering is temp too
@@ -30,64 +34,21 @@ const ProjectsList = ({
   )
 
   return (
-    <section className="max-w-6xl mx-auto">
+    <section className="max-w-7xl mx-auto">
       <ul
-        className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
+        className="grid gap-x-8 gap-y-8 items-center mx-4 relative"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
         {filteredProjects.map(
-          ({ title, mainImage, user, Reaction, cadPackage }) => (
-            <li
-              className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
-              key={`${user?.userName}--${title}`}
-            >
-              <Link
-                to={routes.project({
-                  userName: user?.userName,
-                  projectTitle: title,
-                })}
-              >
-                <div className="relative">
-                  <ImageUploader
-                    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>
-                <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 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>
+          ({ title, mainImage, user, Reaction, cadPackage }, index) => (
+            <ProjectCard
+              key={index}
+              title={title}
+              mainImage={mainImage}
+              user={user}
+              Reaction={Reaction}
+              cadPackage={cadPackage}
+            />
           )
         )}
       </ul>