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/_components/oss-friends/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
 
@@ -32,15 +33,20 @@ const Description = styled.h2`
 
 export const Header = () => {
   return (
-    <div>
-      <Title>
-        Open-source <br /> <span style={{ color: 'black' }}>friends</span>
-      </Title>
-
+    <>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Title>
+          Open-source <br /> <span style={{ color: 'black' }}>friends</span>
+        </Title>
+      </motion.div>
       <Description>
         We are proud to collaborate with a diverse group of partners to promote
         open-source software.
       </Description>
-    </div>
+    </>
   );
 };