Make <Background /> component responsive (#4767)

- Adjusted the height of the background image to fit every possible
screen
- Added the proper rotation degree to the background
- Refactored gradient colour stop into CONST to make sure each
background image starts at the same level

**To be noted :** 
I had to use Javascript and useEffect to make the div take the entire
height of the page (turn it into a "use client" component). This was
necessary because absolute positioning by default makes the element's
sizing relative to its nearest positioned ancestor, not the entire
document.

---------

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

packages/twenty-website/src/app/_components/contributors/AvatarGrid.tsx

@@ -26,6 +26,7 @@ const AvatarItem = styled.div`
   border-radius: 16px;
   overflow: hidden;
   transition: 200ms;
+  background-color: white;
 
   &:hover {
     -webkit-box-shadow: -6px 6px 0px 1px rgba(0, 0, 0, 1);

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

@@ -1,44 +1,100 @@
 'use client';
-
+import React from 'react';
 import styled from '@emotion/styled';
 
-const BackgroundContainer = styled.div`
+const BACKGROUND_ROTATION = -5;
+
+const BACKGROUND_IMAGE_URL =
+  'https://framerusercontent.com/images/nqEmdwe7yDXNsOZovuxG5zvj2E.png';
+
+const BackgroundImage = styled.div`
   position: absolute;
-  top: 100%;
+  height: calc(100% - 350px);
-  left: 0px;
+  width: 200%;
-  width: 100%;
+  top: 250px;
-  height: 100%;
+  overflow: visible;
-  max-height: 200%;
+  z-index: -3;
-  background-image: url(https://framerusercontent.com/images/nqEmdwe7yDXNsOZovuxG5zvj2E.png);
+  background-image: url(${BACKGROUND_IMAGE_URL});
+  transform: rotate(${BACKGROUND_ROTATION}deg);
   background-size: auto 20px;
   background-repeat: repeat;
   transform-origin: center center;
-  z-index: -2;
+
+  @media (max-width: 1024px) {
+    transform: rotate(-1deg);
+    top: 100px;
+    height: 100%;
+  }
 `;
 
-const Gradient = styled.div`
+const Container = styled.div`
-  position: absolute;
+  position: relative;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  max-height: 200%;
+  width: 100%;
-  top: 100%;
+  overflow: hidden;
-  left: 0;
+  min-width: 100vw;
-  right: 0;
+  max-width: 100vw;
-  bottom: 0;
+  z-index: 0;
-  background: linear-gradient(
+
-    185deg,
+  &::before {
-    #fff 8.33%,
+    content: '';
-    rgba(255, 255, 255, 0.08) 48.95%,
+    position: absolute;
-    #fff 92.18%
+    top: 150px;
-  );
+    left: 0;
-  z-index: -1;
+    height: 300px;
+    width: 200%;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    transform: rotate(${BACKGROUND_ROTATION}deg);
+    z-index: -2;
+    pointer-events: none;
+
+    @media (max-width: 1024px) {
+      height: 200px;
+      top: 50px;
+      transform: rotate(-1deg);
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 140px;
+    left: -20px;
+    height: 300px;
+    width: 220%;
+    background: linear-gradient(
+      to top,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    transform: rotate(${BACKGROUND_ROTATION}deg);
+    z-index: -2;
+    pointer-events: none;
+
+    @media (max-width: 1024px) {
+      height: 200px;
+      transform: rotate(-1deg);
+      bottom: 0px;
+    }
+  }
 `;
 
-export const Background = () => {
+type BackgroundProps = {
+  children: React.ReactNode;
+};
+
+export const Background = ({ children }: BackgroundProps) => {
   return (
-    <>
+    <Container>
-      <BackgroundContainer />
+      {children}
-      <Gradient />
+      <BackgroundImage />
-    </>
+    </Container>
   );
 };

packages/twenty-website/src/app/contributors/[slug]/page.tsx

@@ -100,8 +100,7 @@ export default async function ({ params }: { params: { slug: string } }) {
     .sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime());
 
   return (
-    <>
+    <Background>
-      <Background />
       <ContentContainer>
         <Breadcrumb active={contributor.id} />
         <ProfileCard
@@ -129,6 +128,6 @@ export default async function ({ params }: { params: { slug: string } }) {
         />
         <ThankYou username={contributor.id} />
       </ContentContainer>
-    </>
+    </Background>
   );
 }

packages/twenty-website/src/app/contributors/page.tsx

@@ -43,13 +43,12 @@ const Contributors = async () => {
     .filter((contributor) => contributor.pullRequestCount > 0);
 
   return (
-    <>
+    <Background>
-      <Background />
       <ContentContainer>
         <Header />
         <AvatarGrid users={fitlerContributors as Contributor[]} />
       </ContentContainer>
-    </>
+    </Background>
   );
 };
 

packages/twenty-website/src/app/oss-friends/page.tsx

@@ -10,8 +10,7 @@ export default async function OssFriends() {
   const listJson = await ossList.json();
 
   return (
-    <>
+    <Background>
-      <Background />
       <ContentContainer>
         <Header />
         <CardContainer>
@@ -20,6 +19,6 @@ export default async function OssFriends() {
           ))}
         </CardContainer>
       </ContentContainer>
-    </>
+    </Background>
   );
 }