Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
+import { IconCalendarEvent, IconMailCog } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledCardsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsAccountsSettingsSection = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Section>
+      <H2Title
+        title="Settings"
+        description="Configure your emails and calendar settings."
+      />
+      <StyledCardsContainer>
+        <SettingsNavigationCard
+          Icon={IconMailCog}
+          title="Emails"
+          onClick={() => navigate('/settings/accounts/emails')}
+        >
+          Set email visibility, manage your blocklist and more.
+        </SettingsNavigationCard>
+        <SettingsNavigationCard
+          Icon={IconCalendarEvent}
+          title="Calendar"
+          disabled
+          hasSoonPill
+        >
+          Configure and customize your calendar preferences.
+        </SettingsNavigationCard>
+      </StyledCardsContainer>
+    </Section>
+  );
+};