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/layout.tsx

@@ -1,38 +1,13 @@
-'use client';
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { usePathname } from 'next/navigation';
 
-import mq from '@/app/_components/ui/theme/mq';
-import { Theme } from '@/app/_components/ui/theme/theme';
-import UserGuideSidebar from '@/app/_components/user-guide/UserGuideSidebar';
-import UserGuideTableContents from '@/app/_components/user-guide/UserGuideTableContents';
-const StyledContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between: 
-  border-bottom: 1px solid ${Theme.background.transparent.medium};
-`;
-
-const StyledEmptySideBar = styled.div`
-  ${mq({
-    width: '20%',
-    display: ['none', 'none', ''],
-  })};
-`;
+import { UserGuideMainLayout } from '@/app/_components/user-guide/UserGuideMainLayout';
+import { getUserGuideArticles } from '@/content/user-guide/constants/getUserGuideArticles';
 
 export default function UserGuideLayout({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
+  const userGuideIndex = getUserGuideArticles();
   return (
-    <StyledContainer>
-      <UserGuideSidebar />
+    <UserGuideMainLayout userGuideIndex={userGuideIndex}>
       {children}
-      {pathname === '/user-guide' ? (
-        <StyledEmptySideBar />
-      ) : (
-        <UserGuideTableContents />
-      )}
-    </StyledContainer>
+    </UserGuideMainLayout>
   );
 }