feat: add Settings/Accounts/New section with empty state

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

@@ -20,7 +20,13 @@ const StyledBody = styled(CardContent)`
   justify-content: center;
 `;
 
-export const SettingsAccountsEmptyStateCard = () => {
+type SettingsAccountsEmptyStateCardProps = {
+  label?: string;
+};
+
+export const SettingsAccountsEmptyStateCard = ({
+  label,
+}: SettingsAccountsEmptyStateCardProps) => {
   const [generateTransientToken] = useGenerateTransientTokenMutation();
 
   const handleGmailLogin = useCallback(async () => {
@@ -36,7 +42,7 @@ export const SettingsAccountsEmptyStateCard = () => {
 
   return (
     <Card>
-      <StyledHeader>No connected account</StyledHeader>
+      <StyledHeader>{label || 'No connected account'}</StyledHeader>
       <StyledBody>
         <Button
           Icon={IconGoogle}

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

@@ -0,0 +1,15 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+
+export const SettingsNewAccountSection = () => {
+  return (
+    <Section>
+      <H2Title
+        title="New account"
+        description="Connect a new account to your workspace"
+      />
+      <SettingsAccountsEmptyStateCard label="Connect a Google account" />
+    </Section>
+  );
+};

packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx

@@ -1,3 +1,4 @@
+import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -13,6 +14,7 @@ export const SettingsNewAccount = () => {
             { children: `New` },
           ]}
         />
+        <SettingsNewAccountSection />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );