OSS Friends list is out of date (#3192)

* OSS Friends list is out of date Co-authored-by: Thiago Nascimbeni <[email protected]> * Add icons Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> * Refactor according to review Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: v1b3m <[email protected]> * OSS Friends list is out of date Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: niteshsingh1357 <[email protected]> Co-authored-by: v1b3m <[email protected]> --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: niteshsingh1357 <[email protected]>
twentyhq · Jan 3, 2024 · 1924962 · 1924962
1 parent df6ceb7
commit 1924962
Show file tree

Hide file tree

Showing 6 changed files with 266 additions and 0 deletions.
diff --git a/packages/twenty-website/src/app/components/oss-friends/Background.tsx 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 (
+    <>
+      <BackgroundContainer />
+      <Gradient />
+    </>
+  );
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/Card.tsx 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 (
+    <Container>
+      <div>
+        <Icon src={`https://favicon.twenty.com/${removeProtocol(data.href)}`} />
+        <Title>{data.name}</Title>
+        <Description>{data.description}</Description>
+      </div>
+
+      <Button href={data.href} className={gabarito.className}></Button>
+    </Container>
+  );
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/CardContainer.tsx 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 <Container>{children}</Container>;
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/ContentContainer.tsx 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 <Container>{children}</Container>;
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/Header.tsx 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 (
+    <>
+      <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 />
+        promote open-source software.
+      </Description>
+    </>
+  );
+};
diff --git a/packages/twenty-website/src/app/oss-friends/page.tsx 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 (
+    <>
+      <Background />
+      <ContentContainer>
+        <Header />
+        <CardContainer>
+          {listJson.data.map((data: OssData, index: number) => (
+            <Card key={index} data={data} />
+          ))}
+        </CardContainer>
+      </ContentContainer>
+    </>
+  );
+}