From dc32f65906c42df5ddb0b62a4a908110b386f124 Mon Sep 17 00:00:00 2001
From: Ady Beraud <102751374+ady-beraud@users.noreply.github.com>
Date: Wed, 15 May 2024 11:24:24 +0300
Subject: [PATCH] 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
---
 .../src/app/_components/user-guide/UserGuideCard.tsx     | 2 ++
 .../src/app/_components/user-guide/UserGuideContent.tsx  | 5 +++++
 .../src/app/_components/user-guide/UserGuideMain.tsx     | 9 +++++++++
 3 files changed, 16 insertions(+)

diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx
index 5b32e88a9..d868e1f07 100644
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx
+++ b/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({
diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
index d553040cb..1b0166ec6 100644
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
+++ b/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`
diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
index 714907639..1e8ebdd2e 100644
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
+++ b/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`