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