User guide layout (#5016)

- Modified CSS: font-size, colors, margins... - Added an ArticleContent Component that will be used for the changelog and user guide articles, which contains the styles for each titles, paragraphs, images etc. - Added link to User Guide in footer - Added a UserGuideWarning Component: <img width="332" alt="Screenshot 2024-04-17 at 18 14 48" src="https://github.com/twentyhq/twenty/assets/102751374/0f5c601b-a2c0-4c63-baeb-1990d65fc332"> - Added a UserGuideEditContent Component: <img width="394" alt="Screenshot 2024-04-17 at 18 16 24" src="https://github.com/twentyhq/twenty/assets/102751374/6c7c3bd4-c5bb-4d02-8f93-bd99bc30ce7b"> - Added a UserGuideLink Component (for usage in MDX to allow links to open in new tab) - Fixed table of content - Made responsive --------- Co-authored-by: Ady Beraud <a.beraud96@gmail.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-04-22 18:04:26 +03:00
parent 68662fa543
commit b9a7eb5a98
44 changed files with 730 additions and 272 deletions
--- a/packages/twenty-website/public/images/user-guide/github/github-edit-content.png
+++ b/packages/twenty-website/public/images/user-guide/github/github-edit-content.png
--- a/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png
+++ b/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png
--- a/packages/twenty-website/public/images/user-guide/home/custom-objects.png
+++ b/packages/twenty-website/public/images/user-guide/home/custom-objects.png
--- a/packages/twenty-website/public/images/user-guide/home/import-your-data.png
+++ b/packages/twenty-website/public/images/user-guide/home/import-your-data.png
--- a/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png
+++ b/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png
--- a/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png
+++ b/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png
--- a/packages/twenty-website/src/app/_components/oss-friends/Background.tsx
+++ b/packages/twenty-website/src/app/_components/oss-friends/Background.tsx
@ -39,10 +39,6 @@ const Container = styled.div`
  max-width: 100vw;
  z-index: 0;

-  @media (max-width: 810px) {
-    margin-top: 64px;
-  }
-
  &::before {
    content: '';
    position: absolute;
--- a/packages/twenty-website/src/app/_components/releases/Line.tsx
+++ b/packages/twenty-website/src/app/_components/releases/Line.tsx
@ -17,7 +17,6 @@ const StyledLineContainer = styled.div`
 const StyledLine = styled.div`
  height: 1px;
  background-color: #d9d9d9;
-  margin-bottom: 80px;
  margin-left: 148px;
  margin-top: 40px;
  width: 100%;
--- a/packages/twenty-website/src/app/_components/releases/Release.tsx
+++ b/packages/twenty-website/src/app/_components/releases/Release.tsx
@ -4,6 +4,7 @@ import { JSXElementConstructor, ReactElement } from 'react';
 import styled from '@emotion/styled';
 import { Gabarito } from 'next/font/google';

+import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent';
 import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation';
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { ReleaseNote } from '@/app/releases/api/route';
@ -28,13 +29,15 @@ const StyledVersion = styled.div`
  flex-flow: column;
  align-items: start;
  font-weight: 500;
+  margin-top: 64px;

  @media (max-width: 810px) {
    width: 100%;
    font-size: 20px;
    flex-flow: row;
    justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: -48px;
+    margin-top: 0px;
  }
 `;

@ -49,39 +52,6 @@ const StyledDate = styled.span`
  font-size: ${Theme.font.size.sm};
 `;

-const StlyedContent = styled.div`
-  flex: 1;
-
-  gap: 64px;
-
-  h3 {
-    color: ${Theme.text.color.primary};
-    font-weight: 700;
-    font-size: 40px;
-    margin: 0;
-  }
-
-  p {
-    color: ${Theme.text.color.secondary};
-    font-family: ${Theme.font.family};
-    font-size: 16px;
-    line-height: 28.8px;
-    font-weight: 400;
-    margin: 40px 0px;
-    text-align: justify;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  @media (max-width: 810px) {
-    h3 {
-      font-size: 24px;
-    }
-  }
-`;
-
 const gabarito = Gabarito({
  weight: ['400', '500', '600', '700'],
  subsets: ['latin'],
@ -108,7 +78,7 @@ export const Release = ({
              : release.date}
          </StyledDate>
        </StyledVersion>
-        <StlyedContent>{mdxReleaseContent}</StlyedContent>
+        <ArticleContent>{mdxReleaseContent}</ArticleContent>
      </StyledContainer>
    </MotionContainer>
  );
--- a/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx
+++ b/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx
@ -3,12 +3,13 @@
 import styled from '@emotion/styled';

 const StyledTitle = styled.div`
-  margin: 64px auto;
+  margin: 64px auto 0px;
  text-align: center;
  font-size: 1.8em;

  @media (max-width: 810px) {
    font-size: 1em;
+    margin: 64px auto;
  }
 `;
 const StyledHeader = styled.h1`
--- a/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
@ -23,6 +23,7 @@ const InternalLinkItem = styled(Link)`
    color: ${Theme.text.color.quarternary};
    text-decoration: underline;
  }
+  font-family: var(--font-gabarito);
 `;

 const ExternalLinkItem = styled.a`
@ -33,6 +34,7 @@ const ExternalLinkItem = styled.a`
 const ActivePage = styled.span`
  color: ${Theme.text.color.primary};
  font-weight: ${Theme.font.weight.medium};
+  font-family: var(--font-gabarito);
 `;

 const StyledSection = styled.div`
--- a/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx
@ -10,7 +10,6 @@ const Container = styled.div`
  @media (max-width: 809px) {
    width: 100%;
    padding: 0px 24px 0px 24px;
-    margin-top: 64px;
  }
 `;

--- a/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx
@ -102,6 +102,9 @@ export const FooterDesktop = () => {
            <RightSideFooterLink href="/releases">
              Changelog
            </RightSideFooterLink>
+            <RightSideFooterLink href="/user-guide">
+              User Guide
+            </RightSideFooterLink>
          </RightSideFooterColumn>
          <RightSideFooterColumn>
            <RightSideFooterColumnTitle>Other</RightSideFooterColumnTitle>
--- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
@ -0,0 +1,93 @@
+'use client';
+
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { Theme } from '@/app/_components/ui/theme/theme';
+
+const StyledContent = styled.div`
+  flex: 1;
+  max-width: 950px;
+
+  p {
+    color: ${Theme.text.color.secondary};
+    font-family: ${Theme.font.family};
+    font-size: ${Theme.font.size.sm};
+    line-height: 28.8px;
+    font-weight: ${Theme.font.weight.regular};
+    margin: 32px 0px 0px;
+    text-align: justify;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    margin-bottom: 8px;
+    font-family: var(--font-gabarito);
+    color: ${Theme.text.color.primary};
+    font-weight: 700;
+  }
+
+  h1 {
+    margin-top: 64px;
+    font-size: 40px;
+  }
+
+  h2,
+  h3,
+  h4 {
+    margin-top: 40px;
+  }
+
+  h2 {
+    font-size: 32px;
+  }
+
+  h3 {
+    font-size: 28px;
+  }
+
+  h4 {
+    font-size: 24px;
+  }
+
+  h5 {
+    font-size: 20px;
+  }
+
+  @media (max-width: 810px) {
+    h1 {
+      font-size: 28px;
+    }
+    h2 {
+      font-size: 24px;
+    }
+    h3 {
+      font-size: 20px;
+    }
+    h4 {
+      font-size: 16px;
+    }
+  }
+
+  ol {
+    margin: 32px 0px 0px;
+  }
+
+  li {
+    margin: 16px 0px 0px;
+    line-height: 28.8px;
+    font-family: ${Theme.font.family};
+    color: ${Theme.text.color.secondary};
+  }
+
+  img {
+    margin: 32px 0px 0px;
+    max-width: 100%;
+  }
+`;
+
+export const ArticleContent = ({ children }: { children: ReactNode }) => {
+  return <StyledContent>{children}</StyledContent>;
+};
--- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx
@ -0,0 +1,118 @@
+'use client';
+import styled from '@emotion/styled';
+
+import { StyledButton } from '@/app/_components/ui/layout/header/styled';
+import { Theme } from '@/app/_components/ui/theme/theme';
+
+const StyledContainer = styled.div`
+  margin-top: 64px;
+  padding: 32px;
+  border: 2px solid #141414;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: row;
+
+  h1 {
+    margin: 0px;
+    font-size: ${Theme.font.size.lg};
+  }
+
+  p {
+    font-size: ${Theme.font.size.xs};
+    margin: 24px 0px 32px;
+    color: ${Theme.text.color.tertiary};
+    line-height: 1.5;
+    text-align: left;
+  }
+
+  @media (min-width: 950px) {
+    padding: 32px 0px 0px 32px;
+  }
+`;
+
+const StyledButtonText = styled.div`
+  margin-left: 8px;
+  text-decoration: none;
+`;
+
+const StyledRightColumn = styled.div`
+  display: flex;
+  border-bottom-right-radius: 16px;
+  overflow: hidden;
+  min-width: 40%;
+  @media (max-width: 950px) {
+    display: none;
+  }
+
+  @media (min-width: 1530px) {
+    justify-content: end;
+  }
+
+  img {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    max-width: fit-content;
+    margin: 0;
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  text-decoration: none;
+
+  @media (min-width: 950px) {
+    padding-bottom: 32px;
+  }
+`;
+
+interface ArticleEditContentProps {
+  articleTitle: string;
+}
+
+export default function ArticleEditContent({
+  articleTitle,
+}: ArticleEditContentProps) {
+  return (
+    <StyledContainer>
+      <div>
+        <h1>Noticed something to modify?</h1>
+        <p>
+          As an open-source company, we welcome contributions to our GitHub user
+          guide. Help us keep it up-to-date, accurate, and easy to understand by
+          getting involved and sharing your ideas!
+        </p>
+        <StyledButtonContainer>
+          <a
+            href={`https://github.com/twentyhq/twenty/blob/main/packages/twenty-website/src/content/user-guide/${articleTitle}`}
+            target="_blank"
+            style={{ textDecoration: 'none' }}
+          >
+            <StyledButton>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10 0.449951C4.475 0.449951 0 4.92495 0 10.45C0 14.875 2.8625 18.6125 6.8375 19.9375C7.3375 20.025 7.525 19.725 7.525 19.4625C7.525 19.225 7.5125 18.4375 7.5125 17.6C5 18.0625 4.35 16.9875 4.15 16.425C4.0375 16.1375 3.55 15.25 3.125 15.0125C2.775 14.825 2.275 14.3625 3.1125 14.35C3.9 14.3375 4.4625 15.075 4.65 15.375C5.55 16.8875 6.9875 16.4625 7.5625 16.2C7.65 15.55 7.9125 15.1125 8.2 14.8625C5.975 14.6125 3.65 13.75 3.65 9.92495C3.65 8.83745 4.0375 7.93745 4.675 7.23745C4.575 6.98745 4.225 5.96245 4.775 4.58745C4.775 4.58745 5.6125 4.32495 7.525 5.61245C8.325 5.38745 9.175 5.27495 10.025 5.27495C10.875 5.27495 11.725 5.38745 12.525 5.61245C14.4375 4.31245 15.275 4.58745 15.275 4.58745C15.825 5.96245 15.475 6.98745 15.375 7.23745C16.0125 7.93745 16.4 8.82495 16.4 9.92495C16.4 13.7625 14.0625 14.6125 11.8375 14.8625C12.2 15.175 12.5125 15.775 12.5125 16.7125C12.5125 18.05 12.5 19.125 12.5 19.4625C12.5 19.725 12.6875 20.0375 13.1875 19.9375C17.1375 18.6125 20 14.8625 20 10.45C20 4.92495 15.525 0.449951 10 0.449951Z"
+                  fill="white"
+                />
+              </svg>
+              <StyledButtonText>Edit Content</StyledButtonText>
+            </StyledButton>
+          </a>
+        </StyledButtonContainer>
+      </div>
+      <StyledRightColumn>
+        <img
+          src="/images/user-guide/github/github-edit-content.png"
+          alt="twenty github image"
+        />
+      </StyledRightColumn>
+    </StyledContainer>
+  );
+}
--- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx
@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+
+interface ArticleLinkProps {
+  href: string;
+  children: ReactNode;
+}
+
+const ArticleLink: React.FC<ArticleLinkProps> = ({ href, children }) => (
+  <a href={href} target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+
+export default ArticleLink;
--- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx
@ -0,0 +1,41 @@
+'use client';
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { IconAlertCircle } from '@tabler/icons-react';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  background: var(--Palette-Red-10, #feecec);
+  gap: 12px;
+  border-radius: 8px;
+  padding: 16px 24px;
+  margin: 32px 0px;
+`;
+
+const StyledIconContainer = styled.div`
+  color: var(--Palette-Red-50, #b43232);
+  padding-top: 1px;
+`;
+
+const StyledText = styled.div`
+  h1 {
+    margin: 0px !important;
+  }
+  p {
+    color: var(--Palette-Red-50, #b43232) !important;
+    margin: 0px !important;
+    text-align: left;
+  }
+`;
+
+export default function ArticleWarning({ children }: { children: ReactNode }) {
+  return (
+    <StyledContainer>
+      <StyledIconContainer>
+        <IconAlertCircle />
+      </StyledIconContainer>
+      <StyledText>{children}</StyledText>
+    </StyledContainer>
+  );
+}
--- a/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts
+++ b/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts
@ -12,7 +12,10 @@ export const DesktopNav = styled.nav`
  align-items: center;
  overflow: visible;
  padding: 12px 16px 12px 16px;
-  position: relative;
+  position: fixed;
+  width: 100%;
+  background-color: white;
+  z-index: 4;
  transform-origin: 50% 50% 0px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);

@ -29,8 +32,9 @@ export const MobileNav = styled.nav`
  overflow: visible;
  padding: 0 12px;
  position: fixed;
-  z-index: 2;
+  width: 100%;
  background-color: white;
+  z-index: 4;
  transform-origin: 50% 50% 0px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
  height: 64px;
@ -97,6 +101,8 @@ export const StyledButton = styled.div`
  border: none;
  outline: inherit;
  cursor: pointer;
+  max-width: fit-content;
+  font-family: var(--font-gabarito);
 `;

 export const CallToActionContainer = styled.div`
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx
@ -9,27 +9,42 @@ const StyledContainer = styled.div`
  color: ${Theme.border.color.plain};
  border: 2px solid ${Theme.border.color.plain};
  border-radius: ${Theme.border.radius.md};
-  padding: ${Theme.spacing(6)};
  gap: ${Theme.spacing(4)};
  display: flex;
  flex-direction: column;
  cursor: pointer;
-  width: 348px;
+  width: 340px;
+
+  &:hover {
+    box-shadow: -8px 8px 0px -4px ${Theme.color.gray60};
+  }
+
+  @media (max-width: 385px) {
+    width: 280px;
+  }
 `;

 const StyledHeading = styled.div`
  font-size: ${Theme.font.size.lg};
  color: ${Theme.text.color.primary};
+  padding: 0 16px;
+  font-weight: ${Theme.font.weight.medium};
+  @media (max-width: 800px) {
+    font-size: ${Theme.font.size.base};
+  }
 `;

 const StyledSubHeading = styled.div`
-  font-size: ${Theme.font.size.sm};
+  font-size: ${Theme.font.size.xs};
  color: ${Theme.text.color.secondary};
  font-family: ${Theme.font.family};
+  padding: 0 16px 24px;
+  font-weight: ${Theme.font.weight.regular};
+  line-height: 21px;
 `;

 const StyledImage = styled.img`
-  width: 300px;
+  border-bottom: 1.5px solid #14141429;
 `;

 export default function UserGuideCard({
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
@ -2,6 +2,7 @@
 import React from 'react';
 import styled from '@emotion/styled';

+import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent';
 import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
 import mq from '@/app/_components/ui/theme/mq';
 import { Theme } from '@/app/_components/ui/theme/theme';
@ -16,9 +17,6 @@ const StyledContainer = styled('div')`
    borderBottom: `1px solid ${Theme.background.transparent.medium}`,
    fontFamily: `${Theme.font.family}`,
  })};
-  @media (max-width: 810px) {
-    margin-top: 64px;
-  }
 `;

 const StyledWrapper = styled.div`
@ -35,12 +33,16 @@ const StyledHeader = styled.div`
 const StyledHeading = styled.div`
  font-size: 40px;
  font-weight: 700;
+  font-family: var(--font-gabarito);
+  @media (max-width: 800px) {
+    font-size: 28px;
+  }
 `;

 const StyledHeaderInfoSection = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${Theme.spacing(4)};
+  gap: ${Theme.spacing(1)};
 `;

 const StyledHeaderInfoSectionTitle = styled.div`
@ -48,6 +50,7 @@ const StyledHeaderInfoSectionTitle = styled.div`
  padding: ${Theme.spacing(2)} 0px;
  color: ${Theme.text.color.secondary};
  font-weight: ${Theme.font.weight.medium};
+  font-family: var(--font-gabarito);
 `;

 const StyledHeaderInfoSectionSub = styled.div`
@ -55,7 +58,7 @@ const StyledHeaderInfoSectionSub = styled.div`
  flex-direction: column;
  gap: ${Theme.spacing(4)};
  color: ${Theme.text.color.tertiary};
-  font-family: ${Theme.font.family};
+  line-height: 1.8;
 `;

 const StyledRectangle = styled.div`
@ -64,6 +67,44 @@ const StyledRectangle = styled.div`
  background: ${Theme.background.transparent.medium};
 `;

+const StyledImageContainer = styled.div`
+  border: 2px solid ${Theme.text.color.primary};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 16px;
+  height: 340px;
+  max-width: fit-content;
+
+  @media (max-width: 414px) {
+    height: 160px;
+  }
+
+  @media (min-width: 415px) and (max-width: 800px) {
+    height: 240px;
+  }
+  @media (min-width: 1500px) {
+    height: 450px;
+  }
+
+  img {
+    height: 340px;
+
+    @media (max-width: 414px) {
+      height: 160px;
+    }
+
+    @media (min-width: 415px) and (max-width: 800px) {
+      height: 240px;
+    }
+
+    @media (min-width: 1500px) {
+      height: 450px;
+    }
+  }
+`;
+
 export default function UserGuideContent({ item }: { item: FileContent }) {
  const BREADCRUMB_ITEMS = [
    {
@ -71,6 +112,7 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
      label: 'User Guide',
    },
  ];
+
  return (
    <StyledContainer>
      <StyledWrapper>
@ -81,13 +123,15 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
            separator="/"
          />
          <StyledHeading>{item.itemInfo.title}</StyledHeading>
-          {item.itemInfo.image && (
-            <img
-              id={`img-${item.itemInfo.title}`}
-              src={item.itemInfo.image}
-              alt={item.itemInfo.title}
-            />
-          )}
+          <StyledImageContainer>
+            {item.itemInfo.image && (
+              <img
+                id={`img-${item.itemInfo.title}`}
+                src={item.itemInfo.image}
+                alt={item.itemInfo.title}
+              />
+            )}
+          </StyledImageContainer>
          <StyledHeaderInfoSection>
            <StyledHeaderInfoSectionTitle>
              In this article
@ -98,7 +142,7 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
          </StyledHeaderInfoSection>
          <StyledRectangle />
        </StyledHeader>
-        <div>{item.content}</div>
+        <ArticleContent>{item.content}</ArticleContent>
      </StyledWrapper>
    </StyledContainer>
  );
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
@ -13,39 +13,68 @@ const StyledContainer = styled.div`
    flexDirection: 'row',
    justifyContent: 'center',
  })};
-  @media (max-width: 810px) {
-    margin-top: 64px;
-  }
 `;

 const StyledWrapper = styled.div`
-  width: 79.3%;
-  padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)} 0px;
+  padding: ${Theme.spacing(10)} 92px ${Theme.spacing(20)};
  display: flex;
  flex-direction: column;
-  gap: ${Theme.spacing(8)};
+  width: 100%;
+
+  @media (max-width: 800px) {
+    padding: ${Theme.spacing(10)} 24px ${Theme.spacing(20)};
+  }
+
+  @media (max-width: 800px) {
+    align-items: center;
+  }
+`;
+
+const StyledTitle = styled.div`
+  font-size: ${Theme.font.size.sm};
+  color: ${Theme.text.color.quarternary};
+  font-weight: ${Theme.font.weight.medium};
+  margin-bottom: 32px;
+  @media (min-width: 380px) and (max-width: 800px) {
+    width: 340px;
+    margin-bottom: 24px;
+  }
+  @media (max-width: 380px) {
+    width: 280px;
+  }
 `;

 const StyledHeader = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0px;
+  @media (min-width: 380px) and (max-width: 800px) {
+    width: 340px;
+  }
+  @media (max-width: 380px) {
+    width: 280px;
+  }
 `;

 const StyledHeading = styled.h1`
  line-height: 38px;
  font-weight: 700;
-  font-size: 38px;
+  font-size: 40px;
  color: ${Theme.text.color.primary};
  margin: 0px;
+  @media (max-width: 800px) {
+    font-size: 28px;
+  }
 `;

 const StyledSubHeading = styled.h1`
-  line-height: 12px;
-  font-family: ${Theme.font.family};
-  font-size: ${Theme.font.size.sm};
+  line-height: 28.8px;
+  font-size: ${Theme.font.size.lg};
  font-weight: ${Theme.font.weight.regular};
  color: ${Theme.text.color.tertiary};
+  @media (max-width: 800px) {
+    font-size: ${Theme.font.size.sm};
+  }
 `;

 const StyledContent = styled.div`
@ -58,12 +87,19 @@ const StyledContent = styled.div`
    gridTemplateColumns: 'auto auto',
    gap: `${Theme.spacing(6)}`,
  })};
+  @media (max-width: 810px) {
+    align-items: center;
+  }
+  @media (min-width: 1200px) {
+    justify-content: left;
+  }
 `;

 export default function UserGuideMain() {
  return (
    <StyledContainer>
      <StyledWrapper>
+        <StyledTitle>User Guide</StyledTitle>
        <StyledHeader>
          <StyledHeading>User Guide</StyledHeading>
          <StyledSubHeading>
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
@ -49,6 +49,7 @@ const StyledHeadingText = styled.div`
  cursor: pointer;
  font-size: ${Theme.font.size.sm};
  font-weight: ${Theme.font.weight.medium};
+  color: ${Theme.text.color.secondary};
 `;

 const UserGuideSidebar = () => {
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx
@ -23,6 +23,7 @@ const StyledTitle = styled.div`
  padding-bottom: ${Theme.spacing(2)};
  font-family: ${Theme.font.family};
  font-size: ${Theme.font.size.xs};
+  font-weight: 600;
 `;

 const StyledSubTopicItem = styled.div<{ isselected: boolean }>`
@ -53,10 +54,20 @@ const StyledSubTopicItem = styled.div<{ isselected: boolean }>`
  &:active {
    text-decoration: none;
  }
+
+  &:hover {
+    background: #1414140a;
+  }
+
+  &:active {
+    background: #1414140f;
+  }
 `;

 const StyledIcon = styled.div`
  padding: 0px 4px 0px 4px;
+  display: flex;
+  align-items: center;
 `;

 const StyledRectangle = styled.div<{ isselected: boolean }>`
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx
+++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx
@ -37,7 +37,7 @@ const UserGuideTableContents = () => {
    <StyledContainer>
      <StyledContent>
        <StyledHeadingText onClick={() => router.push('/user-guide')}>
-          Table of Contents
+          Table of Content
        </StyledHeadingText>
      </StyledContent>
    </StyledContainer>
--- a/packages/twenty-website/src/app/_server-utils/get-posts.tsx
+++ b/packages/twenty-website/src/app/_server-utils/get-posts.tsx
@ -6,6 +6,10 @@ import path from 'path';
 import rehypeSlug from 'rehype-slug';
 import gfm from 'remark-gfm';

+import ArticleEditContent from '@/app/_components/ui/layout/articles/ArticleEditContent';
+import ArticleLink from '@/app/_components/ui/layout/articles/ArticleLink';
+import ArticleWarning from '@/app/_components/ui/layout/articles/ArticleWarning';
+
 interface ItemInfo {
  title: string;
  position?: number;
@ -103,6 +107,17 @@ export async function compileMDXFile(filePath: string, addToc = true) {
  const fileContent = fs.readFileSync(filePath, 'utf8');
  const compiled = await compileMDX<{ title: string; position?: number }>({
    source: fileContent,
+    components: {
+      ArticleWarning(properties) {
+        return <ArticleWarning {...properties} />;
+      },
+      ArticleEditContent(properties) {
+        return <ArticleEditContent {...properties} />;
+      },
+      ArticleLink(properties) {
+        return <ArticleLink {...properties} />;
+      },
+    },
    options: {
      parseFrontmatter: true,
      mdxOptions: {
--- a/packages/twenty-website/src/app/layout.css
+++ b/packages/twenty-website/src/app/layout.css
@ -1,16 +1,18 @@
-*, *::before, *::after {
-    box-sizing: border-box;
-    font-smooth: antialiased;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  font-smooth: antialiased;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

 body {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    word-wrap: break-word;
-    font-family: var(--font-gabarito);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  word-wrap: break-word;
+  font-family: var(--font-gabarito);
 }

@media (max-width: 810px) {
@ -25,53 +27,106 @@ body {
 }

 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 53px;
 }

 .warning {
-    color: rgb(94, 30, 4);
+  color: rgb(94, 30, 4);
 }

 a {
-    color: rgb(129, 129, 129);
-    &:hover {
-        color: #000;
-    }
+  color: rgb(129, 129, 129);
+  &:hover {
+    color: #000;
+  }
 }

@media (max-width: 1199px) {
-nav {
-        display: none;
-    }
+  nav {
+    display: none;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
 }

 nav.toc {
  width: 20%;
  position: fixed;
-  top: 125px;
+  top: 135px;
  right: 0;
+  font-family: var(--font-gabarito);
+  font-size: 12px;
 }

-nav.toc ol{
-    list-style-type: circle;
+nav.toc ol {
+  list-style-type: none;
+  margin-top: 0px;
 }

-nav.toc li{
-    height: 32px;
+nav.toc li {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }

-nav.toc a{
+.toc-link {
+  padding: 5px;
+  border-radius: 4px;
+}
+
+.toc-link.toc-link-h2 {
+  color: rgb(129, 129, 129);
+  margin-left: -16px;
+}
+
+.toc-link.toc-link-h2:hover,.toc-link.toc-link-h3:hover, .toc-link.toc-link-h4:hover, .toc-link.toc-link-h5:hover {
+  background: #1414140a;
+}
+
+.toc-link.toc-link-h2:active,.toc-link.toc-link-h3:active, .toc-link.toc-link-h4:active, .toc-link.toc-link-h5:active {
+  background: #1414140f;
+}
+
+
+.toc-link.toc-link-h3 {
+  color: rgb(129, 129, 129);
+  margin-left: -40px;
+}
+
+.toc-link.toc-link-h4 {
+  color: rgb(129, 129, 129);
+  margin-left: -64px;
+}
+
+.toc-link.toc-link-h5 {
+  color: rgb(129, 129, 129);
+  margin-left: -88px;
+}
+
+nav.toc a {
+  color: #141414;
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  margin-top: 12px;
+}
+
+strong,
+  b {
    color: #141414;
+    -webkit-font-smoothing: auto;
    font-family: var(--font-inter);
-    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
 }

 code {
-    background: var(--Transparency-Lighter, #1414140a);
+    background: #1414140a;
    padding: 4px;
    border-radius: 4px;
  }
--- a/packages/twenty-website/src/app/releases/get-releases.tsx
+++ b/packages/twenty-website/src/app/releases/get-releases.tsx
@ -2,7 +2,6 @@ import { JSXElementConstructor, ReactElement } from 'react';
 import fs from 'fs';
 import matter from 'gray-matter';
 import { compileMDX } from 'next-mdx-remote/rsc';
-import remarkBehead from 'remark-behead';
 import gfm from 'remark-gfm';

 import { ReleaseNote } from '@/app/releases/api/route';
@ -60,7 +59,7 @@ export async function getMdxReleasesContent(
        parseFrontmatter: true,
        mdxOptions: {
          development: process.env.NODE_ENV === 'development',
-          remarkPlugins: [gfm, [remarkBehead, { depth: 2 }]],
+          remarkPlugins: [gfm],
        },
      },
    });
--- a/packages/twenty-website/src/content/user-guide/api-webhooks.mdx
+++ b/packages/twenty-website/src/content/user-guide/api-webhooks.mdx
@ -1,5 +1,5 @@
 ---
-title: API and Wehooks
+title: API and Webhooks
 info: Learn how to manage API keys and Webhooks in Twenty.
 icon: IconApi
 image: /images/user-guide/placeholder-header.png
@ -11,7 +11,7 @@ API keys allow automated access to your CRM data, synchronize data with other sy

 For example, you can use them to retrieve details of a specific `Person` or `Company` record, such as their name or address.

-## generate an API key
+### Generate an API key

 1. Go to Settings in the sidebar on the left.
 2. Under Workspace, go to Developers. Here, you'll see a list of active keys that you or your team have created.
@ -20,11 +20,10 @@ For example, you can use them to retrieve details of a specific `Person` or `Com
 5. Hit save to see your API key. 
 6. Since the key is only visible once, make sure you store it somewhere safe. 

-<div class="warning">
+<ArticleWarning>
 Since your API key gives access to sensitive information, you shouldn't share it with services you don't fully trust. If leaked, someone can use it maliciously. If your API key's security is compromised, immediately disable it and generate a new one.
-</div>
-
-<div style={{padding:'70.59% 0 0 0', position:'relative'}}>
+</ArticleWarning>
+<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px' }}>
  <iframe 
    src="https://player.vimeo.com/video/928786722?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -44,23 +43,23 @@ Since your API key gives access to sensitive information, you shouldn't share it
 <script src="https://player.vimeo.com/api/player.js"></script>


-## Regenerating an API key
+### Regenerating an API key

 To regenerate an API key, click on the key you want to regenerate. You'll then be able to see a button to regenerate the API key.

-# Webhooks
+## Webhooks

 Webhooks allow for immediate updates to your specified URL about changes or events related to your customer data.

 For instance, a webhook can alert your system in real-time when someone creates a new person record or updates an existing note.

-## Creating Webhooks
+### Creating Webhooks

 1. From Settings -> Developers, click `+` Create webhook.
 2. Enter your URL.
 3. Click Save.

-<div style={{padding:'70.59% 0 0 0', position:'relative'}}>
+<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/928786708?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -79,7 +78,9 @@ For instance, a webhook can alert your system in real-time when someone creates
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-## Deleting Webhooks
+### Deleting Webhooks

 1. In Developers, find your webhook.
-2. Click on your webhook and press **Delete** to remove it. A confirmation popup will appear to confirm.
+2. Click on your webhook and press **Delete** to remove it. A confirmation popup will appear to confirm.
+
+<ArticleEditContent articleTitle="api-webhooks.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/constants/UserGuideHomeCards.ts
+++ b/packages/twenty-website/src/content/user-guide/constants/UserGuideHomeCards.ts
@ -14,19 +14,19 @@ export const USER_GUIDE_HOME_CARDS: UserGuideHomeCardsType[] = [
    image: '/images/user-guide/home/what-is-twenty.png',
  },
  {
-    url: 'create-a-workspace',
+    url: 'create-workspace',
    title: 'Create a Workspace',
    subtitle: 'Custom objects store unique info in workspaces.',
    image: '/images/user-guide/home/create-a-workspace.png',
  },
  {
-    url: 'import-your-data',
+    url: 'import-export-data',
    title: 'Import your data',
    subtitle: 'Easily create a note to keep track of important information.',
    image: '/images/user-guide/home/import-your-data.png',
  },
  {
-    url: 'custom-objects',
+    url: 'objects',
    title: 'Custom Objects',
    subtitle: 'Custom objects store unique info in workspaces.',
    image: '/images/user-guide/home/custom-objects.png',
--- a/packages/twenty-website/src/content/user-guide/create-workspace.mdx
+++ b/packages/twenty-website/src/content/user-guide/create-workspace.mdx
@ -5,13 +5,13 @@ icon: IconNote
 image: /images/user-guide/placeholder-header.png
 ---

-# Step 1: Registration
-1. Navigate to [Twenty Sign Up](https://app.twenty.com/sign-up).
+## Step 1: Registration
+1. Navigate to <ArticleLink href="https://app.twenty.com/sign-up">Twenty Sign Up</ArticleLink>.
 2. Select your preferred sign-up method:
    - **Continue with Google** for Google account registration.
    - Or, **Continue With Email** for email registration.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927066829?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -30,21 +30,23 @@ image: /images/user-guide/placeholder-header.png
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Step 2: Choosing A Subscription Plan
+## Step 2: Choosing A Subscription Plan
 Choose a subscription plan after completing the 7-day free trial. Twenty offers the most competitive pricing in the market.

-## Monthly Plan
+### Monthly Plan
 At $9 per seat per month, this plan offers absolute freedom to cancel at any time.

-## Annual Plan
+### Annual Plan
 At $90 per seat per year, this plan provides an annual saving of $18 compared to the Monthly Plan.

 Both plans give full access to all Twenty features, including unlimited contacts, email integration, custom objects, API & Webhooks, and frequent updates.

 <img src="/images/user-guide/create-workspace/choose-plan.png" style={{width:'100%'}}/>

-# Step 3: Payment Confirmation & Account Setup
+## Step 3: Payment Confirmation & Account Setup
 Post payment approval via Stripe, you're directed to create your workspace and user profile. Remember that you can cancel your subscription anytime.

-# Support
-For queries or help, connect with the dedicated support team at [contact@twenty.com](mailto:contact@twenty.com) or send a message on [Discord](https://discord.gg/cx5n4Jzs57)
+## Support
+For queries or help, connect with the dedicated support team at [contact@twenty.com](mailto:contact@twenty.com) or send a message on <ArticleLink href="https://discord.gg/cx5n4Jzs57">Discord</ArticleLink>
+
+<ArticleEditContent articleTitle="create-workspace.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/emails.mdx
+++ b/packages/twenty-website/src/content/user-guide/emails.mdx
@ -5,11 +5,11 @@ icon: IconChecklist
 image: /images/user-guide/emails/emails_header.png
 ---

-# Email Synchronization
+## Email Synchronization

 The system links emails from known contacts directly to their CRM records, keeping all communication up to date. It's important to avoid syncing emails from impersonal addresses such as team@ and support@, or from personal email providers like Gmail or Outlook, to ensure privacy and relevance.

-## Reading an Email
+### Reading an Email

 Go to a specific `Person` or `Company` record page, then select the `Emails` tab to view synced emails instantly. Click on an email to open it.

@ -17,9 +17,9 @@ Go to a specific `Person` or `Company` record page, then select the `Emails` tab

 You can customize how you share and manage your emails through the settings. 

-# Mailbox Settings
+## Mailbox Settings

-## Connecting a New Mailbox
+### Connecting a New Mailbox

 To connect a Gmail mailbox, go to `Settings` > `Accounts`, then click the `Add account` button. You can add several mailboxes to your account.

@ -29,7 +29,7 @@ The initial import may take some time, and it will be followed by automatic upda

 <img src="/images/user-guide/emails/connect-account.png" style={{width:'100%'}}/>

-## Sharing Levels
+### Sharing Levels

 From here, you can choose different levels of sharing for outbound and inbound emails:

@ -39,12 +39,14 @@ From here, you can choose different levels of sharing for outbound and inbound e

 <img src="/images/user-guide/emails/privacy-settings.png" style={{width:'100%'}}/>

-## Contacts Auto-Creation
+### Contacts Auto-Creation

 Contact auto-creation is a handy built-in feature. This default feature automatically adds email contacts not already in your CRM, boosting your contact list without any extra effort on your part. To manage this feature, go to `Settings` > `Email`. You can toggle it on or off. Remember, turning it off means that all new email contacts must be manually entered into the CRM.

 <img src="/images/user-guide/emails/auto-creation.png" style={{width:'100%'}}/>

-## Upcoming Features
+### Upcoming Features

-Soon, you will have the capability to send emails, view attachments, and request access to email content that you're not allowed to read.
+Soon, you will have the capability to send emails, view attachments, and request access to email content that you're not allowed to read.
+
+<ArticleEditContent articleTitle="emails.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/fields.mdx
+++ b/packages/twenty-website/src/content/user-guide/fields.mdx
@ -6,11 +6,11 @@ image: /images/user-guide/placeholder-header.png
 ---


-# About Fields
+## About Fields

 Fields in an object are akin to the column names in an Excel spreadsheet, indicating the type of data stored — such as text, numbers, or dates — under specific names. These fields can be standard (created by default) or custom (user-created).

-## Standard Fields
+### Standard Fields

 The platform includes Standard Fields by default as predefined fields designed to meet common, universal requirements in business modeling.

@ -20,7 +20,7 @@ As essential parts of the data model, you can't delete them, but only deactivate

 <img src="/images/user-guide/fields/standard-fields.png" style={{width:'100%'}}/>

-## Custom Fields
+### Custom Fields

 A `Custom Field` is a user-defined attribute you can add to a standard or custom object to store specific information that's not captured by the default fields. These fields can carry different types of data such as text, number, date, Select values, etc. Custom fields allow you to tailor your database to the unique needs of your business.

@ -28,7 +28,7 @@ For instance, a custom field for SpaceX could be "Rocket Active Status", indicat

 <img src="/images/user-guide/fields/custom-fields.png"style={{width:'100%'}}/>

-# Create a Custom Field
+## Create a Custom Field

 To add a custom field to any object, follow these steps:
 	1.	Go to `Settings` in the left sidebar.
@ -38,7 +38,7 @@ To add a custom field to any object, follow these steps:

 Your newly created field is now available within the application's fields. To display it on a specific view, click on the options menu, then select "Fields".

-<div style={{padding:'71.15% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.15% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927628219?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -61,7 +61,7 @@ For creating `Custom Fields` in a more expeditious manner, make use of the **+**

 <img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>

-# Deactivate a field
+## Deactivate a field

 You can deactivate a field in the app to stop it from functioning without disrupting your data model. Deactivation is like a soft deletion, making the field unavailable for use in the app.

@ -83,4 +83,6 @@ And, voila! You've deactivated a field. But what does this imply for your CRM op

 3. **API:** You can still use deactivated Fields and their data through the API.

-You can reactivate Standard and Custom Fields or have the option to permanently delete them.
+You can reactivate Standard and Custom Fields or have the option to permanently delete them.
+
+<ArticleEditContent articleTitle="fields.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/github.mdx
+++ b/packages/twenty-website/src/content/user-guide/github.mdx
@ -5,29 +5,29 @@ icon: IconGitHub
 image: /images/user-guide/github/github-header.png
 ---

-# About
+## About

 The Twenty GitHub repository hosts a vast array of resources like source code, documentation, discussions, and issue tracking. This is where you will be able to access the full code behind Twenty.

 [Visit Twenty on Github](https://github.com/twentyhq/twenty)

-# Contributing
+## Contributing

 Contributing to the Twenty project on GitHub is a rewarding way to help improve the software you use. Whether you're fixing bugs, suggesting features, or improving documentation, your contributions are welcome.

-## Reporting Issues
+### Reporting Issues

-Encounter an issue? [Create an issue](https://github.com/twentyhq/twenty/issues/new) on GitHub, providing as much detail as possible.
+Encounter an issue? <ArticleLink href="https://github.com/twentyhq/twenty/issues/new">Create an issue</ArticleLink> on GitHub, providing as much detail as possible.

 <img src="/images/user-guide/github/new-issue.png" style={{width:'100%'}}/>

-## Suggesting Features
+### Suggesting Features

-What improvements would you like to see on Twenty? No matter your technical know-how, you can join [the conversation here](https://github.com/twentyhq/twenty/discussions).
+What improvements would you like to see on Twenty? No matter your technical know-how, you can join <ArticleLink href="https://github.com/twentyhq/twenty/discussions">the conversation here</ArticleLink>.

 <img src="/images/user-guide/github/github-conversations.png" style={{width:'100%'}}/>

-## Coding a feature
+### Coding a feature

 Start your journey by finding beginner-friendly tasks:

@ -39,11 +39,11 @@ Start your journey by finding beginner-friendly tasks:

 Ensure you're assigned to the issue to avoid overlapping work with other contributors.

-## Code of Conduct
+### Code of Conduct

-Remember to adhere to Twenty's [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/.github/CODE_OF_CONDUCT.md) throughout your contribution process.
+Remember to adhere to Twenty's <ArticleLink href="https://github.com/twentyhq/twenty/blob/main/.github/CODE_OF_CONDUCT.md">Code of Conduct</ArticleLink> throughout your contribution process.

-# Discord
+## Discord

 If you have any question, for example on how to contribute, join the community on [Discord](https://discord.gg/cx5n4Jzs57)

@ -51,4 +51,6 @@ If you have any question, for example on how to contribute, join the community o

 <br/>
 <br/>
-Thank you for contributing to Twenty ❤️
+Thank you for contributing to Twenty ❤️
+
+<ArticleEditContent articleTitle="github.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/glossary.mdx
+++ b/packages/twenty-website/src/content/user-guide/glossary.mdx
@ -5,39 +5,41 @@ icon: IconVocabulary
 image: /images/user-guide/placeholder-header.png
 ---

-# Company & People
+## Company & People
 The CRM has two fundamental types of records:
 - A `Company` represents a business or organization.
 - `People` represent your company's current and prospective customers or clients.

-# Kanban
+## Kanban
 A `Kanban` is a way to track a business process. Pipelines are present within a *module* and have *stages*:
 - A **module** has the logic for a certain business process (for example: sales, recruiting).
 - **Stages** map the steps in your process (for example: new, ongoing, won, lost).

-# Views 
+## Views 
 You can customize the display of your records using views, setting different filters and sorting options for each view.

-# Workspace
+## Workspace
 A `Workspace` typically represents a company using Twenty. It holds all the records and data that you and your team members add to Twenty.   
 It has a single domain name, which is typically the domain name your company uses for employee email addresses.

 Sure, here is the glossary in the requested markdown format:

-# Field 
+## Field 
 A field refers to a specific area where particular data is stored for an entity.

-# Record 
+## Record 
 A Record indicates an instance of an object, like a specific account or contact.

-# Tasks 
+## Tasks 
 Tasks in Twenty CRM are assigned activities relating to contacts, accounts, or opportunities.

-# Opportunities 
+## Opportunities 
 Opportunities in Twenty CRM are potential deals or sales with accounts or contacts.

-# Integration 
+## Integration 
 Integration are built-in tools that allow to link Twenty with other software or systems.

-# User Profile
-A User Profile is the information and settings specific to a workspace member in Twenty.
+## User Profile
+A User Profile is the information and settings specific to a workspace member in Twenty.
+
+<ArticleEditContent articleTitle="glossary.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/import-export-data.mdx
+++ b/packages/twenty-website/src/content/user-guide/import-export-data.mdx
@ -5,7 +5,7 @@ icon: IconNote
 image: /images/user-guide/placeholder-header.png
 ---

-# Import data
+## Import data

 You can import People and Companies data into Twenty from other apps using a .csv, .xslx, or .xsl file. In the <b>Companies</b> or <b>People</b> page, click on <b>Options</b> and then on <b>Import</b>. 

@ -13,7 +13,7 @@ Upload your file, match the columns, check your data and import it.

 <img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}}/>

-# Export data
+## Export data

 To export data from an object:

@ -23,7 +23,7 @@ To export data from an object:
 4. Click on `Export`.
 5. Select the save location for the CSV data. Note that exporting may take time with a large record count.

-<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/926226303?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -40,4 +40,6 @@ To export data from an object:
    title="Export data"
  ></iframe>
 </div>
-<script src="https://player.vimeo.com/api/player.js"></script>
+<script src="https://player.vimeo.com/api/player.js"></script>
+
+<ArticleEditContent articleTitle="import-export-data.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/integrations.mdx
+++ b/packages/twenty-website/src/content/user-guide/integrations.mdx
@ -5,23 +5,23 @@ icon: IconBrandZapier
 image: /images/user-guide/placeholder-header.png
 ---

-# About
+## About

 Integration with Zapier and Windmill is available for automating your workflows.

-# Zapier
+## Zapier

-Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integrations), and automate your work. Here's how you can connect Twenty to Zapier:
+Sync Twenty with 3000+ apps using <ArticleLink href="https://zapier.com/apps/twenty/integrations">Zapier</ArticleLink>, and automate your work. Here's how you can connect Twenty to Zapier:

 1. Go to Zapier and log in. 
 2. Click on `+ Create Zap` in the left sidebar. 
 3. Choose the application you want to set as the trigger. A trigger refers to an event that starts the automation. 
-4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. [Learn more about triggers and actions in Zapier.](https://zapier.com/how-it-works)
+4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. <ArticleLink href="https://zapier.com/how-it-works">Learn more about triggers and actions in Zapier.</ArticleLink>
 5. Once you choose the Twenty account that you want to use for your automation, you'll have to allow Zapier to access it by adding an API key. You can learn [how to generate your API key here.](/user-guide/api-webhooks)

 6. Enter your API key and click on 'Yes, Continue to Twenty.'

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927913866?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -40,4 +40,6 @@ Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integr
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-You can now continue creating your automation!
+You can now continue creating your automation!
+
+<ArticleEditContent articleTitle="integrations.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/kanban-views.mdx
+++ b/packages/twenty-website/src/content/user-guide/kanban-views.mdx
@ -5,15 +5,15 @@ icon: IconTargetArrow
 image: /images/user-guide/placeholder-header.png
 ---

-# About Kanban Views
+## About Kanban Views

 Kanban views visually map out process flows, where each column stands for a distinct stage and each card represents a record.

-# Move Cards between Stages
+## Move Cards between Stages

 You can move each card between stages as it goes through your workflow by dragging and dropping. To proceed, hold your click on a card and move it to the next stage.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927888627?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -32,15 +32,15 @@ Kanban views visually map out process flows, where each column stands for a dist
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Add and delete stages
+## Add and delete stages

 You can tailor your workflow to suit your needs using stages, which represent a value in a Select Field:

-## Add Stages
+### Add Stages

 To add a stage, access the Select Field Settings by navigating to Settings > Data Model, selecting your object, and then the field your Kanban board depends on.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927890428?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -59,13 +59,13 @@ To add a stage, access the Select Field Settings by navigating to Settings > Dat
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-## Remove Stages
+### Remove Stages

 To remove a stage, hover the stage name or the `⋮` icon, click `Edit from settings` in the Select Field settings, and then click <b>Delete</b> next to the relevant stage.

 <img src="/images/user-guide/kanban-views/edit-stage.png" style={{width:'100%'}}/>

-# Display fields 
+## Display fields 

 You can configure your Kanban board to display some fields and hide others. To hide a field, click on <b>Options</b> on the top right, then on <b>Fields</b> to bring up the list of options. Hover the field you want to hide to bring up the `-` button. Click on it to hide the field.  

@ -73,8 +73,10 @@ You can also rearrange the order of fields by holding down the field name and dr

 <img src="/images/user-guide/kanban-views/filter.png" style={{width:'100%'}}/>

-# Compact View
+## Compact View

 You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on <b>Options</b> on the top right and turn on the toggle in front of the <b>Compact view</b> option. 

-<img src="/images/user-guide/kanban-views/compact-view.png"style={{width:'100%'}}/>
+<img src="/images/user-guide/kanban-views/compact-view.png"style={{width:'100%'}}/>
+
+<ArticleEditContent articleTitle="kanban-views.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/notes.mdx
+++ b/packages/twenty-website/src/content/user-guide/notes.mdx
@ -7,7 +7,7 @@ image: /images/user-guide/notes/notes_header.png

 Manage your record-linked notes efficiently using the powerful **Notes** feature. This guide walks through how to create, format, comment, and delete notes seamlessly within record pages. 

-# Creating Notes
+## Creating Notes

 Creating notes in the system is intuitive and dynamic. You can either:

@ -17,11 +17,11 @@ Creating notes in the system is intuitive and dynamic. You can either:
 <img src="/images/user-guide/notes/add-note.png"style={{width:'100%'}}/>


-## Adding Content
+### Adding Content

 Start typing directly or press '/' to add elements like headings, files, or images instantly.

-## Format Content
+### Format Content

 You can format your notes right from the editor. Use markdown syntax, press the `/` key or click on the `+` icon on the editor to see the different block options, such as headings, tables, and lists. You can also attach images to your note. 

@ -29,7 +29,7 @@ Highlight the text to see more formatting options like bold, italics, and alignm

 You can also change the background color and text color of each block to highlight important things in your note. To do so, hover over the block you want to format and click on the `⋮⋮` icon besides the `+` icon. Click on <b>Colors</b> to open up all color options for both the text and the background.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927896302?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -48,14 +48,14 @@ You can also change the background color and text color of each block to highlig
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Viewing Notes
+## Viewing Notes

 The system displays all your notes linked to a specific record under the Notes section on the corresponding `Record page`.

-# Commenting
+## Commenting
 **Comments**: Work together effectively with your team members by adding comments on notes for updates, feedback, or discussions.

-# Saving And Deleting
+## Saving And Deleting

 All edits and additions to the note are automatically saved. 

@ -64,4 +64,6 @@ To delete a note:
 1. Open the note you wish to remove by clicking on it from within the `Record page`.
 2. Click the trashcan icon located in the top right corner of the screen.

-Please be aware that deleting a note is permanent and can't be undone.
+Please be aware that deleting a note is permanent and can't be undone.
+
+<ArticleEditContent articleTitle="notes.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/objects.mdx
+++ b/packages/twenty-website/src/content/user-guide/objects.mdx
@ -5,31 +5,31 @@ icon: IconChecklist
 image: /images/user-guide/placeholder-header.png
 ---

-# Standard Objects
+## Standard Objects

 Standard objects are predefined entities in your workspace that offer integrated, standardized intelligence requiring no extra configuration. They're part of a shared data model accessible to all users of Twenty.

 <img src="/images/user-guide/objects/standard-objects.png"style={{width:'100%'}}/>

-## People
+### People

 The `People` object aggregates customer relations data. It includes contact details and interaction history, providing a comprehensive view of your business's customer interactions.

-## Company
+### Company

 The `Companies` object consolidates business account information. It encompasses all pertinent data such as industry, size, location, and contact personnel, thereby offering an integrated perspective of your business's organizational connections. It is both link to the People and Opportunities objects.

-## Opportunities
+### Opportunities

 The `Opportunities` object encapsulates deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated accounts, and expected closure dates. This provides a well-rounded view of your business's sales pipeline. 

-# Custom objects
+## Custom objects

 Custom objects are objects that you can create to store information that's unique to your organization. They're not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.

 <img src="/images/user-guide/objects/custom-objects.png"style={{width:'100%'}}/>

-## Creating a new custom object 
+### Creating a new custom object 

 To create a new custom object:

@ -37,7 +37,7 @@ To create a new custom object:
 2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).


-<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -58,7 +58,7 @@ To create a new custom object:

 3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."

-<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -79,4 +79,6 @@ To create a new custom object:

 4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.

-<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
+<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
+
+<ArticleEditContent articleTitle="objects.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/table-views.mdx
+++ b/packages/twenty-website/src/content/user-guide/table-views.mdx
@ -5,17 +5,17 @@ icon: IconChecklist
 image: /images/user-guide/placeholder-header.png
 ---

-# About Table Views
+## About Table Views

 Table views are visual representations of data structured in rows and columns.

-# Create record
+## Create record

 Add records as needed, without limits. To add a record, you can either click on the **+** button at the top right of the screen or at the top of the record **Name** column. 

 Enter the record name then press `Enter` to save. To edit a record name, click on its name on its detail page.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927071691?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -35,14 +35,14 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
 <script src="https://player.vimeo.com/api/player.js"></script>


-# Delete record
+## Delete record

 **Index View:** To delete a record, select the checkbox next to the record and click the delete button below.

 **Record Page:** Tap the **3 dots menu** in the top right corner, then select delete.


-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927073570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -61,10 +61,12 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Add a Custom Field
+## Add a Custom Field

 To create a custom field, click the **+** button at the right end of the table columns and select **Customize fields**. 

 <img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>

-You can also do it by navigating to **Settings** > **Data Model** > **People**. Click on **Add Field**. Choose a field name and type. The new field will be available in the app.
+You can also do it by navigating to **Settings** > **Data Model** > **People**. Click on **Add Field**. Choose a field name and type. The new field will be available in the app.
+
+<ArticleEditContent articleTitle="table-views.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/tasks.mdx
+++ b/packages/twenty-website/src/content/user-guide/tasks.mdx
@ -6,7 +6,7 @@ image: /images/user-guide/tasks/tasks_header.png

 Manage all tasks within your workspace using the **Tasks** feature. This guide will show you how to create and manage tasks, switch between upcoming and completed tasks, edit task details, and much more.

-# Creating Tasks
+## Creating Tasks

 Creating tasks in Twenty is seamless. You can either:

@ -14,7 +14,7 @@ Creating tasks in Twenty is seamless. You can either:
 -  Use the search function by pressing `cmd/ctrl + k`, then select 'Create task' from the list of quick actions.
 -  Go to a `Record page` and press `+`at the top right of the page, or go to the Task tab and press the `Add Task`button. 

-<div style={{padding:'70.59% 0 0 0', position:'relative'}}>
+<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/928786754?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -33,11 +33,11 @@ Creating tasks in Twenty is seamless. You can either:
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-## Adding Task Content
+### Adding Task Content

 Once you've created a task you can enrich it with rich content, such as Titles, Bullet points or even images. To do so, press "/" and enter the desired command.

-# Viewing Tasks
+## Viewing Tasks

 The **Tasks** page displays all your tasks across your workspace. Here you can:

@ -46,7 +46,7 @@ The **Tasks** page displays all your tasks across your workspace. Here you can:

 You can also see tasks for a given Record on its `Record page`.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927908280?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -65,7 +65,7 @@ You can also see tasks for a given Record on its `Record page`.
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Editing Tasks
+## Editing Tasks

 To edit a task, you should click on its card. This will open a side panel offering the following features:

@ -73,7 +73,7 @@ To edit a task, you should click on its card. This will open a side panel offeri
 -  **Comments**: Work together with your team members by adding comments on tasks to give updates or feedback.
 -  **Automations**: Thanks to the API and Webhooks, you can also automate task creation triggered by specific activities in your workspace.

-# Marking Tasks as Complete
+## Marking Tasks as Complete

 To mark a task as complete:

@ -83,7 +83,7 @@ To mark a task as complete:

 This procedure will help keep an updated record of your accomplishments. 

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927910083?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -102,11 +102,13 @@ This procedure will help keep an updated record of your accomplishments.
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Delete a task
+## Delete a task

 To permanently remove a task:

 1. Open the task you want to delete by clicking on its card, either from the `Tasks` page or within a `Record page`.
 2. Click the trash icon located at the top right corner of the task details panel.

-Please note, deleting a task is permanent and can't be undone. Consider marking tasks as `Done` if there is a chance you will need to refer to them again.
+Please note, deleting a task is permanent and can't be undone. Consider marking tasks as `Done` if there is a chance you will need to refer to them again.
+
+<ArticleEditContent articleTitle="tasks.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/tips.mdx
+++ b/packages/twenty-website/src/content/user-guide/tips.mdx
@ -5,7 +5,7 @@ icon: IconInfoCircle
 image: /images/user-guide/placeholder-header.png
 ---

-# Update workspace name & logo
+## Update workspace name & logo

 Workspace admins can edit its name and logo in settings. 

@ -13,7 +13,7 @@ Workspace admins can edit its name and logo in settings.
 - Under <b>Workspace</b>, go to <b>General</b>.
 - Edit the name and logo. The system will automatically save your changes.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927915481?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -32,7 +32,7 @@ Workspace admins can edit its name and logo in settings.
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Enable dark mode 
+## Enable dark mode 

 Not a fan of light mode? Switch to dark mode with these steps:

@ -40,7 +40,7 @@ Not a fan of light mode? Switch to dark mode with these steps:
 - Under <b>User</b>, go to <b>Appearance</b>.
 Select **Dark**. The system will automatically save your changes.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927916570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -59,7 +59,7 @@ Select **Dark**. The system will automatically save your changes.
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Account settings 
+## Account settings 

 Configure your user account and set your preferences. 

@ -68,7 +68,7 @@ Configure your user account and set your preferences.
 - Manage your accounts and configure your email and calendar settings in <b>Accounts</b>. 
 - The system will automatically save your changes.

-# Invite & manage members
+## Invite & manage members

 Admins can invite new members any time. 

@ -76,14 +76,16 @@ Admins can invite new members any time.
 - Under <b>Workspace</b>, go to <b>Members</b>.
 - Use the invite link to add more members to your workspace or delete existing ones.

-# Quick Search 
+## Quick Search 

 You'll see a search bar at the top of your sidebar. You can also bring up the command bar with the `cmd/ctrl + k` shortcut to navigate through your workspace, and find people, companies, notes, and more. 

 The command bar also supports shortcuts for navigation.  

-# Add Records To Favorites
+## Add Records To Favorites

 You can add records to your favorites for quick access. To do so, expand the record you want to add, and click on the heart icon on the top right. You'll now be able to see your favorite records in your sidebar right above your workspace. 

-<img src="/images/user-guide/tips/favorites.png" style={{width:'100%', maxWidth:'800px'}}/>
+<img src="/images/user-guide/tips/favorites.png" style={{width:'100%', maxWidth:'800px'}}/>
+
+<ArticleEditContent articleTitle="tips.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/views-sort-filter.mdx
+++ b/packages/twenty-website/src/content/user-guide/views-sort-filter.mdx
@ -4,25 +4,25 @@ info: Find out how to create, manage and delete Object Views.
 icon: IconChecklist
 image: /images/user-guide/placeholder-header.png
 ---
-# About Views
+## About Views

 You can see your records in different ways by creating views. In a view, you can apply filters and sorts to organize your content efficiently. For instance, on the `People` object, you can create a view to isolate US contacts by filtering those with a US phone number.

-## Default View
+### Default View

 Each object comes with an unfiltered, unsorted, and undeletable view known as the Default view. It's named after the object's plural name, such as "All Companies," "All People," "All Opportunities".

 <img src="/images/user-guide/views/default-view.png" style={{width:'100%'}}/>

-# Creating, Editing and Deleting Views
+## Creating, Editing and Deleting Views

 You can create several custom views and share them with your team.

-## Creating a View
+### Creating a View

 There is two ways to create a new view. Either directly from the `View Switcher`, either filtering and sorting an existing view.

-### From View Switcher
+#### From View Switcher

 1. Open the View Switcher
 2. Click the `Add View` button at the bottom of the view switcher menu.
@ -33,7 +33,7 @@ There is two ways to create a new view. Either directly from the `View Switcher`

 The newly created view opens automatically.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927639721?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -52,11 +52,11 @@ The newly created view opens automatically.
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-### From Sorting and Filtering
+#### From Sorting and Filtering

 When you change the `Sorting` and `Filtering` of an existing view, a `Save as new view` button will appear at the right edge of the `View Bar`. This will opens the New View menu mentionned above, allowing you to create a new view out of an existing one.

-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927643495?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -75,7 +75,7 @@ When you change the `Sorting` and `Filtering` of an existing view, a `Save as ne
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-## Editing and Deleting a View
+### Editing and Deleting a View

 To Edit or Delete a view:
 1. Open the View Switcher
@ -85,7 +85,7 @@ To Edit or Delete a view:
 You will then be able to modify the view. To delete it, press the `Delete` button that just appeard.


-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927645774?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -104,15 +104,15 @@ You will then be able to modify the view. To delete it, press the `Delete` butto
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-# Navigating Between Views
+## Navigating Between Views

 To switch between views, simply open the view switcher and click the view you wish to open.

-# Customizing Views
+## Customizing Views

 Each view can be customized to streamline your business processes. Views help segment your data. You can customize views using filters, sorts, and field display.

-## Filtering a View
+### Filtering a View

 To filter a view:

@ -121,7 +121,7 @@ To filter a view:
 -  Add more filters with `+ Add filter` or remove them with **X**.


-<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/926282262?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -140,12 +140,12 @@ To filter a view:
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>

-## Sorting a View
+### Sorting a View

 Order your fields data in ascending or descending order:
 - Select **Sort**, choose a field, and define the sort order you desire.
 - You can apply and arrange several sorts as needed.
-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
  <iframe 
    src="https://player.vimeo.com/video/927885588?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
    frameborder="0" 
@ -165,12 +165,14 @@ Order your fields data in ascending or descending order:
 <script src="https://player.vimeo.com/api/player.js"></script>


-## Field display
+### Field display

 You can customize which fields to display within a view. To hide a field, click **Options** > **Fields** and select the `-` button next to the field or click on the field column header and select **hide**.

 You can rearrange fields by clicking their field column header and then press **Move Right** or **Move Left**.

-## Opening Record
+### Opening Record

-To open a record, click on the name in the first column. This action will open the corresponding Record page.
+To open a record, click on the name in the first column. This action will open the corresponding Record page.
+
+<ArticleEditContent articleTitle="views-sort-filter.mdx"></ArticleEditContent>
--- a/packages/twenty-website/src/content/user-guide/what-is-twenty.mdx
+++ b/packages/twenty-website/src/content/user-guide/what-is-twenty.mdx
@ -5,43 +5,53 @@ info: Discover Twenty, an open-source CRM, its features, benefits, system requir
 image: /images/user-guide/what-is-twenty/20.png
 ---

-# Overview
+## Overview

 Twenty is the leading open-source CRM, crafted by hundreds of contributors to suit your unique business needs.

-## Main Features
+### Main Features

-* **Contact Management:** Efficiently store and manage customer data. [Learn more](/user-guide/objects).
-* **Custom Objects:** Create and customize objects to fit your business needs. [Details](/user-guide/objects).
-* **Custom Fields:** Tailor data fields to capture and organize information specific to your operations. [Understand more](/user-guide/fields).
-* **Kanban & Table Views:** Optimize your workflow with flexible [Table Views](/user-guide/table-views) and [Kanban Views](/user-guide/kanban-views).
-* **Pipeline Visualization:** Get a clear view of your processes with customizable views. [Explore views](/user-guide/views-sort-and-filter).
-* **Email Integration:** View the emails of a specific customer or company within your workspace. [Integrate now](/user-guide/emails).
-* **Notes:** Create detailed notes for each record to share knowledge more effectively. [Add notes](/user-guide/notes).
-* **Tasks:** Schedule tasks to track customer interactions. [See how](/user-guide/tasks).
-* **API & Webhooks:** Connect to other apps and automate workflows with API and Webhooks. [Start integrating](/user-guide/integrations).
+**Contact Management:** Efficiently store and manage customer data. [Learn more](/user-guide/objects).

-## Benefits
+**Custom Objects:** Create and customize objects to fit your business needs. [Details](/user-guide/objects).

-* Customizable: Designed to fit your business needs.
-* Community-driven: Built and maintained by a large open-source community.
-* Cost-effective: You'll never be vendor-locked because can always self-host.
+**Custom Fields:** Tailor data fields to capture and organize information specific to your operations. [Understand more](/user-guide/fields).

-## System Requirements
+**Kanban & Table Views:** Optimize your workflow with flexible [Table Views](/user-guide/table-views) and [Kanban Views](/user-guide/kanban-views).

-* Modern web browser (Firefox, Chrome, Safari and Edge on their latest version are supported).
-* Internet connection (Offline mode isn't yet supported).
+**Pipeline Visualization:** Get a clear view of your processes with customizable views. [Explore views](/user-guide/views-sort-and-filter).

-# Demo
+**Email Integration:** View the emails of a specific customer or company within your workspace. [Integrate now](/user-guide/emails).
+
+**Notes:** Create detailed notes for each record to share knowledge more effectively. [Add notes](/user-guide/notes).
+
+**Tasks:** Schedule tasks to track customer interactions. [See how](/user-guide/tasks).
+
+**API & Webhooks:** Connect to other apps and automate workflows with API and Webhooks. [Start integrating](/user-guide/integrations).
+
+### Benefits
+
+**Customizable:** Designed to fit your business needs.
+
+**Community-driven:** Built and maintained by a large open-source community.
+
+**Cost-effective:** You'll never be vendor-locked because can always self-host.
+
+### System Requirements
+
+Modern web browser (Firefox, Chrome, Safari and Edge on their latest version are supported).
+
+Internet connection (Offline mode isn't yet supported).
+
+## Demo

 If you wish to try Twenty before creating your own account, go to demo.twenty.com and login with the following credentials:

-```
-email: noah@demo.dev
-password: Applecar2025
-```

-# Vision
+`email: noah@demo.dev`\
+`password: Applecar2025`
+
+## Vision
 Creating a good CRM is hard because it's a balancing act.
 For each business, the requirements seem straightforward, yet everyone's needs are distinct.
 The result is a CRM that's either too basic, or one that's attempting to be a jack-of-all-trades but ending up as a master of none.
@ -53,7 +63,8 @@ We prioritize universal principles and common patterns over feature lists.
 We don't try to have all the answers and instead empower users to find what works best for them.
 And Open-source is the bedrock of our approach, ensuring that Twenty evolves with its community, for its community.

-# Join now
+## Join now

-[Register here](https://app.twenty.com) or [become a contributor on GitHub](https://github.com/twentyhq/twenty).
+<ArticleLink href="https://app.twenty.com">Register here</ArticleLink> or <ArticleLink href="https://github.com/twentyhq/twenty">become a contributor on GitHub</ArticleLink>.

+<ArticleEditContent articleTitle="what-is-twenty.mdx"></ArticleEditContent>