diff --git a/packages/twenty-website/src/app/components/oss-friends/Background.tsx b/packages/twenty-website/src/app/components/oss-friends/Background.tsx
new file mode 100644
index 0000000000..83040d6782
--- /dev/null
+++ b/packages/twenty-website/src/app/components/oss-friends/Background.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const BackgroundContainer = styled.div`
+ position: absolute;
+ top: 100%;
+ left: 0px;
+ width: 100%;
+ height: 200%;
+ background-image: url(https://framerusercontent.com/images/nqEmdwe7yDXNsOZovuxG5zvj2E.png);
+ background-size: auto 20px;
+ background-repeat: repeat;
+ transform-origin: center center;
+ z-index: -2;
+ }
+`;
+
+const Gradient = styled.div`
+ position: absolute;
+ width: 100%;
+ height: 200%;
+ top: 100%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(
+ 185deg,
+ #fff 8.33%,
+ rgba(255, 255, 255, 0.08) 48.95%,
+ #fff 92.18%
+ );
+ z-index: -1;
+`;
+
+export const Background = () => {
+ return (
+ <>
+
+
+ >
+ );
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/Card.tsx b/packages/twenty-website/src/app/components/oss-friends/Card.tsx
new file mode 100644
index 0000000000..3154ee608b
--- /dev/null
+++ b/packages/twenty-website/src/app/components/oss-friends/Card.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import styled from '@emotion/styled';
+import { Gabarito } from 'next/font/google';
+
+export interface OssData {
+ name: string;
+ description: string;
+ href: string;
+}
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 312px;
+ height: 360px;
+ background-color: #fafafa;
+ border: 2px solid black;
+ text-align: left;
+ padding: 32px;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: 200ms;
+
+ &: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);
+ box-shadow: -3px 3px 2px 0px rgba(0, 0, 0, 1);
+ }
+
+ @media (max-width: 1200px) {
+ width: 45%;
+ min-width: 350px;
+ }
+
+ @media (max-width: 810px) {
+ width: 95%;
+ }
+`;
+
+const Title = styled.p`
+ font-size: 32px;
+ font-weight: 500;
+ color: black;
+`;
+
+const Description = styled.p`
+ font-size: 16px;
+ font-weight: 500;
+ color: #b3b3b3;
+`;
+
+const Button = styled.a`
+ border: 2px solid black;
+ border-radius: 12px;
+ padding: 16px 24px;
+ font-size: 20px;
+ font-weight: 500;
+ color: black;
+ background-color: white;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ position: relative;
+ height: 60px;
+
+ &:after {
+ content: 'Visit Website';
+ border: 2px solid black;
+ border-radius: 12px;
+ position: absolute;
+ display: block;
+ left: 8px;
+ bottom: 7px;
+ height: 60px;
+ line-height: 60px;
+ width: 100%;
+ background-color: white;
+ transition: 200ms;
+ }
+
+ &:hover:after {
+ left: 4px;
+ bottom: 3px;
+ }
+`;
+
+const gabarito = Gabarito({
+ weight: ['400', '500'],
+ subsets: ['latin'],
+ display: 'swap',
+ adjustFontFallback: false,
+});
+
+const Icon = styled.img`
+ position: absolute;
+ height: 24px;
+ width: 24px;
+`;
+
+// remove the protocol from the url
+const removeProtocol = (url: string) => url.replace(/(^\w+:|^)\/\//, '');
+
+export const Card = ({ data }: { data: OssData }) => {
+ return (
+
+
+
+
{data.name}
+ {data.description}
+
+
+
+
+ );
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/CardContainer.tsx b/packages/twenty-website/src/app/components/oss-friends/CardContainer.tsx
new file mode 100644
index 0000000000..c81733d92c
--- /dev/null
+++ b/packages/twenty-website/src/app/components/oss-friends/CardContainer.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 32px;
+ justify-content: center;
+ max-width: 1000px;
+ margin: 0 auto;
+`;
+
+export const CardContainer = ({ children }: { children?: React.ReactNode }) => {
+ return {children};
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/ContentContainer.tsx b/packages/twenty-website/src/app/components/oss-friends/ContentContainer.tsx
new file mode 100644
index 0000000000..130bb9041c
--- /dev/null
+++ b/packages/twenty-website/src/app/components/oss-friends/ContentContainer.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+ width: 100%;
+
+ gap: 26px;
+ @media (max-width: 809px) {
+ width: 100%;
+ padding: 0px 12px 0px 12px;
+ }
+`;
+
+export const ContentContainer = ({
+ children,
+}: {
+ children?: React.ReactNode;
+}) => {
+ return {children};
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/Header.tsx b/packages/twenty-website/src/app/components/oss-friends/Header.tsx
new file mode 100644
index 0000000000..61f57f0440
--- /dev/null
+++ b/packages/twenty-website/src/app/components/oss-friends/Header.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const Title = styled.h2`
+ font-size: 56px;
+ font-weight: 600;
+ color: #b3b3b3;
+ margin-bottom: 0px;
+ margin-top: 64px;
+
+ @media (max-width: 810px) {
+ font-size: 28px;
+ }
+`;
+
+const Description = styled.h2`
+ font-size: 20px;
+ color: #818181;
+ margin-top: 0px;
+ margin-bottom: 36px;
+ font-weight: 400;
+ @media (max-width: 810px) {
+ font-size: 18px;
+ }
+`;
+
+export const Header = () => {
+ return (
+ <>
+
+ Open-source
friends
+
+
+
+ We are proud to collaborate with a diverse group of partners to
+ promote open-source software.
+
+ >
+ );
+};
diff --git a/packages/twenty-website/src/app/oss-friends/page.tsx b/packages/twenty-website/src/app/oss-friends/page.tsx
new file mode 100644
index 0000000000..c64bc3f775
--- /dev/null
+++ b/packages/twenty-website/src/app/oss-friends/page.tsx
@@ -0,0 +1,25 @@
+import { Background } from '@/app/components/oss-friends/Background';
+import { Card, OssData } from '@/app/components/oss-friends/Card';
+import { CardContainer } from '@/app/components/oss-friends/CardContainer';
+import { ContentContainer } from '@/app/components/oss-friends/ContentContainer';
+import { Header } from '@/app/components/oss-friends/Header';
+
+export default async function OssFriends() {
+ const ossList = await fetch('https://formbricks.com/api/oss-friends');
+
+ const listJson = await ossList.json();
+
+ return (
+ <>
+
+
+
+
+ {listJson.data.map((data: OssData, index: number) => (
+
+ ))}
+
+
+ >
+ );
+}