Update oss friends (#5108)

Modified OSS friends to fit figma (fonts, colors, margins etc. ) and
made it responsive.

---------

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

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

@@ -25,6 +25,10 @@ const BackgroundImage = styled.div`
     top: 100px;
     height: 100%;
   }
+
+  @media (max-width: 800px) {
+    display: none;
+  }
 `;
 
 const Container = styled.div`

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

@@ -3,6 +3,8 @@
 import styled from '@emotion/styled';
 import { Gabarito } from 'next/font/google';
 
+import { Theme } from '@/app/_components/ui/theme/theme';
+
 export interface OssData {
   name: string;
   description: string;
@@ -22,7 +24,7 @@ const Container = styled.div`
   border-radius: 8px;
   cursor: pointer;
   transition: 200ms;
-
+  max-width: 400px;
   &:hover {
     -webkit-box-shadow: -3px 3px 2px 0px rgba(0, 0, 0, 1);
     -moz-box-shadow: -3px 3px 2px 0px rgba(0, 0, 0, 1);
@@ -31,24 +33,36 @@ const Container = styled.div`
 
   @media (max-width: 1200px) {
     width: 45%;
-    min-width: 350px;
   }
 
   @media (max-width: 810px) {
-    width: 95%;
+    width: 100%;
   }
 `;
 
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-content: flex-start;
+`;
+
 const Title = styled.p`
   font-size: 32px;
-  font-weight: 500;
+  font-weight: 700;
-  color: black;
+  color: ${Theme.text.color.secondary};
+  margin: 16px 0px;
+  @media (max-width: 1200px) {
+    font-size: 24px;
+  }
 `;
 
 const Description = styled.p`
   font-size: 16px;
   font-weight: 500;
   color: #b3b3b3;
+  line-height: ${Theme.text.lineHeight.lg};
+  margin: 0;
 `;
 
 const Button = styled.a`
@@ -65,6 +79,10 @@ const Button = styled.a`
   position: relative;
   height: 60px;
 
+  @media (max-width: 800px) {
+    font-size: 18px;
+  }
+
   &:after {
     content: 'Visit Website';
     border: 2px solid black;
@@ -94,9 +112,9 @@ const gabarito = Gabarito({
 });
 
 const Icon = styled.img`
-  position: absolute;
   height: 24px;
   width: 24px;
+  border-radius: 4px;
 `;
 
 // remove the protocol from the url
@@ -105,11 +123,11 @@ const removeProtocol = (url: string) => url.replace(/(^\w+:|^)\/\//, '');
 export const Card = ({ data }: { data: OssData }) => {
   return (
     <Container>
-      <div>
+      <StyledContent>
         <Icon src={`https://favicon.twenty.com/${removeProtocol(data.href)}`} />
         <Title>{data.name}</Title>
         <Description>{data.description}</Description>
-      </div>
+      </StyledContent>
 
       <Button href={data.href} className={gabarito.className}></Button>
     </Container>

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

@@ -9,6 +9,13 @@ const Container = styled.div`
   justify-content: center;
   max-width: 1000px;
   margin: 0 auto;
+  width: 95%;
+  margin-bottom: 24px;
+  @media (max-width: 800px) {
+    width: 100%;
+    margin: 0;
+    justify-content: center;
+  }
 `;
 
 export const CardContainer = ({ children }: { children?: React.ReactNode }) => {

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

@@ -7,11 +7,10 @@ const Container = styled.div`
   text-align: center;
   flex-direction: column;
   width: 100%;
-
+  gap: 64px;
-  gap: 26px;
   @media (max-width: 809px) {
     width: 100%;
-    padding: 0px 12px 40px 12px;
+    padding: 0px 20px 40px 20px;
   }
 `;
 

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

@@ -2,15 +2,17 @@
 
 import styled from '@emotion/styled';
 
-const Title = styled.h2`
+import { Theme } from '@/app/_components/ui/theme/theme';
+
+const Title = styled.h1`
   font-size: 56px;
-  font-weight: 600;
+  font-weight: 700;
   color: #b3b3b3;
-  margin-bottom: 0px;
+  margin-bottom: 24px;
   margin-top: 64px;
 
-  @media (max-width: 810px) {
+  @media (max-width: 1200px) {
-    font-size: 28px;
+    font-size: 32px;
   }
 `;
 
@@ -20,6 +22,9 @@ const Description = styled.h2`
   margin-top: 0px;
   margin-bottom: 36px;
   font-weight: 400;
+  line-height: ${Theme.text.lineHeight.lg};
+  margin: 0 auto;
+  max-width: 600px;
   @media (max-width: 810px) {
     font-size: 18px;
   }
@@ -27,15 +32,15 @@ const Description = styled.h2`
 
 export const Header = () => {
   return (
-    <>
+    <div>
       <Title>
         Open-source <br /> <span style={{ color: 'black' }}>friends</span>
       </Title>
 
       <Description>
-        We are proud to collaborate with a diverse group of partners to <br />
+        We are proud to collaborate with a diverse group of partners to promote
-        promote open-source software.
+        open-source software.
       </Description>
-    </>
+    </div>
   );
 };