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/contributors/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 const Title = styled.h2`
   font-size: 56px;
@@ -23,10 +24,16 @@ const Title = styled.h2`
 export const Header = () => {
   return (
     <>
-      <Title>
-        Our amazing <br />
-        <span style={{ color: '#141414' }}>Contributors</span>
-      </Title>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Title>
+          Our amazing <br />
+          <span style={{ color: '#141414' }}>Contributors</span>
+        </Title>
+      </motion.div>
     </>
   );
 };