twentyhq · FelixMalfait · Feb 5, 2024 · Jan 25, 2024 · Jan 27, 2024 · Jan 29, 2024
diff --git a/packages/twenty-website/src/app/components/AvatarGrid.tsx b/packages/twenty-website/src/app/components/AvatarGrid.tsx
@@ -9,14 +9,29 @@ export interface User {
 }
 
 const AvatarGridContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  grid-gap: 10px;
+  margin: 0 auto;
+  max-width: 1024px;
+  justify-items: center;
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+  flex-wrap: wrap;
 `;
 
 const AvatarItem = styled.div`
   position: relative;
-  width: 100%;
+  width: 124px;
+  height: 124px;
+  border: 3px solid #141414;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: 200ms;
+
+  &:hover {
+    -webkit-box-shadow: -6px 6px 0px 1px rgba(0, 0, 0, 1);
+    -moz-box-shadow: -6px 6px 0px 1px rgba(0, 0, 0, 1);
+    box-shadow: -6px 6px 0px 1px rgba(0, 0, 0, 1);
+  }
 
   img {
     width: 100%;

diff --git a/packages/twenty-website/src/app/components/Breadcrumbs.tsx b/packages/twenty-website/src/app/components/Breadcrumbs.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Link from 'next/link';
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  color: #b3b3b3;
+`;
+
+const InternalLinkItem = styled(Link)`
+  text-decoration: none;
+  color: #b3b3b3;
+`;
+
+const ExternalLinkItem = styled.a`
+  text-decoration: none;
+  color: #b3b3b3;
+`;
+
+const ActivePage = styled.span`
+  color: #818181;
+`;
+
+interface BreadcrumbsProps {
+  items: {
+    uri: string;
+    label: string;
+    isExternal?: boolean;
+  }[];
+  activePage: string;
+  separator: string;
+}
+
+export const Breadcrumbs = ({
+  items,
+  activePage,
+  separator,
+}: BreadcrumbsProps) => {
+  return (
+    <Container>
+      {items.map((item, index) => (
+        <React.Fragment key={`${item?.uri ?? 'item'}-${index}`}>
+          {item.isExternal ? (
+            <ExternalLinkItem href={item.uri}>{item.label}</ExternalLinkItem>
+          ) : (
+            <InternalLinkItem href={item.uri}>{item.label}</InternalLinkItem>
+          )}
+          <span>{separator}</span>
+        </React.Fragment>
+      ))}
+      <ActivePage>{activePage}</ActivePage>
+    </Container>
+  );
+};
diff --git a/packages/twenty-website/src/app/components/HeaderDesktop.tsx b/packages/twenty-website/src/app/components/HeaderDesktop.tsx
@@ -2,11 +2,10 @@
 
 import styled from '@emotion/styled';
 import { IBM_Plex_Mono } from 'next/font/google';
-import { usePathname } from 'next/navigation';
 
 import { ExternalArrow } from '@/app/components/ExternalArrow';
 
-import { DiscordIcon, GithubIcon, GithubIcon2, XIcon } from './Icons';
+import { GithubIcon } from './Icons';
 import { Logo } from './Logo';
 
 const IBMPlexMono = IBM_Plex_Mono({
@@ -102,88 +101,35 @@ const LinkNextToCTA = styled.a`
 `;
 
 const CallToAction = () => {
-  const path = usePathname();
-  const isTwentyDev = path.includes('developers');
-
   return (
     <CallToActionContainer>
-      {isTwentyDev ? (
-        <>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              gap: '10px',
-            }}
-          >
-            <a href="https://x.com/twentycrm" target="_blank" rel="noreferrer">
-              <XIcon size="M" />
-            </a>
-            <a
-              href="https://github.com/twentyhq/twenty"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <GithubIcon2 size="M" />
-            </a>
-            <a
-              href="https://discord.gg/UfGNZJfAG6"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <DiscordIcon size="M" />
-            </a>
-          </div>
-        </>
-      ) : (
-        <>
-          <LinkNextToCTA href="https://github.com/twentyhq/twenty">
-            Sign in
-          </LinkNextToCTA>
-          <a href="https://twenty.com/stripe-redirection">
-            <StyledButton>Get Started</StyledButton>
-          </a>
-        </>
-      )}
+      <LinkNextToCTA href="https://github.com/twentyhq/twenty">
+        Sign in
+      </LinkNextToCTA>
+      <a href="https://twenty.com/stripe-redirection">
+        <StyledButton>Get Started</StyledButton>
+      </a>
     </CallToActionContainer>
   );
 };
 
 export const HeaderDesktop = () => {
-  const path = usePathname();
-  const isTwentyDev = path.includes('developers');
-
   return (
     <Nav>
       <LogoContainer>
         <Logo />
-        {isTwentyDev && (
-          <LogoAddon className={IBMPlexMono.className}>
-            for Developers
-          </LogoAddon>
-        )}
       </LogoContainer>
-      {isTwentyDev ? (
-        <LinkList>
-          <ListItem href="/developers/docs">Docs</ListItem>
-          <ListItem href="/developers/contributors">Contributors</ListItem>
-          <ListItem href="/">
-            Cloud <ExternalArrow />
-          </ListItem>
-        </LinkList>
-      ) : (
-        <LinkList>
-          <ListItem href="/pricing">Pricing</ListItem>
-          <ListItem href="/story">Story</ListItem>
-          <ListItem href="https://docs.twenty.com">
-            Docs <ExternalArrow />
-          </ListItem>
-          <ListItem href="https://github.com/twentyhq/twenty">
-            <GithubIcon color="rgb(71,71,71)" /> 5.7k <ExternalArrow />
-          </ListItem>
-        </LinkList>
-      )}
+      <LinkList>
+        <ListItem href="/pricing">Pricing</ListItem>
+        <ListItem href="/story">Story</ListItem>
+        <ListItem href="/developers/contributors">Contributors</ListItem>
+        <ListItem href="https://docs.twenty.com">
+          Docs <ExternalArrow />
+        </ListItem>
+        <ListItem href="https://github.com/twentyhq/twenty">
+          <GithubIcon color="rgb(71,71,71)" /> 5.7k <ExternalArrow />
+        </ListItem>
+      </LinkList>
       <CallToAction />
     </Nav>
   );

diff --git a/packages/twenty-website/src/app/components/HeaderMobile.tsx b/packages/twenty-website/src/app/components/HeaderMobile.tsx
@@ -174,6 +174,9 @@ const NavOpen = styled.div`
   gap: 33px;
   padding-top: 32px;
   z-index: 100;
+  transition: transform 0.2s ease-in;
+  display: flex;
+  transform-origin: top;
 `;
 
 const MobileMenu = styled.div`
@@ -208,7 +211,11 @@ export const HeaderMobile = () => {
           <HamburgerLine2 id="line2" />
         </HamburgerContainer>
       </Nav>
-      <NavOpen style={{ display: menuOpen ? 'flex' : 'none' }}>
+      <NavOpen
+        style={{
+          transform: `scaleY(${menuOpen ? '1' : '0'})`,
+        }}
+      >
         <LinkList>
           <ListItem href="/pricing">Pricing</ListItem>
           <ListItem href="/story">Story</ListItem>

diff --git a/packages/twenty-website/src/app/components/Icons.tsx b/packages/twenty-website/src/app/components/Icons.tsx
@@ -7,7 +7,7 @@ const getSize = (size: string) => {
     case 'L':
       return '48px';
     default:
-      return '14px';
+      return size;
   }
 };
 
@@ -117,3 +117,38 @@ export const GithubIcon2 = ({ size = 'S', color = 'rgb(179, 179, 179)' }) => {
     </div>
   );
 };
