Initial Storybook setup (#110)

* Storybook setup

Storybook can be started using `npm run storybook`

* moved files and bugfix

Moved component files into their own directory and moved stories next to them. Fixed a bug with loading images

* prettier and bugfix

* prettier and bugfix

* Absolute Import in Header.tsx

* import fix

some imports did not work after merging

* Storybook update for chakra ui to properly work

* Prettier main.js

* comment in preview.js about hacky solution

* webpack final update and prettier update to preview

* Updated website/readme to include storybook description

* prettier...

* Delete docker-compose 2.yaml

website/src/components/Header/NavLinks.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function NavLinks(): JSX.Element {
+  let [hoveredIndex, setHoveredIndex] = useState(null);
+
+  return (
+    <>
+      {[
+        ["Join Us", "#join-us"],
+        ["FAQ", "#faq"],
+      ].map(([label, href], index) => (
+        <Link
+          key={label}
+          href={href}
+          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          onMouseEnter={() => setHoveredIndex(index)}
+          onMouseLeave={() => setHoveredIndex(null)}
+        >
+          <AnimatePresence>
+            {hoveredIndex === index && (
+              <motion.span
+                className="absolute inset-0 rounded-lg bg-gray-100"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <span className="relative z-10">{label}</span>
+        </Link>
+      ))}
+    </>
+  );
+}