New folder structure for website (#4159)

New folder structure

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

@@ -0,0 +1,109 @@
+'use client';
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {
+  DeviceType,
+  useDeviceType,
+} from '@/app/_components/client-utils/useDeviceType';
+import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
+import { Theme } from '@/app/_components/ui/theme/theme';
+import { FileContent } from '@/app/_server-utils/get-posts';
+
+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>
+  );
+}