feat: welcome page title and club banner added

src/features/authorization/components/AccountCreated/AccountCreated.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo, useState } from 'react';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { Box, CardHeader, Divider, Stack, Typography } from '@mui/material';
+import AccountCreatedIcon from '@/assets/account-created.svg';
+import { useTranslation } from 'react-i18next';
+import { Link as RouterLink, useSearchParams } from 'react-router-dom';
+import Link from '@mui/material/Link';
+import { AccountCreatedClubBanner } from './AccountCreatedClubBanner';
+
+type RequestedApplication = 'default' | 'unknown' | 'club';
+
+export const AccountCreated = () => {
+  const { t } = useTranslation('authentication');
+  const [params] = useSearchParams();
+
+  // Checking if there is a requested application and if its club or any other url
+  const requestedApplication = useMemo<RequestedApplication>(() => {
+    const returnUrl = params.get('returnUrl');
+
+    if (!returnUrl) return 'default';
+
+    if (returnUrl.includes('https://club.business-harmony.com/')) {
+      return 'club';
+    }
+
+    return 'unknown';
+  }, [params]);
+
+  return (
+    <AuthenticationCard maxWidth="636px">
+      <Stack sx={{ alignItems: 'center' }}>
+        <img src={AccountCreatedIcon} />
+
+        <Typography variant="h5" sx={{ mt: 2 }}>
+          {t('accountCreated.yourHarmonyAccountHasBeenSuccessfullyCreated')}
+        </Typography>
+
+        <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
+          {t('accountCreated.yourAccountInformationCanBeChangedThrough')}
+
+          <Link component={RouterLink} to="/setting/profile" underline="always">
+            {t('accountCreated.accountSettings')}
+          </Link>
+
+          {t('accountCreated.yourAccountInformationCanBeChangedThroughEnd')}
+        </Typography>
+      </Stack>
+
+      {requestedApplication !== 'default' && (
+        <Box sx={{ mx: 7 }}>
+          <Divider sx={{ my: 2 }} />
+
+          {requestedApplication === 'club' && <AccountCreatedClubBanner />}
+        </Box>
+      )}
+    </AuthenticationCard>
+  );
+};

src/features/authorization/components/AccountCreated/AccountCreatedClubBanner.tsx

@@ -0,0 +1,25 @@
+import { Stack, Typography, useTheme } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Box, Profile2User } from 'iconsax-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const AccountCreatedClubBanner = () => {
+  const { t } = useTranslation('authentication');
+  const theme = useTheme();
+
+  return (
+    <Stack direction="row" sx={{ py: 2.5 }} spacing={2} alignItems="start">
+      <Profile2User size={80} color={theme.palette.club.main} />
+
+      <Stack spacing={0.5}>
+        <Typography variant="h6">{t('accountCreated.harmonyClub')}</Typography>
+        <Typography variant="body2">
+          {t(
+            'accountCreated.encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints',
+          )}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+};

src/features/authorization/components/AuthenticationCard.tsx

@@ -1,8 +1,15 @@
 import { Paper } from '@mui/material';
 import { type PropsWithChildren } from 'react';
 
+export interface AuthenticationCardProps extends PropsWithChildren {
+  maxWidth?: string;
+}
+
 // Beacuse in the otp verify there is a element outside of the authentication card
-export const AuthenticationCard = ({ children }: PropsWithChildren) => {
+export const AuthenticationCard = ({
+  children,
+  maxWidth,
+}: AuthenticationCardProps) => {
   return (
     <Paper
       elevation={0}
@@ -14,7 +21,7 @@ export const AuthenticationCard = ({ children }: PropsWithChildren) => {
         },
         marginInline: 2,
         width: (t) => `calc(100% - ${t.spacing(2)})`,
-        maxWidth: '552px',
+        maxWidth: maxWidth ?? '552px',
       }}
     >
       {children}

src/features/authorization/routes/AccountCreatedPage.tsx

@@ -0,0 +1,20 @@
+import { FlexBox } from '@/components/common/FlexBox';
+import Logo from '@/components/Logo';
+import { AccountCreated } from '../components/AccountCreated/AccountCreated';
+
+export const AccountCreatedPage = () => {
+  return (
+    <FlexBox
+      direction="column"
+      align="center"
+      justify="center"
+      sx={{
+        minHeight: '100vh',
+        gap: 3,
+      }}
+    >
+      <Logo />
+      <AccountCreated />
+    </FlexBox>
+  );
+};