diff --git a/src/assets/images/app-store-badge.png b/src/assets/images/app-store-badge.png new file mode 100644 index 00000000..19e8cbe2 Binary files /dev/null and b/src/assets/images/app-store-badge.png differ diff --git a/src/assets/images/google-play-badge.png b/src/assets/images/google-play-badge.png new file mode 100644 index 00000000..4ca1336d Binary files /dev/null and b/src/assets/images/google-play-badge.png differ diff --git a/src/components/Editorial/Ctas.tsx b/src/components/Editorial/Ctas.tsx index 3df27bbb..516e8e96 100644 --- a/src/components/Editorial/Ctas.tsx +++ b/src/components/Editorial/Ctas.tsx @@ -2,6 +2,9 @@ import Button, { type ButtonProps } from '@mui/material/Button'; import Stack from '@mui/material/Stack'; import { isValidElement } from 'react'; import { type CommonProps } from 'types/components'; +import appleBadge from '../../assets/images/app-store-badge.png'; +import googleBadge from '../../assets/images/google-play-badge.png'; +import { ThemeProvider, createTheme } from '@mui/material'; interface CtaButtonProps extends Partial { text: string; @@ -9,6 +12,18 @@ interface CtaButtonProps extends Partial { type CtaButton = CtaButtonProps | JSX.Element; +const customTheme = createTheme({ + breakpoints: { + values: { + xs: 0, + sm: 420, + md: 900, + lg: 1200, + xl: 1536, + }, + }, +}); + export interface StoreButtonsProps { hrefGoogle?: string; hrefApple?: string; @@ -41,30 +56,48 @@ export const Ctas = ({ if (storeButtons) { return ( - - {storeButtons.hrefGoogle && ( - - )} - {storeButtons.hrefApple && ( - - )} - + + + {storeButtons.hrefGoogle && ( + + )} + {storeButtons.hrefApple && ( + + )} + + ); }