From 558ca3f296f34113da0a081153f4ead7be08353c Mon Sep 17 00:00:00 2001 From: Ani Date: Sun, 16 Apr 2023 18:05:02 +0300 Subject: [PATCH] Apply the new Homepage design - Active Campaigns section and Completed Camapigns sections (#1401) * Update Homepage design - initial changes * Extract ActiveCampaigns component * Arrange CampaignCard's grid * Update ActiveCampaigns section UI * Finalize ActiveCamapigns section fot desktop * Finalize ActiveCampaigns section for mobile and tablet * Update responsive styles for ActiveCamapigns section * Rearrange ActiveCampaigns, create CompletedCampaigns * Implement Completed campaigns carousel - initial changes * Update completed campaigns caroucel * Fix build error * Fix build error * Update styles * rearrange files * Update styles * Add see all button, add linkt to campaign cards * Update inlined values * Remove unnecessary props * Add type to event handler * Add new color in theme * Remove unnecessary comment * Remove unused dependency * Revert dependency changes * Update dependencies --------- Co-authored-by: ani-kalpachka --- package.json | 1 + public/locales/bg/campaigns.json | 1 + public/locales/bg/index.json | 7 +- public/locales/en/campaigns.json | 1 + public/locales/en/index.json | 7 +- src/common/theme.ts | 413 +++++++++--------- .../client/index/IndexPage.styled.tsx | 63 +-- src/components/client/index/IndexPage.tsx | 16 +- .../ActiveCampaignCard.styled.tsx | 34 ++ .../ActiveCampaignCard/ActiveCampaignCard.tsx | 59 +++ .../ActiveCampaignsSection.styled.tsx | 42 ++ .../ActiveCampaignsSection.tsx | 42 ++ .../CampaignsSection.styled.tsx | 28 -- .../CampaignsSection/CampaignsSection.tsx | 43 -- .../CompletedCampaignsSection.styled.tsx | 58 +++ .../CompletedCampaignsSection.tsx | 68 +++ .../helpers/CaroucelSettings.tsx | 33 ++ .../sections/Jumbotron/Jumbotron.styled.tsx | 70 --- .../index/sections/Jumbotron/Jumbotron.tsx | 34 -- yarn.lock | 333 ++++++++++++++ 20 files changed, 924 insertions(+), 429 deletions(-) create mode 100644 src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx create mode 100644 src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx create mode 100644 src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx create mode 100644 src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx delete mode 100644 src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx delete mode 100644 src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx delete mode 100644 src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx delete mode 100644 src/components/client/index/sections/Jumbotron/Jumbotron.tsx diff --git a/package.json b/package.json index b31911151..c21f29062 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-dom": "18.2.0", "react-gtm-module": "2.0.11", "react-i18next": "^11.17.1", + "react-material-ui-carousel": "^3.4.2", "react-quill": "^2.0.0-beta.4", "react-slick": "^0.29.0", "sharp": "^0.30.5", diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index c7afe5d7e..1ce58d879 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -1,4 +1,5 @@ { + "completed-campaigns": "Завършили кампании", "of": "от", "subtitle": "Помогнете на нуждаещ се", "form-heading": "Предложете нова кампания", diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json index 6042c847e..2fc22b94d 100644 --- a/public/locales/bg/index.json +++ b/public/locales/bg/index.json @@ -1,7 +1,5 @@ { - "podkrepi": "Подкрепи.бг", - "title": "прозрачна онлайн дарителска платформа", - "title2": "Подкрепи.бг - прозрачна онлайн дарителска платформа", + "title": "Подкрепи.бг - прозрачна онлайн дарителска платформа", "metaDescription": "Подкрепи.бг е прозрачна и безплатна онлайн дарителска платформа, създадена от доброволния труд на членовете на сдружение Подкрепи БГ.", "activity-section": { "heading": "Какво правим?", @@ -30,8 +28,7 @@ "goals-text-open-source": "- Да създадем open-source платформа, което намалява шансовете за злоупотреба." }, "campaign": { - "see-all": "Вижте всички", - "urgent-campaigns": "Спешни кампании" + "see-all": "Вижте всички" }, "how-we-work": { "heading": "Как работи Подкрепи.бг?", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index 591e065b0..d2246deec 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -1,4 +1,5 @@ { + "completed-campaigns": "Completed campaign", "of": "of", "subtitle": "Help a person in need", "form-heading": "Create new campaign", diff --git a/public/locales/en/index.json b/public/locales/en/index.json index 8af2f279d..10233434d 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -1,7 +1,5 @@ { - "podkrepi": "Podkrepi.bg", - "title": "a transparent online donation platform", - "title2": "Podkrepi.bg - a transparent online donation platform", + "title": "Podkrepi.bg - a transparent online donation platform", "metaDescription": "Podkrepi.bg is a transparent online donation platform created by a team of volunteers from the Podkrepi BG organization.", "activity-section": { "heading": "What do we do?", @@ -30,8 +28,7 @@ "goals-text-open-source": "- To create an open-source platform which reduces the chances of misuse." }, "campaign": { - "see-all": "See all", - "urgent-campaigns": "Urgent campaigns" + "see-all": "See all" }, "how-we-work": { "heading": "How does Pordkprepi.bg work?", diff --git a/src/common/theme.ts b/src/common/theme.ts index a248ac851..aabbdb2c6 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -1,206 +1,207 @@ -import { - createTheme, - darken, - lighten, - responsiveFontSizes, - Theme, - ThemeOptions, -} from '@mui/material/styles' - -import { Montserrat } from '@next/font/google' - -export const montserrat = Montserrat({ - display: 'auto', - subsets: ['latin', 'cyrillic'], -}) - -// Instead of exporting `colors` variable use theme: -// import theme from 'common/theme' -// -const colors = { - blue: { - light: '#4AC3FF', - main: '#32A9FE', - mainDark: darken('#32A9FE', 0.2), - dark: '#294E85', - }, - yellow: { - main: '#FFCB57', - dark: '#F6992B', - }, - gray: { - main: '#F5F5F5', - background: '#FAFAFA', - }, - white: { - main: '#ffffff', - }, -} - -const borders = { - dark: colors.blue.dark, - light: colors.blue.main, - round: '60px', - semiRound: '20px', -} - -export const themeOptions: ThemeOptions = { - palette: { - mode: 'light', - primary: { - light: colors.blue.light, - main: colors.blue.main, - dark: colors.blue.dark, - }, - secondary: { - main: colors.yellow.main, - light: colors.gray.main, - }, - background: { - default: colors.white.main, - }, - info: { - main: colors.blue.dark, - light: colors.blue.mainDark, - dark: darken(colors.blue.dark, 0.2), - }, - }, - shape: { - borderRadius: 3, - }, - components: { - MuiLink: { - defaultProps: { - underline: 'none', - }, - }, - MuiButton: { - defaultProps: { - disableElevation: true, - }, - styleOverrides: { - root: { - lineHeight: 2, - borderRadius: '25px', - borderWidth: 2, - '&:hover': { - borderWidth: 2, - }, - }, - textPrimary: { - color: colors.blue.dark, - '&:hover': { - color: colors.blue.mainDark, - }, - }, - outlined: { - backgroundColor: colors.white.main, - }, - outlinedPrimary: { - color: colors.blue.dark, - '&:hover': { - backgroundColor: lighten(colors.blue.main, 0.85), - }, - }, - outlinedSecondary: { - color: darken(colors.yellow.dark, 0.4), - borderColor: colors.yellow.main, - '&:hover': { - backgroundColor: lighten(colors.yellow.main, 0.85), - borderColor: darken(colors.yellow.main, 0.15), - }, - }, - containedPrimary: { - backgroundColor: colors.blue.main, - '&:hover': { - backgroundColor: darken(colors.blue.main, 0.15), - }, - }, - containedSecondary: { - backgroundColor: colors.yellow.main, - '&:hover': { - backgroundColor: darken(colors.yellow.main, 0.15), - }, - }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - fontSize: '1rem', - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiFilledInput: { - styleOverrides: { - root: { - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: { - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiInputLabel: { - styleOverrides: { - root: { - fontSize: '1rem', - }, - }, - }, - MuiAppBar: { - styleOverrides: { - root: { - paddingLeft: 15, - paddingRight: 15, - }, - }, - }, - - MuiMenuItem: { - defaultProps: { - sx: { py: 1.5 }, - }, - }, - }, - - typography: { - fontFamily: montserrat.style.fontFamily, - h3: { color: colors.blue.dark }, - - body1: { - fontSize: '0.875rem', - lineHeight: '1.43', - letterSpacing: '0.01071em', - }, - button: { textTransform: 'initial' }, - }, -} -// https://material-ui.com/customization/default-theme/#default-theme -const theme: Theme = createTheme(themeOptions) -const materialTheme = responsiveFontSizes(theme) -const podkrepiTheme = { - borders, - ...materialTheme, -} - -export default podkrepiTheme +import { + createTheme, + darken, + lighten, + responsiveFontSizes, + Theme, + ThemeOptions, +} from '@mui/material/styles' + +import { Montserrat } from '@next/font/google' + +export const montserrat = Montserrat({ + display: 'auto', + subsets: ['latin', 'cyrillic'], +}) + +const colors = { + blue: { + light: '#4AC3FF', + main: '#32A9FE', + mainDark: darken('#32A9FE', 0.2), + dark: '#294E85', + skyBlue: '#B0E5FF', + }, + yellow: { + main: '#FFCB57', + dark: '#F6992B', + }, + gray: { + main: '#F5F5F5', + background: '#FAFAFA', + }, + white: { + main: '#ffffff', + }, +} + +const borders = { + dark: colors.blue.dark, + light: colors.blue.main, + round: '60px', + semiRound: '20px', +} + +export const themeOptions: ThemeOptions = { + palette: { + mode: 'light', + primary: { + light: colors.blue.light, + main: colors.blue.main, + dark: colors.blue.dark, + }, + secondary: { + main: colors.yellow.main, + light: colors.gray.main, + }, + background: { + default: colors.white.main, + }, + info: { + main: colors.blue.dark, + light: colors.blue.mainDark, + dark: darken(colors.blue.dark, 0.2), + }, + text: { + primary: colors.blue.skyBlue, + }, + }, + shape: { + borderRadius: 3, + }, + components: { + MuiLink: { + defaultProps: { + underline: 'none', + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: { + root: { + lineHeight: 2, + borderRadius: '25px', + borderWidth: 2, + '&:hover': { + borderWidth: 2, + }, + }, + textPrimary: { + color: colors.blue.dark, + '&:hover': { + color: colors.blue.mainDark, + }, + }, + outlined: { + backgroundColor: colors.white.main, + }, + outlinedPrimary: { + color: colors.blue.dark, + '&:hover': { + backgroundColor: lighten(colors.blue.main, 0.85), + }, + }, + outlinedSecondary: { + color: darken(colors.yellow.dark, 0.4), + borderColor: colors.yellow.main, + '&:hover': { + backgroundColor: lighten(colors.yellow.main, 0.85), + borderColor: darken(colors.yellow.main, 0.15), + }, + }, + containedPrimary: { + backgroundColor: colors.blue.main, + '&:hover': { + backgroundColor: darken(colors.blue.main, 0.15), + }, + }, + containedSecondary: { + backgroundColor: colors.yellow.main, + '&:hover': { + backgroundColor: darken(colors.yellow.main, 0.15), + }, + }, + }, + }, + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + fontSize: '1rem', + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + fontSize: '1rem', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + paddingLeft: 15, + paddingRight: 15, + }, + }, + }, + + MuiMenuItem: { + defaultProps: { + sx: { py: 1.5 }, + }, + }, + }, + + typography: { + fontFamily: montserrat.style.fontFamily, + h3: { color: colors.blue.dark }, + + body1: { + fontSize: '0.875rem', + lineHeight: '1.43', + letterSpacing: '0.01071em', + }, + button: { textTransform: 'initial' }, + }, +} + +const theme: Theme = createTheme(themeOptions) +const materialTheme = responsiveFontSizes(theme) +const podkrepiTheme = { + borders, + ...materialTheme, +} + +export default podkrepiTheme diff --git a/src/components/client/index/IndexPage.styled.tsx b/src/components/client/index/IndexPage.styled.tsx index 4f2321994..d600020db 100644 --- a/src/components/client/index/IndexPage.styled.tsx +++ b/src/components/client/index/IndexPage.styled.tsx @@ -1,30 +1,33 @@ -import { Typography } from '@mui/material' -import { styled } from '@mui/material/styles' - -import theme from 'common/theme' -import LinkButton from 'components/common/LinkButton' - -export const Heading = styled(Typography)(() => ({ - color: theme.palette.primary.dark, - textAlign: 'center', - fontWeight: 500, - marginBottom: theme.spacing(6), -})) - -export const InfoText = styled(Typography)(() => ({ - display: 'inline-block', - textAlign: 'center', - fontSize: theme.typography.pxToRem(16), - lineHeight: theme.spacing(3), - paddingBottom: theme.spacing(6), -})) - -export const OutlinedButton = styled(LinkButton)(() => ({ - marginTop: theme.spacing(6), - fontWeight: 'bold', - color: theme.palette.common.black, - - [theme.breakpoints.up('sm')]: { - minWidth: theme.spacing(35), - }, -})) +import { Typography } from '@mui/material' +import { styled } from '@mui/material/styles' + +import theme from 'common/theme' +import LinkButton from 'components/common/LinkButton' + +export const Heading = styled(Typography)(() => ({ + color: theme.palette.primary.dark, + textAlign: 'center', + fontWeight: 500, + marginBottom: theme.spacing(6), + fontFamily: 'Montserrat, sans-serif', + fontSize: theme.typography.pxToRem(35), + letterSpacing: '-1px', +})) + +export const InfoText = styled(Typography)(() => ({ + display: 'inline-block', + textAlign: 'center', + fontSize: theme.typography.pxToRem(16), + lineHeight: theme.spacing(3), + paddingBottom: theme.spacing(6), +})) + +export const OutlinedButton = styled(LinkButton)(() => ({ + marginTop: theme.spacing(6), + fontWeight: 'bold', + color: theme.palette.common.black, + + [theme.breakpoints.up('sm')]: { + minWidth: theme.spacing(35), + }, +})) diff --git a/src/components/client/index/IndexPage.tsx b/src/components/client/index/IndexPage.tsx index 9a87b9342..bcc7aaa10 100644 --- a/src/components/client/index/IndexPage.tsx +++ b/src/components/client/index/IndexPage.tsx @@ -1,24 +1,24 @@ import { useTranslation } from 'next-i18next' + import Layout from 'components/client/layout/Layout' -import Jumbotron from './sections/Jumbotron/Jumbotron' -import CampaignsSection from './sections/CampaignsSection/CampaignsSection' +import ActiveCampaignsSection from './sections/ActiveCampaignsSection/ActiveCampaignsSection' +import CompletedCampaignsSection from './sections/CompletedCampaignsSection/CompletedCampaignsSection' import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection' import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection' import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection' import FaqSection from './sections/FaqSection/FaqSection' export default function IndexPage() { - const { t } = useTranslation() - + const { t } = useTranslation('index') return ( - - + title={t('title')} + metaDescription={t('metaDescription')}> + + diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx new file mode 100644 index 000000000..391175845 --- /dev/null +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -0,0 +1,34 @@ +import { CardContent } from '@mui/material' +import { styled } from '@mui/material/styles' + +import LinkButton from 'components/common/LinkButton' +import theme from 'common/theme' + +export const Content = styled(CardContent)(() => ({ + padding: theme.spacing(0, 1), + position: 'absolute', + width: '100%', + bottom: theme.spacing(2), + + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 3), + }, +})) + +export const CampaignTitle = styled('h6')(() => ({ + height: theme.spacing(5), + margin: theme.spacing(1.8, 1.2), + fontWeight: 700, + fontSize: theme.typography.pxToRem(16), + lineHeight: '150%', + color: theme.palette.secondary.light, + fontFamily: 'Montserrat, sans-serif', +})) + +export const SupportNowButton = styled(LinkButton)(() => ({ + visibility: 'hidden', + fontWeight: 'bold', + fontFamily: 'Montserrat, sans-serif', + + [theme.breakpoints.down('md')]: { visibility: 'visible' }, +})) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx new file mode 100644 index 000000000..65a665895 --- /dev/null +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -0,0 +1,59 @@ +import { useTranslation } from 'next-i18next' +import Link from 'next/link' + +import { CampaignResponse } from 'gql/campaigns' + +import { Favorite } from '@mui/icons-material' +import { CardActionArea, Grid } from '@mui/material' + +import { routes } from 'common/routes' +import theme from 'common/theme' +import { campaignListPictureUrl } from 'common/util/campaignImageUrls' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' + +import { CampaignTitle, Content, SupportNowButton } from './ActiveCampaignCard.styled' + +type Props = { campaign: CampaignResponse; index: number } + +export default function ActiveCampaignCard({ campaign, index }: Props) { + const { t } = useTranslation('campaigns') + const { state: campaignState, allowDonationOnComplete, slug, title } = campaign + const campaignImagesUrl = campaignListPictureUrl(campaign) + + return ( + + + {title} + + }> + {t('cta.support-now')} + + + + + ) +} diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx new file mode 100644 index 000000000..3dee7d116 --- /dev/null +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx @@ -0,0 +1,42 @@ +import { Grid } from '@mui/material' +import { styled } from '@mui/material/styles' + +import theme from 'common/theme' + +export const Root = styled(Grid)(() => ({ + marginTop: theme.spacing(3.875), + display: 'grid', + gridTemplateRows: 'repeat(5, 1fr)', + + 'a:nth-of-type(1)': { + minHeight: theme.spacing(40), + }, + + [theme.breakpoints.up('sm')]: { + gridTemplateColumns: 'repeat(2, 1fr)', + gridTemplateRows: 'repeat(4, 1fr)', + + 'a:nth-of-type(1)': { + minHeight: theme.spacing(61), + gridRowStart: 1, + gridColumnStart: 1, + gridRowEnd: 3, + gridColumnEnd: 3, + }, + }, + + [theme.breakpoints.up('md')]: { + gridTemplateColumns: '1fr 1fr 1fr 1fr', + gridTemplateRows: 'repeat(2, 1fr)', + }, + + [theme.breakpoints.up(2000)]: { + maxWidth: theme.spacing(165), + margin: `${theme.spacing(4)} auto`, + }, +})) + +export const SeeAllButton = styled(Grid)(() => ({ + display: 'flex', + placeContent: 'center', +})) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx new file mode 100644 index 000000000..5b4e6ffbf --- /dev/null +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx @@ -0,0 +1,42 @@ +import { useTranslation } from 'next-i18next' + +import { Grid } from '@mui/material' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' + +import { useCampaignList } from 'common/hooks/campaigns' +import { routes } from 'common/routes' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' +import ActiveCampaignCard from './ActiveCampaignCard/ActiveCampaignCard' + +import { OutlinedButton } from '../../IndexPage.styled' +import { Root, SeeAllButton } from './ActiveCampaignsSection.styled' + +export default function ActiveCampaignsSection() { + const { t } = useTranslation('index') + const { data } = useCampaignList() + const activeCampaigns = data + ?.filter((campaign) => campaign.state === CampaignState.active) + .slice(0, 5) + + if (activeCampaigns === undefined) { + return null + } else { + return ( + + + {activeCampaigns?.map((campaign, index) => ( + + ))} + + + }> + {t('campaign.see-all')} + + + + ) + } +} diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx deleted file mode 100644 index 956a94201..000000000 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Typography } from '@mui/material' -import { styled } from '@mui/material/styles' - -import theme from 'common/theme' - -export const Root = styled('section')(() => ({ - margin: theme.spacing(7, 3, 0, 3), - - [theme.breakpoints.up('sm')]: { - margin: theme.spacing(12, 4, 0, 4), - }, - - [theme.breakpoints.up(2000)]: { - maxWidth: theme.spacing(165), - margin: `${theme.spacing(4)} auto`, - }, -})) - -export const UrgentCampaignsHeading = styled(Typography)(() => ({ - marginBottom: theme.spacing(6), - color: theme.palette.common.black, - textAlign: 'center', - fontWeight: 500, - - [theme.breakpoints.up('lg')]: { - fontSize: theme.typography.pxToRem(48), - }, -})) diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx deleted file mode 100644 index 6c9adbc45..000000000 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useTranslation } from 'next-i18next' - -import { Grid, Box } from '@mui/material' -import ChevronRightIcon from '@mui/icons-material/ChevronRight' -import CampaignCard from 'components/client/campaigns/CampaignCard' -import { useCampaignList } from 'common/hooks/campaigns' -import { routes } from 'common/routes' - -import { OutlinedButton } from '../../IndexPage.styled' -import { Root, UrgentCampaignsHeading } from './CampaignsSection.styled' - -export default function CampaignsSection() { - const { data } = useCampaignList() - const { t } = useTranslation('index') - if (data === undefined) { - return null - } else { - return ( - - - {t('campaign.urgent-campaigns')} - - - {data?.slice(0, 12).map((campaign, index) => ( - - - - - - ))} - - - }> - {t('campaign.see-all')} - - - - ) - } -} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx new file mode 100644 index 000000000..41c2dc0b3 --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx @@ -0,0 +1,58 @@ +import Slider from 'react-slick' + +import styled from '@emotion/styled' + +import theme from 'common/theme' +import { Typography, Link } from '@mui/material' + +export const CarouselWrapper = styled(Slider)(() => ({ + margin: '0 auto', + maxWidth: theme.spacing(162), +})) + +export const CompletedCampaignLink = styled(Link)(() => ({ + height: theme.spacing(37.5), + backgroundSize: 'cover', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + + '&:hover': { + opacity: 0.9, + }, +})) + +export const CampaignTitle = styled('h6')(() => ({ + height: theme.spacing(5), + margin: theme.spacing(1.8, 1.25), + fontWeight: 700, + fontSize: theme.typography.pxToRem(16), + lineHeight: '150%', + color: theme.palette.secondary.light, +})) + +export const ReachedMoneyWrapper = styled(Typography)(() => ({ + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(0.5, 0, 0, 1), + minWidth: theme.spacing(12.5), + minHeight: theme.spacing(7.5), + background: '#323232', + borderRadius: theme.spacing(0, 0, 0, 2), + color: theme.palette.text.primary, + marginLeft: 'auto', + fontFamily: 'Montserrat, sans-serif', + fontSize: theme.typography.pxToRem(17), +})) + +export const ReachedMoney = styled(Typography)(() => ({ + fontWeight: 700, + fontSize: theme.typography.pxToRem(17), +})) + +export const ReachedText = styled(Typography)(() => ({ + color: theme.palette.common.white, + fontFamily: 'Lato, sans-serif', + fontWeight: 700, + fontSize: theme.typography.pxToRem(17), +})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx new file mode 100644 index 000000000..82f5cd7ab --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -0,0 +1,68 @@ +import { useTranslation } from 'next-i18next' +import { CampaignResponse } from 'gql/campaigns' + +import 'slick-carousel/slick/slick-theme.css' +import 'slick-carousel/slick/slick.css' +import { Grid } from '@mui/material' + +import { useCampaignList } from 'common/hooks/campaigns' +import { campaignListPictureUrl } from 'common/util/campaignImageUrls' +import theme from 'common/theme' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' +import { routes } from 'common/routes' +import { settings } from './helpers/CaroucelSettings' + +import { Heading } from '../../IndexPage.styled' +import { + CarouselWrapper, + ReachedMoney, + ReachedText, + CampaignTitle, + ReachedMoneyWrapper, + CompletedCampaignLink, +} from './CompletedCampaignsSection.styled' + +export default function CompletedCampaignsSection() { + const { t } = useTranslation('campaigns') + const { data } = useCampaignList() + + const completedCampaigns = data?.filter( + (campaign: CampaignResponse) => campaign.state === CampaignState.complete, + ) + + const onLinkMouseDown = (e: React.ChangeEvent) => { + e.preventDefault() + } + + return ( + + + {t('completed-campaigns')} + + + {completedCampaigns?.map((campaign, index) => ( + + + + + {campaign.summary.reachedAmount} {t('donations.lv')} + + {t('campaign.reached')} + + {campaign.title} + + + ))} + + + ) +} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx b/src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx new file mode 100644 index 000000000..02a90a895 --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx @@ -0,0 +1,33 @@ +import { Settings } from 'react-slick' + +export const settings: Settings = { + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + dots: true, + lazyLoad: 'ondemand', + autoplay: true, + autoplaySpeed: 2000, + + responsive: [ + { + breakpoint: 1230, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 800, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 500, + settings: { + slidesToShow: 1, + }, + }, + ], +} diff --git a/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx b/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx deleted file mode 100644 index 203ef49d1..000000000 --- a/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Grid } from '@mui/material' -import { styled } from '@mui/material/styles' - -import LinkButton from 'components/common/LinkButton' -import theme from 'common/theme' - -const bannerSource = '/img/family.jpg' - -export const Root = styled('section')(() => ({ - backgroundImage: `url(${bannerSource})`, - height: theme.spacing(49.375), - padding: theme.spacing(6.25, 1), - margin: theme.spacing(4, 0, 8, 0), - backgroundPosition: '75%', - backgroundSize: 'cover', - backgroundRepeat: 'no-repeat', - - [theme.breakpoints.up('sm')]: { - margin: theme.spacing(4, 0, 12, 0), - }, - - [theme.breakpoints.up('md')]: { - marginTop: theme.spacing(7), - }, -})) - -export const JumbotronWrapper = styled(Grid)(() => ({ - textAlign: 'left', - - [theme.breakpoints.up('md')]: { - paddingLeft: theme.spacing(11), - }, -})) - -export const MainTitle = styled('h1')(() => ({ - color: theme.palette.common.white, - fontWeight: 500, - marginTop: 0, - marginBottom: theme.spacing(4), - fontSize: theme.typography.pxToRem(30), - maxWidth: theme.spacing(56), - - [theme.breakpoints.up('md')]: { - fontSize: theme.typography.pxToRem(32), - }, - - [theme.breakpoints.up('lg')]: { - fontSize: theme.typography.pxToRem(42), - maxWidth: theme.spacing(73), - }, -})) - -export const DonateButton = styled(LinkButton)(() => ({ - fontWeight: 600, - borderRadius: theme.borders.round, - backgroundColor: theme.palette.primary.light, - minWidth: theme.spacing(25), - - '&:hover': { - backgroundColor: theme.palette.primary.main, - }, - - [theme.breakpoints.up('md')]: { - fontSize: theme.typography.pxToRem(22), - }, - - [theme.breakpoints.up('md')]: { - minWidth: theme.spacing(40), - }, -})) diff --git a/src/components/client/index/sections/Jumbotron/Jumbotron.tsx b/src/components/client/index/sections/Jumbotron/Jumbotron.tsx deleted file mode 100644 index 24d002b05..000000000 --- a/src/components/client/index/sections/Jumbotron/Jumbotron.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' - -import { useTranslation } from 'next-i18next' - -import { Container } from '@mui/material' - -import { routes } from 'common/routes' - -import { Root, JumbotronWrapper, MainTitle, DonateButton } from './Jumbotron.styled' - -export default function Jumbotron() { - const { t } = useTranslation() - - return ( - - - - - {t('index:podkrepi')} - -
- {t('index:title')} - - - {t('common:nav.donate')} - - - - - ) -} diff --git a/yarn.lock b/yarn.lock index 2821bbd65..a04a4612d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -405,6 +405,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.21.0": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3": version: 7.20.7 resolution: "@babel/template@npm:7.20.7" @@ -554,6 +563,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.10.6": + version: 11.10.6 + resolution: "@emotion/babel-plugin@npm:11.10.6" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/serialize": ^1.1.1 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.1.3 + checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421 + languageName: node + linkType: hard + "@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.7.1": version: 11.10.5 resolution: "@emotion/cache@npm:11.10.5" @@ -574,6 +602,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^0.8.2": + version: 0.8.8 + resolution: "@emotion/is-prop-valid@npm:0.8.8" + dependencies: + "@emotion/memoize": 0.7.4 + checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -583,6 +620,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:0.7.4": + version: 0.7.4 + resolution: "@emotion/memoize@npm:0.7.4" + checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -590,6 +634,27 @@ __metadata: languageName: node linkType: hard +"@emotion/react@npm:^11.7.1": + version: 11.10.6 + resolution: "@emotion/react@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/cache": ^11.10.5 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019 + languageName: node + linkType: hard + "@emotion/react@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/react@npm:11.10.5" @@ -651,6 +716,26 @@ __metadata: languageName: node linkType: hard +"@emotion/styled@npm:^11.6.0": + version: 11.10.6 + resolution: "@emotion/styled@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/is-prop-valid": ^1.2.0 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + peerDependencies: + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: ed0ee4bec3b63ee9c5eb8216b22646313ff1ada06c5183f128d25b73252126e9fde625e81c868be7ccd666b686a73076f923ce188dac25e93d5062ddffdad46f + languageName: node + linkType: hard + "@emotion/styled@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/styled@npm:11.10.5" @@ -1056,6 +1141,36 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-alpha.123": + version: 5.0.0-alpha.123 + resolution: "@mui/base@npm:5.0.0-alpha.123" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: a17c266d0a922903e43c08cce8f42d1a35716b5d1574393c90ac89290029f6c08ef7261ba7af3609917a32fce1a1c0efdab06320df4d1ab351fd987e429f6dfd + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.11.15": + version: 5.11.15 + resolution: "@mui/core-downloads-tracker@npm:5.11.15" + checksum: 8dc377b415ac1c18ec11a55fe916aeb0317e4c454759e3c3c0d3bdeaef75236486f17cb9ef3ae01eaee5f51e2cc7ada6a7e7ca452a64ddbbb8638c32e2615938 + languageName: node + linkType: hard + "@mui/core-downloads-tracker@npm:^5.11.9": version: 5.11.9 resolution: "@mui/core-downloads-tracker@npm:5.11.9" @@ -1079,6 +1194,22 @@ __metadata: languageName: node linkType: hard +"@mui/icons-material@npm:^5.4.1": + version: 5.11.11 + resolution: "@mui/icons-material@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd + languageName: node + linkType: hard + "@mui/lab@npm:^5.0.0-alpha.69": version: 5.0.0-alpha.120 resolution: "@mui/lab@npm:5.0.0-alpha.120" @@ -1142,6 +1273,56 @@ __metadata: languageName: node linkType: hard +"@mui/material@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/material@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.123 + "@mui/core-downloads-tracker": ^5.11.15 + "@mui/system": ^5.11.15 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@types/react-transition-group": ^4.4.5 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 53726a8aa2ab541c967eda43fe0094486e2f2ac743c39f09a5326aeffdba0be414187f216346c45135751b63a28a9871f4e68f4d6ab89b5b1d86e468f869d328 + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/private-theming@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.11.13 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 9e5e02c6482945d9fa52e920fb206fb032d1b1df4bb06ea9d032babb53ed171e3b5a7969091072a5d04b0ab52c90f01ba51b90ba27730019d3f7eccc49ca4628 + languageName: node + linkType: hard + "@mui/private-theming@npm:^5.11.9": version: 5.11.9 resolution: "@mui/private-theming@npm:5.11.9" @@ -1159,6 +1340,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.11.11": + version: 5.11.11 + resolution: "@mui/styled-engine@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.5 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 63b71aafe79afbe1638a31d9cc1361d11edd5b4a8eacc50da86d83b5db11c9a1713c5744d1533360488aef85afc8d4a5429517447b78b598493c7a7d639390dd + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.11.9": version: 5.11.9 resolution: "@mui/styled-engine@npm:5.11.9" @@ -1211,6 +1413,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.11.15, @mui/system@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/system@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.11.13 + "@mui/styled-engine": ^5.11.11 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: c8b8ffcf48b204f8e0ff6cc2ef5a35b6a3ef3517c9626dbb2fda073b81992c93750167440737459b82ff1ac2bf6d4e9eb9ce3b39887bdc4dbded5bc8266032ac + languageName: node + linkType: hard + "@mui/system@npm:^5.11.9": version: 5.11.9 resolution: "@mui/system@npm:5.11.9" @@ -1266,6 +1496,21 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/utils@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^16.7.1 || ^17.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 0f403f2635fd5cd39c013b9d4defa2cf1ecc023e35b8c9866d6123792480dcafe47207e43420c10b0d030e64df31e78adfdb8248e2476da27f07d80ed0b44927 + languageName: node + linkType: hard + "@mui/x-data-grid@npm:^5.17.2": version: 5.17.23 resolution: "@mui/x-data-grid@npm:5.17.23" @@ -1550,6 +1795,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 + languageName: node + linkType: hard + "@react-pdf/fns@npm:2.0.0": version: 2.0.0 resolution: "@react-pdf/fns@npm:2.0.0" @@ -5054,6 +5306,35 @@ __metadata: languageName: node linkType: hard +"framer-motion@npm:^4.1.17": + version: 4.1.17 + resolution: "framer-motion@npm:4.1.17" + dependencies: + "@emotion/is-prop-valid": ^0.8.2 + framesync: 5.3.0 + hey-listen: ^1.0.8 + popmotion: 9.3.6 + style-value-types: 4.1.4 + tslib: ^2.1.0 + peerDependencies: + react: ">=16.8 || ^17.0.0" + react-dom: ">=16.8 || ^17.0.0" + dependenciesMeta: + "@emotion/is-prop-valid": + optional: true + checksum: f6b5fc8f189e6760353aa5b67515b6576ebaa164d8df73118780a09d1d4a162e54dfeb126a05c6a28727af88f4a80f8b94900ff9510be44dada6496a99273fde + languageName: node + linkType: hard + +"framesync@npm:5.3.0": + version: 5.3.0 + resolution: "framesync@npm:5.3.0" + dependencies: + tslib: ^2.1.0 + checksum: 9ebbb2863e6a1cfd2e9dd1b73af427d23caa03c92dd49ea767ebdd208c3a573bba4a1026f67068d856a21704f79adcdf2f750cc852ff73bc1f0e80edaaecded8 + languageName: node + linkType: hard + "fs-constants@npm:^1.0.0": version: 1.0.0 resolution: "fs-constants@npm:1.0.0" @@ -5455,6 +5736,13 @@ __metadata: languageName: node linkType: hard +"hey-listen@npm:^1.0.8": + version: 1.0.8 + resolution: "hey-listen@npm:1.0.8" + checksum: 6bad60b367688f5348e25e7ca3276a74b59ac5a09b0455e6ff8ab7d4a9e38cd2116c708a7dcd8a954d27253ce1d8717ec891d175723ea739885b828cf44e4072 + languageName: node + linkType: hard + "hi-base32@npm:^0.5.0": version: 0.5.1 resolution: "hi-base32@npm:0.5.1" @@ -8471,6 +8759,7 @@ __metadata: react-dom: 18.2.0 react-gtm-module: 2.0.11 react-i18next: ^11.17.1 + react-material-ui-carousel: ^3.4.2 react-quill: ^2.0.0-beta.4 react-slick: ^0.29.0 sharp: ^0.30.5 @@ -8486,6 +8775,18 @@ __metadata: languageName: unknown linkType: soft +"popmotion@npm:9.3.6": + version: 9.3.6 + resolution: "popmotion@npm:9.3.6" + dependencies: + framesync: 5.3.0 + hey-listen: ^1.0.8 + style-value-types: 4.1.4 + tslib: ^2.1.0 + checksum: 551446ec3763790efde7a3bb8c43189122f9b559985be2efa79842138257c4e331efcff606732a4bd5ac82d9bde1b236258d69a435f4bb5e9fc5908241b5ba3f + languageName: node + linkType: hard + "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -8937,6 +9238,28 @@ __metadata: languageName: node linkType: hard +"react-material-ui-carousel@npm:^3.4.2": + version: 3.4.2 + resolution: "react-material-ui-carousel@npm:3.4.2" + dependencies: + "@emotion/react": ^11.7.1 + "@emotion/styled": ^11.6.0 + "@mui/icons-material": ^5.4.1 + "@mui/material": ^5.4.1 + "@mui/system": ^5.4.1 + framer-motion: ^4.1.17 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + "@mui/icons-material": ^5.0.0 + "@mui/material": ^5.0.0 + "@mui/system": ^5.0.0 + react: ^17.0.1 || ^18.0.0 + react-dom: ^17.0.2 || ^18.0.0 + checksum: 9a1bbe20cbe07b4dade8ba248918dc824629192042e91535142029756cb6ae12d70b3c5ff18afc46fd013a68a4d4e649a8b814a8b7e5dd60dec073b195c9bbe7 + languageName: node + linkType: hard + "react-quill@npm:^2.0.0-beta.4": version: 2.0.0 resolution: "react-quill@npm:2.0.0" @@ -10003,6 +10326,16 @@ __metadata: languageName: node linkType: hard +"style-value-types@npm:4.1.4": + version: 4.1.4 + resolution: "style-value-types@npm:4.1.4" + dependencies: + hey-listen: ^1.0.8 + tslib: ^2.1.0 + checksum: 96189770076a2717bf579f7d73a49953f0c3d633b90fed9b44b8285cbbe7facd19d6d7a0d2802fb493b45995791f62b87983c3d3c24128818a69e593b6d77aed + languageName: node + linkType: hard + "styled-jsx@npm:5.1.1": version: 5.1.1 resolution: "styled-jsx@npm:5.1.1"