Fixed user guide layout (#5422)

- Added border-radius to image cards in User Guide:
Before: 
<img width="376" alt="Screenshot 2024-05-15 at 11 05 35"
src="https://github.com/twentyhq/twenty/assets/102751374/88e63152-2a50-49d5-89cb-522d94c26d3f">

After: 
<img width="366" alt="Screenshot 2024-05-15 at 11 08 20"
src="https://github.com/twentyhq/twenty/assets/102751374/f21b39d8-74eb-4520-8357-78409d7c8598">

- Centered and aligned index and article pages

packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx

@@ -46,6 +46,8 @@ const StyledSubHeading = styled.div`
 const StyledImage = styled.img`
   border-bottom: 1.5px solid #14141429;
   height: 160px;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
 `;
 
 export default function UserGuideCard({

packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx

@@ -38,6 +38,11 @@ const StyledWrapper = styled.div`
     max-width: 720px;
     margin: ${Theme.spacing(10)} 92px ${Theme.spacing(20)};
   }
+
+  @media (min-width: 1500px) {
+    max-width: 720px;
+    margin: ${Theme.spacing(10)} auto ${Theme.spacing(20)};
+  }
 `;
 
 const StyledHeader = styled.div`

packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx

@@ -13,6 +13,9 @@ const StyledContainer = styled.div`
     flexDirection: 'row',
     justifyContent: 'center',
   })};
+  @media (min-width: 1500px) {
+    width: 100%;
+  }
 `;
 
 const StyledWrapper = styled.div`
@@ -30,6 +33,12 @@ const StyledWrapper = styled.div`
     padding: ${Theme.spacing(10)} 50px ${Theme.spacing(20)};
     align-items: center;
   }
+
+  @media (min-width: 1500px) {
+    width: 720px;
+    padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)};
+    margin-right: 300px;
+  }
 `;
 
 const StyledTitle = styled.div`