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/releases/StyledTitle.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 const StyledTitle = styled.div`
   margin: 64px auto 0px;
@@ -23,9 +24,15 @@ const StyledSubHeader = styled.h1`
 
 export const Title = () => {
   return (
-    <StyledTitle>
-      <StyledHeader>Latest</StyledHeader>
-      <StyledSubHeader>Releases</StyledSubHeader>
-    </StyledTitle>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.2 }}
+    >
+      <StyledTitle>
+        <StyledHeader>Latest</StyledHeader>
+        <StyledSubHeader>Releases</StyledSubHeader>
+      </StyledTitle>
+    </motion.div>
   );
 };