WIP: New User Guide

packages/twenty-website/src/app/components/Breadcrumbs.tsx

@@ -1,16 +1,25 @@
+'use client';
+
 import React from 'react';
 import styled from '@emotion/styled';
+import { IconChevronLeft } from '@tabler/icons-react';
 import Link from 'next/link';
 
+import { Theme } from '@/app/ui/theme/theme';
+import { DeviceType, useDeviceType } from '@/app/ui/utilities/useDeviceType';
+
 const Container = styled.div`
   display: flex;
-  gap: 8px;
+  gap: ${Theme.spacing(2)};
   color: #b3b3b3;
 `;
 
 const InternalLinkItem = styled(Link)`
   text-decoration: none;
   color: #b3b3b3;
+  &:hover {
+    color: ${Theme.text.color.quarternary};
+  }
 `;
 
 const ExternalLinkItem = styled.a`
@@ -19,7 +28,26 @@ const ExternalLinkItem = styled.a`
 `;
 
 const ActivePage = styled.span`
-  color: #818181;
+  color: ${Theme.text.color.secondary};
+  font-weight: ${Theme.font.weight.medium};
+`;
+
+const StyledSection = styled.div`
+  font-size: ${Theme.font.size.sm};
+  font-weight: ${Theme.font.weight.medium};
+  color: ${Theme.text.color.quarternary};
+  display: flex;
+  flex-direction: row;
+  gap: ${Theme.spacing(2)};
+`;
+
+const StyledMobileContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${Theme.spacing(1)};
+  color: ${Theme.text.color.quarternary};
+  font-size: ${Theme.font.size.sm};
 `;
 
 interface BreadcrumbsProps {
@@ -37,17 +65,29 @@ export const Breadcrumbs = ({
   activePage,
   separator,
 }: BreadcrumbsProps) => {
+  const isMobile = useDeviceType() === DeviceType.MOBILE;
+  if (isMobile) {
+    const lastItem = items[items.length - 1];
+    return (
+      <StyledMobileContainer>
+        <IconChevronLeft size={Theme.icon.size.md} />
+        <InternalLinkItem href={lastItem.uri}>
+          {lastItem.label}
+        </InternalLinkItem>
+      </StyledMobileContainer>
+    );
+  }
   return (
     <Container>
       {items.map((item, index) => (
-        <React.Fragment key={`${item?.uri ?? 'item'}-${index}`}>
+        <StyledSection 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>
+          <div>{separator}</div>
+        </StyledSection>
       ))}
       <ActivePage>{activePage}</ActivePage>
     </Container>

packages/twenty-website/src/app/components/user-guide/UserGuideCard.tsx

@@ -0,0 +1,48 @@
+'use client';
+import styled from '@emotion/styled';
+import { useRouter } from 'next/navigation';
+
+import { Theme } from '@/app/ui/theme/theme';
+import { UserGuideHomeCardsType } from '@/app/user-guide/constants/UserGuideHomeCards';
+
+const StyledContainer = styled.div`
+  color: ${Theme.border.color.plain};
+  border: 2px solid ${Theme.border.color.plain};
+  border-radius: ${Theme.border.radius.md};
+  padding: ${Theme.spacing(6)};
+  gap: ${Theme.spacing(4)};
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  width: 348px;
+`;
+
+const StyledHeading = styled.div`
+  font-size: ${Theme.font.size.lg};
+  color: ${Theme.text.color.primary};
+`;
+
+const StyledSubHeading = styled.div`
+  font-size: ${Theme.font.size.sm};
+  color: ${Theme.text.color.secondary};
+  font-family: ${Theme.font.family};
+`;
+
+const StyledImage = styled.img`
+  width: 300px;
+`;
+
+export default function UserGuideCard({
+  card,
+}: {
+  card: UserGuideHomeCardsType;
+}) {
+  const router = useRouter();
+  return (
+    <StyledContainer onClick={() => router.push(`/user-guide/${card.url}`)}>
+      <StyledImage src={card.image} alt={card.title} />
+      <StyledHeading>{card.title}</StyledHeading>
+      <StyledSubHeading>{card.subtitle}</StyledSubHeading>
+    </StyledContainer>
+  );
+}

packages/twenty-website/src/app/components/user-guide/UserGuideContent.tsx

@@ -0,0 +1,106 @@
+'use client';
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Breadcrumbs } from '@/app/components/Breadcrumbs';
+import { FileContent } from '@/app/get-posts';
+import { Theme } from '@/app/ui/theme/theme';
+import { DeviceType, useDeviceType } from '@/app/ui/utilities/useDeviceType';
+
+const StyledContainer = styled.div<{ devicetype: string }>`
+  width: ${({ devicetype }) =>
+    devicetype === DeviceType.TABLET
+      ? '70%'
+      : devicetype === DeviceType.DESKTOP
+        ? '60%'
+        : '100%'};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  font-family: ${Theme.font.family};
+  border-bottom: 1px solid ${Theme.background.transparent.medium};
+`;
+
+const StyledWrapper = styled.div`
+  width: 79.3%;
+  padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)} 0px;
+`;
+
+const StyledHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Theme.spacing(8)};
+`;
+
+const StyledHeading = styled.div`
+  font-size: 40px;
+  font-weight: 700;
+`;
+
+const StyledHeaderInfoSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Theme.spacing(4)};
+`;
+
+const StyledHeaderInfoSectionTitle = styled.div`
+  font-size: ${Theme.font.size.sm};
+  padding: ${Theme.spacing(2)} 0px;
+  color: ${Theme.text.color.secondary};
+  font-weight: ${Theme.font.weight.medium};
+`;
+
+const StyledHeaderInfoSectionSub = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Theme.spacing(4)};
+  color: ${Theme.text.color.tertiary};
+  font-family: ${Theme.font.family};
+`;
+
+const StyledRectangle = styled.div`
+  width: 100%;
+  height: 1px;
+  background: ${Theme.background.transparent.medium};
+`;
+
+export default function UserGuideContent({ item }: { item: FileContent }) {
+  const BREADCRUMB_ITEMS = [
+    {
+      uri: '/user-guide',
+      label: 'User Guide',
+    },
+  ];
+  const deviceType = useDeviceType();
+  return (
+    <StyledContainer devicetype={deviceType}>
+      <StyledWrapper>
+        <StyledHeader>
+          <Breadcrumbs
+            items={BREADCRUMB_ITEMS}
+            activePage={item.itemInfo.title}
+            separator="/"
+          />
+          <StyledHeading>{item.itemInfo.title}</StyledHeading>
+          {item.itemInfo.image && (
+            <img
+              id={`img-${item.itemInfo.title}`}
+              src={item.itemInfo.image}
+              alt={item.itemInfo.title}
+            />
+          )}
+          <StyledHeaderInfoSection>
+            <StyledHeaderInfoSectionTitle>
+              In this article
+            </StyledHeaderInfoSectionTitle>
+            <StyledHeaderInfoSectionSub>
+              {item.itemInfo.info}
+            </StyledHeaderInfoSectionSub>
+          </StyledHeaderInfoSection>
+          <StyledRectangle />
+        </StyledHeader>
+        <div>{item.content}</div>
+      </StyledWrapper>
+    </StyledContainer>
+  );
+}

packages/twenty-website/src/app/components/user-guide/UserGuideMain.tsx

@@ -0,0 +1,90 @@
+'use client';
+import styled from '@emotion/styled';
+
+import UserGuideCard from '@/app/components/user-guide/UserGuideCard';
+import { Theme } from '@/app/ui/theme/theme';
+import { DeviceType, useDeviceType } from '@/app/ui/utilities/useDeviceType';
+import { UserGuideHomeCards } from '@/app/user-guide/constants/UserGuideHomeCards';
+
+const StyledContainer = styled.div<{ isMobile: boolean }>`
+  width: ${({ isMobile }) => (isMobile ? '100%' : '60%')};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const StyledWrapper = styled.div`
+  width: 79.3%;
+  padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)} 0px;
+  display: flex;
+  flex-direction: column;
+  gap: ${Theme.spacing(8)};
+`;
+
+const StyledHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+`;
+
+const StyledHeading = styled.h1`
+  line-height: 38px;
+  font-weight: 700;
+  font-size: 38px;
+  color: ${Theme.text.color.primary};
+  margin: 0px;
+`;
+
+const StyledSubHeading = styled.h1`
+  line-height: 12px;
+  font-family: ${Theme.font.family};
+  font-size: ${Theme.font.size.sm};
+  font-weight: ${Theme.font.weight.regular};
+  color: ${Theme.text.color.tertiary};
+`;
+
+const StyledContentGrid = styled.div`
+  width: 100%;
+  padding-top: ${Theme.spacing(6)};
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: auto auto;
+  gap: ${Theme.spacing(6)};
+`;
+
+const StyledContentFlex = styled.div`
+  width: 100%;
+  padding-top: ${Theme.spacing(6)};
+  display: flex;
+  flex-direction: column;
+  gap: ${Theme.spacing(6)};
+`;
+
+export default function UserGuideMain() {
+  const deviceType = useDeviceType();
+  return (
+    <StyledContainer isMobile={deviceType === DeviceType.MOBILE}>
+      <StyledWrapper>
+        <StyledHeader>
+          <StyledHeading>User Guide</StyledHeading>
+          <StyledSubHeading>
+            A brief guide to grasp the basics of Twenty
+          </StyledSubHeading>
+        </StyledHeader>
+        {deviceType === DeviceType.DESKTOP ? (
+          <StyledContentGrid>
+            {UserGuideHomeCards.map((card) => {
+              return <UserGuideCard key={card.title} card={card} />;
+            })}
+          </StyledContentGrid>
+        ) : (
+          <StyledContentFlex>
+            {UserGuideHomeCards.map((card) => {
+              return <UserGuideCard key={card.title} card={card} />;
+            })}
+          </StyledContentFlex>
+        )}
+      </StyledWrapper>
+    </StyledContainer>
+  );
+}