Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use cases landing page revamp #2381

Merged
merged 10 commits into from
Feb 27, 2024
Merged

feat: use cases landing page revamp #2381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c9f88c6
fix(forpersonaspage.js): hero section revamp
Feb 27, 2024
80a28e8
feat(usecases.js): new section for for personas page
Feb 27, 2024
f3cff1b
feat(simplecardlogo.js): new brand logos section for personas page
Feb 27, 2024
070f381
feat: reused tab sections component for features section under forper…
Feb 27, 2024
23a9613
feat(casestudy.js): new case study section for personas page
Feb 27, 2024
bc1fdcb
feat(singletestimonial.js): new single testimonial section for person…
Feb 27, 2024
46e78b3
feat(techstack.js): new tech stack section for personas page
Feb 27, 2024
39c4783
feat(getdemosection.js) reused component for new demo section for per…
Feb 27, 2024
cfa1e06
prettier fix
Feb 27, 2024
3eaf375
removed unused imports
Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/globals/FillerContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,11 @@ export default {
avatar: 'https://kfg6bckb.media.zestyio.com/default-avatar.png',
},
],
demo: {
title: 'Connect with Content Experts',
supportingText: `<p>Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.</p>`,
cta: 'Book Demo',
},
demos: [
{
title: '',
Expand All @@ -124,6 +129,7 @@ export default {
bgcolor: 'pink',
},
],
avatar: 'https://kfg6bckb.media.zestyio.com/default-avatar.png',
mobileImage: {
light: 'https://kfg6bckb.media.zestyio.com/mobile-app-cms-content.png',
dark: 'https://kfg6bckb.media.zestyio.com/mobile-app-cms-content.png',
Expand Down
197 changes: 197 additions & 0 deletions src/components/marketing/ForPersonas/CaseStudy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { Box, Button, Stack, Typography } from '@mui/material';
import React from 'react';
import EastIcon from '@mui/icons-material/East';

const singlife =
'https://storage.googleapis.com/assets.zesty.io/website/images/assets/singlifeHero.svg',
singlifeCS =
'https://storage.googleapis.com/assets.zesty.io/website/images/assets/singlifeCS.jpg';

const CaseStudy = ({
overline = 'CASE STUDIES / SINGLIFE',
logo = singlife,
heading = "Singlife's Digital Expansion",
description = 'Discover how Singlife used Zesty.io to support their global expansion, resulting in a 185% growth in the first year.',
image = singlifeCS,
ctaText,
ctaLink,
stats_1_number,
stats_1_description,
stats_2_number,
stats_2_description,
stats_3_number,
stats_3_description,
}) => {
const statsLists = [
{
title: stats_1_number,
description: stats_1_description,
},
{
title: stats_2_number,
description: stats_2_description,
},
{
title: stats_3_number,
description: stats_3_description,
},
];

return (
<Stack
direction="column"
sx={(theme) => ({
[theme.breakpoints.up('xl')]: {
maxWidth: theme.maxWidth,
mx: 'auto',
},
})}
>
<Stack direction={{ xs: 'column', lg: 'row' }}>
<Stack
sx={(theme) => ({
[theme.breakpoints.up('xs')]: {
pt: 4,
px: 2,
mb: 3,
},
[theme.breakpoints.up('tablet')]: {
pt: 6,
px: 4,
mb: 6,
},
[theme.breakpoints.up('lg')]: {
width: '60%',
py: 9,
px: 14,
mb: 0,
},
[theme.breakpoints.up('desktopWide')]: {
py: '106px',
px: 14,
},
})}
alignItems="start"
>
<Stack
mb={{ xs: 4, tablet: 6 }}
width={{ lg: '496px', desktopWide: '636px' }}
>
<Typography
color="text.secondary"
variant="body2"
mb={{ xs: 3, tablet: 4 }}
>
{overline}
</Typography>
<Box
component="img"
src={logo}
height={{ xs: '32px', tablet: '48px' }}
alignSelf="start"
mb={{ xs: 3, tablet: 4 }}
/>
<Typography
color="text.primary"
fontWeight={800}
variant="h1"
letterSpacing="-0.02em"
mb={3}
sx={(theme) => ({
[theme.breakpoints.up('tablet')]: {
fontSize: '44px',
lineHeight: '48px',
mb: 4,
},
})}
>
{heading}
</Typography>
<Typography
color="text.secondary"
fontSize="18px"
lineHeight="28px"
>
{description}
</Typography>
</Stack>
<Stack
direction={{ xs: 'column', tablet: 'row' }}
gap={{ xs: 4, tablet: 6, lg: 4 }}
>
{statsLists
.filter((item) => item?.title)
.map((stat, index) => (
<Stack key={index}>
<Typography
mb="9px"
fontSize="40px"
lineHeight="56px"
letterSpacing="-0.02em"
color="text.primary"
fontWeight={800}
sx={(theme) => ({
[theme.breakpoints.up('tablet')]: {
fontSize: '52px',
lineHeight: '56px',
},
})}
>
{stat.title}
</Typography>
<Typography
color="text.secondary"
variant="body2"
fontWeight={800}
>
{stat.description}
</Typography>
</Stack>
))}
</Stack>
{ctaText && (
<Button
href={ctaLink}
size="large"
sx={{ mt: 4, fontWeight: 'bold' }}
>
{ctaText} <EastIcon sx={{ ml: 1, fontSize: '14px' }} />
</Button>
)}
</Stack>

<Stack width={{ lg: '40%' }}>
<Box
component="img"
src={image}
sx={(theme) => ({
[theme.breakpoints.up('xs')]: {
objectFit: 'contain',
maxWidth: '100%',
height: '100%',
},
[theme.breakpoints.up('tablet')]: {
maxWidth: '100%',
height: '745px',
},
[theme.breakpoints.up('lg')]: {
maxWidth: '480px',
height: '100%',
},
[theme.breakpoints.between(1201, 1439)]: {
maxWidth: '100%',
height: '100%',
},
[theme.breakpoints.up('desktopWide')]: {
maxWidth: '580px',
height: '100%',
},
})}
/>
</Stack>
</Stack>
</Stack>
);
};

export default CaseStudy;
Loading
Loading