feat(app): add hand-drawn recipe

src/components/Footer/Footer.css

@@ -58,6 +58,8 @@ footer .links {
 }
 
 .illustrations-footer {
+  position: fixed;
+  margin: auto;
   display: none;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -92,11 +94,9 @@ footer .links {
   }
 
   .illustrations-footer {
-    max-width: 100%;
     height: 440px;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
+    display: initial;
+    overflow-y: hidden;
   }
 }
 
@@ -127,6 +127,11 @@ footer .links {
     right: -18px;
     top: 144px;
   }
+
+  .ruler {
+    position: absolute;
+    transform: rotate(-5deg);
+  }
 }
 
 @media screen and (min-width: 1239px) {
@@ -143,9 +148,7 @@ footer .links {
   .illustrations-footer {
     display: initial;
     position: absolute;
-    left: -240px;
-    top: 632px;
-    height: 584px;
-    overflow: hidden;
+    bottom: 0;
+    height: 500px !important;
   }
 }

src/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";
 import Links from "@/components/Links/Links";
 
 import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
-import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
+import { ReactComponent as Ruler } from "@/assets/ruler.svg";
 import { useMediaQuery } from "@/hooks";
 import { selectionEntryAtom } from "@/state";
 import "./Footer.css";
@@ -122,11 +122,11 @@ const Footer = (_: FooterProps) => {
               </a>{" "}
               by Mikhail Sharanda.
             </p>
-            <MarkerGreen id="marker-green" />
           </div>
         </div>
         <div className="illustrations-footer">
-          <PostIt id="post-it" width="878" height="667" />
+          <Ruler className="ruler" width="878" height="667" />
+          <MarkerGreen id="marker-green" />
         </div>
       </div>
     </footer>

src/components/Header/Header.tsx

@@ -9,18 +9,6 @@ import Banner from "@/components/Banner";
 import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg";
 import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg";
 import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg";
-import { ReactComponent as Tablet } from "@/assets/tablet.svg";
-import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg";
-import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg";
-import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg";
-import { ReactComponent as Warning } from "@/assets/warning.svg";
-import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg";
-import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg";
-import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg";
-import { ReactComponent as Receipt } from "@/assets/receipt.svg";
-import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
-import { ReactComponent as Calculator } from "@/assets/calculator.svg";
-import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
 import { ReactComponent as IPad } from "@/assets/ipad.svg";
 import { ReactComponent as Map } from "@/assets/map.svg";
 import { ReactComponent as Synth } from "@/assets/synth.svg";

src/components/Recipes/Recipe.tsx

@@ -6,7 +6,7 @@ export type RecipeProps = {
   Example: () => JSX.Element;
 };
 
-const Recipe = ({ title, url, Example }: RecipeProps) => {
+const Recipe = ({ url, Example }: RecipeProps) => {
   return (
     <a className="recipe card" href={url}>
       {/* <h1>{title}</h1> */}

src/components/Recipes/items/HandDrawn.tsx

@@ -0,0 +1,50 @@
+import { CassetteTape, Cube, Virus, ThumbsUp } from "@phosphor-icons/react";
+
+import { RecipeProps } from "../Recipe";
+
+const animation: RecipeProps = {
+  title: "Hand Drawn",
+  url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css",
+  Example() {
+    return (
+      <div className="example">
+        <CassetteTape
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+         >
+          <defs>
+            <filter id="displacementFilter">
+              <feTurbulence
+                type="turbulence"
+                baseFrequency="0.02"
+                numOctaves="3"
+                result="turbulence"
+              />
+              <feDisplacementMap
+                in2="turbulence"
+                in="SourceGraphic"
+                scale="4"
+                xChannelSelector="R"
+                yChannelSelector="G"
+              />
+            </filter>
+          </defs>
+        </CassetteTape>
+        <Cube
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+        <ThumbsUp
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+        <Virus
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+      </div>
+    );
+  },
+};
+
+export default animation;

src/components/Recipes/items/index.ts

@@ -1,8 +1,9 @@
 import animation from "./Animation";
 import duocolor from "./Duocolor";
 import gradient from "./Gradient";
+import handdrawn from "./HandDrawn";
 
 import { RecipeProps } from "../Recipe";
 
-const items: RecipeProps[] = [duocolor, animation, gradient];
+const items: RecipeProps[] = [duocolor, handdrawn, animation, gradient];
 export default items;