Integrate Keystatic to edit twenty.com content (#10709)

This PR introduces Keystatic to let us edit twenty.com's content with a
CMS. For now, we'll focus on creating release notes through Keystatic as
it uses quite simple Markdown. Other types of content will need some
refactoring to work with Keystatic.


https://github.com/user-attachments/assets/e9f85bbf-daff-4b41-bc97-d1baf63758b2

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-website/src/app/(public)/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 };
+}