Modify UI website and fix navbar issue on small devices (#4961)

-Fixed scroll issue on navbar:


https://github.com/twentyhq/twenty/assets/102751374/19f609f0-637d-483f-a695-f4a276155f2c

-Modified various UI elements, including design and layout adjustments
Example: 
**Before:**

<img width="279" alt="Screenshot 2024-04-14 at 18 45 04"
src="https://github.com/twentyhq/twenty/assets/102751374/c0f58aa6-440b-475a-bc85-69fef564f693">

**After:** 
<img width="312" alt="Screenshot 2024-04-14 at 18 45 17"
src="https://github.com/twentyhq/twenty/assets/102751374/2da4c2e8-e482-4d36-b6dc-02a51dde1950">

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/_components/oss-friends/Background.tsx

@@ -39,6 +39,10 @@ const Container = styled.div`
   max-width: 100vw;
   z-index: 0;
 
+  @media (max-width: 810px) {
+    margin-top: 64px;
+  }
+
   &::before {
     content: '';
     position: absolute;

packages/twenty-website/src/app/_components/releases/StyledTitle.tsx

@@ -9,7 +9,6 @@ const StyledTitle = styled.div`
 
   @media (max-width: 810px) {
     font-size: 1em;
-    margin: 64px auto;
   }
 `;
 const StyledHeader = styled.h1`

packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx

@@ -10,6 +10,7 @@ const Container = styled.div`
   @media (max-width: 809px) {
     width: 100%;
     padding: 0px 24px 0px 24px;
+    margin-top: 64px;
   }
 `;
 

packages/twenty-website/src/app/_components/ui/layout/LoaderAnimation.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
+const StyledMotionDiv = styled(motion.div)`
+  max-width: 100%;
+`;
+
 const containerVariants = {
   hidden: { opacity: 0, y: 20 },
   visible: {
@@ -11,9 +16,13 @@ const containerVariants = {
 };
 
 const MotionContainer = ({ children }: { children?: React.ReactNode }) => (
-  <motion.div variants={containerVariants} initial="hidden" animate="visible">
+  <StyledMotionDiv
+    variants={containerVariants}
+    initial="hidden"
+    animate="visible"
+  >
     {children}
-  </motion.div>
+  </StyledMotionDiv>
 );
 
 export default MotionContainer;

packages/twenty-website/src/app/_components/ui/layout/header/styled.ts

@@ -28,7 +28,9 @@ export const MobileNav = styled.nav`
   align-items: center;
   overflow: visible;
   padding: 0 12px;
-  position: relative;
+  position: fixed;
+  z-index: 2;
+  background-color: white;
   transform-origin: 50% 50% 0px;
   border-bottom: 1px solid rgba(20, 20, 20, 0.08);
   height: 64px;

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

@@ -16,6 +16,9 @@ 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`

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

@@ -13,6 +13,9 @@ const StyledContainer = styled.div`
     flexDirection: 'row',
     justifyContent: 'center',
   })};
+  @media (max-width: 810px) {
+    margin-top: 64px;
+  }
 `;
 
 const StyledWrapper = styled.div`

packages/twenty-website/src/app/layout.css

@@ -13,6 +13,17 @@ body {
     font-family: var(--font-gabarito);
 }
 
+@media (max-width: 810px) {
+    body {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    body::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -57,4 +68,10 @@ nav.toc a{
     font-size: 15px;
     font-weight: 500;
     text-decoration: none;
-}
+}
+
+code {
+    background: var(--Transparency-Lighter, #1414140a);
+    padding: 4px;
+    border-radius: 4px;
+  }