+
+export const PullRequestIcon = ({ size = 'S', color = 'rgb(179,179,179)' }) => {
+  const dimension = getSize(size);
+  return (
+    <div style={{ width: dimension, height: dimension }}>
+      <svg viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M3 14C3.53043 14 4.03914 14.2107 4.41421 14.5858C4.78929 14.9609 5 15.4696 5 16C5 16.5304 4.78929 17.0391 4.41421 17.4142C4.03914 17.7893 3.53043 18 3 18C2.46957 18 1.96086 17.7893 1.58579 17.4142C1.21071 17.0391 1 16.5304 1 16C1 15.4696 1.21071 14.9609 1.58579 14.5858C1.96086 14.2107 2.46957 14 3 14ZM3 14V6M3 6C2.46957 6 1.96086 5.78929 1.58579 5.41421C1.21071 5.03914 1 4.53043 1 4C1 3.46957 1.21071 2.96086 1.58579 2.58579C1.96086 2.21071 2.46957 2 3 2C3.53043 2 4.03914 2.21071 4.41421 2.58579C4.78929 2.96086 5 3.46957 5 4C5 4.53043 4.78929 5.03914 4.41421 5.41421C4.03914 5.78929 3.53043 6 3 6ZM15 14C15.5304 14 16.0391 14.2107 16.4142 14.5858C16.7893 14.9609 17 15.4696 17 16C17 16.5304 16.7893 17.0391 16.4142 17.4142C16.0391 17.7893 15.5304 18 15 18C14.4696 18 13.9609 17.7893 13.5858 17.4142C13.2107 17.0391 13 16.5304 13 16C13 15.4696 13.2107 14.9609 13.5858 14.5858C13.9609 14.2107 14.4696 14 15 14ZM15 14V6C15 5.46957 14.7893 4.96086 14.4142 4.58579C14.0391 4.21071 13.5304 4 13 4H8M8 4L11 7M8 4L11 1"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="transparent"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export const HeartIcon = ({ size = 'S', color = 'rgb(179,179,179)' }) => {
+  const dimension = getSize(size);
+  return (
+    <div style={{ width: dimension, height: dimension }}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20" fill="none">
+        <path
+          d="M18.513 10.572L11.013 18L3.513 10.572C3.0183 10.0906 2.62864 9.51201 2.36854 8.87263C2.10845 8.23325 1.98356 7.54694 2.00173 6.85693C2.01991 6.16691 2.18076 5.48813 2.47415 4.86333C2.76755 4.23853 3.18713 3.68125 3.70648 3.22657C4.22583 2.7719 4.8337 2.42968 5.49181 2.22147C6.14991 2.01327 6.844 1.94358 7.53036 2.0168C8.21673 2.09001 8.8805 2.30455 9.47987 2.6469C10.0792 2.98925 10.6012 3.45199 11.013 4.00599C11.4265 3.45602 11.9491 2.99731 12.5481 2.6586C13.1471 2.31988 13.8095 2.10844 14.4939 2.03751C15.1784 1.96658 15.8701 2.03769 16.5258 2.24639C17.1815 2.45508 17.787 2.79687 18.3045 3.25036C18.8221 3.70385 19.2404 4.25928 19.5334 4.88189C19.8264 5.50449 19.9877 6.18088 20.0073 6.8687C20.0269 7.55653 19.9043 8.24099 19.6471 8.87924C19.39 9.5175 19.0039 10.0958 18.513 10.578"
+          stroke={color}
+          strokeWidth="2.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/packages/twenty-website/src/app/components/developers/contributors/Header.tsx b/packages/twenty-website/src/app/components/developers/contributors/Header.tsx
@@ -0,0 +1,25 @@
+'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;
+  }
+`;
+
+export const Header = () => {
+  return (
+    <>
+      <Title>
+        Our amazing <br /> <span style={{ color: 'black' }}>Contributors</span>
+      </Title>
+    </>
+  );
+};
diff --git a/packages/twenty-website/src/app/components/oss-friends/Background.tsx b/packages/twenty-website/src/app/components/oss-friends/Background.tsx
@@ -7,19 +7,20 @@ const BackgroundContainer = styled.div`
   top: 100%;
   left: 0px;
   width: 100%;
-  height: 200%;
+  height: 100%;
+  max-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%;
+  height: 100%;
+  max-height: 200%;
   top: 100%;
   left: 0;
   right: 0;

diff --git a/packages/twenty-website/src/app/developers/contributors/[slug]/components/ActivityLog.tsx b/packages/twenty-website/src/app/developers/contributors/[slug]/components/ActivityLog.tsx
@@ -2,10 +2,28 @@
 
 import { ResponsiveTimeRange } from '@nivo/calendar';
 
+import { CardContainer } from '@/app/developers/contributors/[slug]/components/CardContainer';
+import { Title } from '@/app/developers/contributors/[slug]/components/Title';
+
 export const ActivityLog = ({
   data,
 }: {
   data: { value: number; day: string }[];
 }) => {
-  return <ResponsiveTimeRange data={data} />;
+  return (
+    <CardContainer>
+      <Title>Activity</Title>
+      <div style={{ width: '100%', height: '214px' }}>
+        <ResponsiveTimeRange
+          data={data}
+          emptyColor="#F4EFFF"
+          colors={['#E9DFFF', '#B28FFE', '#915FFD']}
+          dayBorderWidth={2}
+          dayBorderColor="#ffffff"
+          dayRadius={4}
+          daySpacing={2}
+        />
+      </div>
+    </CardContainer>
+  );
 };
diff --git a/packages/twenty-website/src/app/developers/contributors/[slug]/components/Breadcrumb.tsx b/packages/twenty-website/src/app/developers/contributors/[slug]/components/Breadcrumb.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { Breadcrumbs } from '@/app/components/Breadcrumbs';
+
+const BREADCRUMB_ITEMS = [
+  {
+    uri: '/developers/contributors',
+    label: 'Contributors',
+  },
+];
+
+export const Breadcrumb = ({ active }: { active: string }) => {
+  return (
+    <Breadcrumbs items={BREADCRUMB_ITEMS} activePage={active} separator="/" />
+  );
+};
diff --git a/packages/twenty-website/src/app/developers/contributors/[slug]/components/CardContainer.tsx b/packages/twenty-website/src/app/developers/contributors/[slug]/components/CardContainer.tsx
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const CardContainer = styled.div`
+  border: 3px solid #141414;
+  width: 100%;
+  border-radius: 12px;
+  padding: 40px;
+  display: flex;
+  gap: 32px;
+  flex-direction: column;
+  background-color: #fafafa;
+
+  @media (max-width: 810px) {
+    gap: 16px;
+    padding: 24px;
+  }
+`;