Modifications user guide (#5207)

- Modified layout and responsive
- Added remaining user guide cards
- Added new table of content:


https://github.com/twentyhq/twenty/assets/102751374/007118e5-60f2-4572-90cf-339c134f23c4

-Added fade-in:


https://github.com/twentyhq/twenty/assets/102751374/0669c06d-3eab-484c-a5b5-3857c68f42b5

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/user-guide/hooks/useHeadsObserver.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useHeadsObserver(location: string) {
+  const [activeText, setActiveText] = useState('');
+  const observer = useRef<IntersectionObserver | null>(null);
+  useEffect(() => {
+    const handleObsever = (entries: any[]) => {
+      entries.forEach((entry) => {
+        if (entry?.isIntersecting) {
+          setActiveText(entry.target.innerText);
+        }
+      });
+    };
+
+    observer.current = new IntersectionObserver(handleObsever, {
+      rootMargin: '0% 0% -85% 0px',
+    });
+
+    const elements = document.querySelectorAll('h2, h3, h4, h5');
+    elements.forEach((elem) => observer.current?.observe(elem));
+    return () => observer.current?.disconnect();
+  }, [location]);
+
+  return { activeText };
+}