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/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>
   );
 };