Hero illustration animation (#101)

Author: patrick91

.storybook/main.js

@@ -21,7 +21,14 @@ module.exports = {
         presets: [["react-app", { flow: false, typescript: true }]],
       },
     });
-    config.resolve.extensions.push(".ts", ".tsx");
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    });
+
+    config.resolve.extensions.push(".ts", ".tsx", ".mjs");
 
     return config;
   },

package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
+    "framer-motion": "^10.11.2",
     "react-intl": "^6.2.5",
     "react-text-transition": "^1.3.0",
     "react-use": "^17.3.2"

pnpm-lock.yaml

@@ -0,0 +1,14 @@
+import React from "react";
+import { HeroIllustration } from "./hero-illustration";
+
+export default {
+  title: "Hero Illustration",
+};
+
+export const Primary = () => {
+  return (
+    <div className="h-screen w-screen">
+      <HeroIllustration />
+    </div>
+  );
+};