mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-23 20:13:21 +03:00
OSS Friends list is out of date (#3192)
* OSS Friends list is out of date Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Add icons Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Refactor according to review Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> * OSS Friends list is out of date Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
This commit is contained in:
gitstart-twenty
GitHub
parent
df6ceb7dfe
commit
1924962e8c
@ -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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
117
packages/twenty-website/src/app/components/oss-friends/Card.tsx
Normal file
117
packages/twenty-website/src/app/components/oss-friends/Card.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>;
|
||||
};
|
||||
@ -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>;
|
||||
};
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
25
packages/twenty-website/src/app/oss-friends/page.tsx
Normal file
25
packages/twenty-website/src/app/oss-friends/page.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user