Skip to content

Commit fa63692

Browse files
634750802634750802
authored
New open source heroes homepage header section (#1816)
* update heading * update ads * update ads * fix styles
1 parent fba7efe commit fa63692

File tree

8 files changed

+833
-156
lines changed

8 files changed

+833
-156
lines changed

‎web/src/pages/open-source-heroes/_components/Heading.tsx

+13-57
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,18 @@
1-
import { css, styled, Unstable_Grid2 as Grid } from '@mui/material';
1+
import { css, styled } from '@mui/material';
22

33
export const HeadingContainer = styled('div')`
44
background-color: #212122;
5-
padding: 40px 12px;
5+
padding: 40px 12px 60px;
66
${({ theme }) => ({
77
[theme.breakpoints.up('md')]: css`
8-
padding: 120px 0;
8+
padding: 80px 0 120px;
99
`,
1010
})}
1111
`;
1212

13-
export const Heading = styled(Grid)`
14-
max-width: 1280px;
13+
export const Heading = styled('div')`
14+
max-width: 1442px;
1515
margin: 0 auto;
16-
display: none;
17-
18-
${({ theme }) => ({
19-
[theme.breakpoints.up('md')]: css`
20-
display: flex;
21-
`,
22-
})}
23-
`;
24-
25-
export const HeadingLeft = styled(Grid)`
26-
${({ theme }) => ({
27-
[theme.breakpoints.up('md')]: css`
28-
position: relative;
29-
30-
&:after {
31-
display: block;
32-
position: absolute;
33-
right: 0;
34-
top: 0;
35-
height: 100%;
36-
content: ' ';
37-
border-right: 1px solid white;
38-
}
39-
`,
40-
})}
41-
`;
42-
43-
export const HeadingRight = styled(Grid)`
44-
${({ theme }) => ({
45-
[theme.breakpoints.up('md')]: css`
46-
display: flex;
47-
flex-direction: column;
48-
max-height: 100%;
49-
`,
50-
})}
5116
`;
5217

5318
export const HeadingTitlePrefix = styled('span')`
@@ -64,8 +29,7 @@ export const HeadingTitle = styled('h1')`
6429
color: #FFE895;
6530
${({ theme }) => ({
6631
[theme.breakpoints.up('md')]: css`
67-
font-size: 54px;
68-
text-align: right;
32+
font-size: 60px;
6933
`,
7034
})}
7135
`;
@@ -74,40 +38,32 @@ export const HeadingDescription = styled('p')`
7438
color: #7C7C7C;
7539
font-size: 16px;
7640
line-height: 24px;
77-
text-align: left;
41+
text-align: center;
7842
margin-bottom: 0;
7943
8044
${({ theme }) => ({
8145
[theme.breakpoints.up('md')]: css`
82-
text-align: right;
46+
text-align: center;
8347
`,
8448
})}
8549
`;
8650

8751
export const HeadingLogos = styled('div')`
8852
display: flex;
8953
align-items: center;
54+
justify-content: center;
9055
gap: 12px;
91-
margin-bottom: 24px;
56+
margin: 24px auto;
9257
width: 100%;
93-
justify-content: center;
94-
95-
${({ theme }) => ({
96-
[theme.breakpoints.up('md')]: css`
97-
justify-content: start;
98-
`,
99-
})}
58+
color: #7C7C7C;
10059
`;
10160

10261
export const HeadingPrompt = styled('div')`
62+
text-align: center;
10363
font-size: 18px;
10464
line-height: 28px;
10565
margin-top: 24px;
106-
${({ theme }) => ({
107-
[theme.breakpoints.up('md')]: css`
108-
margin-top: 80px;
109-
`,
110-
})}
66+
color: #5DC1ED;
11167
`;
11268

11369
export const HeadingSpacing = styled('span')`

‎web/src/pages/open-source-heroes/_components/OpenSourceHeroesGlobalAds.tsx

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import Link from '@docusaurus/Link';
2+
import { useLocation } from '@docusaurus/router';
3+
import { ArrowForward, HighlightOff } from '@mui/icons-material';
4+
import { Card, CardContent, Drawer, Grow, IconButton, Popper, PopperProps, styled, Theme, Typography, useEventCallback, useMediaQuery } from '@mui/material';
5+
import { VirtualElement } from '@popperjs/core';
6+
import { useSafeSetTimeout } from '@site/src/hooks/mounted';
7+
import { useLocalStorageState } from 'ahooks';
8+
import React, { useEffect, useState } from 'react';
9+
10+
export default function OpenSourceHeroesGlobalAds () {
11+
const [removed, setRemoved] = useState(false);
12+
const [open, setOpen] = useState(false);
13+
const [hasClosed, setHasClosed] = useLocalStorageState<boolean>('ossinsight.open-source-heroes.ads-has-closed', {
14+
serializer: String,
15+
deserializer: Boolean,
16+
defaultValue: false,
17+
});
18+
const [anchorEl, setAnchorEl] = useState<VirtualElement | null>(typeof window === 'undefined' ? null : document.body);
19+
const location = useLocation();
20+
const safeSetTimeout = useSafeSetTimeout();
21+
22+
const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
23+
24+
useEffect(() => {
25+
setAnchorEl(document.body);
26+
if (hasClosed || /^\/(?:blog|open-source-heroes)\/?$/.test(location.pathname)) {
27+
return;
28+
}
29+
safeSetTimeout(() => {
30+
setRemoved(false);
31+
setOpen(true);
32+
setAnchorEl(document.querySelector('nav.navbar') ?? null);
33+
}, 2000);
34+
}, [hasClosed, location]);
35+
36+
const handleClose = useEventCallback(() => {
37+
setOpen(false);
38+
setHasClosed(true);
39+
safeSetTimeout(() => {
40+
setRemoved(true);
41+
}, 400);
42+
});
43+
44+
const content = (
45+
<CardContent sx={{ maxWidth: 402, mx: 'auto' }}>
46+
<Typography variant="body1" mb={1} fontSize={12}>
47+
<StyledLink to="/open-source-heroes/" onClick={handleClose} sx={{ fontSize: 16 }}>
48+
Up to $2000 Serverless database credits <StyledArrowForward fontSize="inherit" />
49+
</StyledLink>
50+
Turn your GitHub contribution into free TiDB Serverless credits, start building and scaling with a plug&play database that supports both SQL and vector queries.
51+
</Typography>
52+
{open && <img style={{ marginTop: 12 }} src="/img/open-source-heroes-ads.png" width="536" alt="open-source-heroes-showcase" />}
53+
</CardContent>
54+
);
55+
56+
return (
57+
<>
58+
{isSmall
59+
? (
60+
<StyledDrawer open={open} anchor="bottom" onClose={handleClose}>
61+
{content}
62+
</StyledDrawer>
63+
)
64+
: (
65+
<Popper sx={{ zIndex: 15, pointerEvents: 'none' }} anchorEl={anchorEl} placement={isSmall ? 'bottom' : 'bottom-start'} open={!removed} keepMounted={false} popperOptions={popperOptions}>
66+
<Grow in={open} timeout={400} style={{ transformOrigin: '50% 0' }}>
67+
<StyledCard elevation={7}>
68+
{content}
69+
<CloseIcon size="small" onClick={handleClose}>
70+
<HighlightOff />
71+
</CloseIcon>
72+
</StyledCard>
73+
</Grow>
74+
</Popper>
75+
)}
76+
</>
77+
);
78+
}
79+
80+
const popperOptions: PopperProps['popperOptions'] = {
81+
strategy: 'fixed',
82+
modifiers: [
83+
{
84+
name: 'offset',
85+
options: {
86+
offset: [16, 16],
87+
},
88+
},
89+
],
90+
};
91+
92+
const StyledCard = styled(Card)`
93+
position: relative;
94+
border: 15px solid #FFE895;
95+
background: #111111;
96+
pointer-events: auto;
97+
border-radius: 12px;
98+
99+
${({ theme }) => theme.breakpoints.up('md')} {
100+
overflow: visible;
101+
102+
//&:after {
103+
// display: block;
104+
// content: ' ';
105+
// position: absolute;
106+
// top: -23px;
107+
// left: 50%;
108+
// width: 0;
109+
// height: 0;
110+
// border-left: 8px solid transparent;
111+
// border-right: 8px solid transparent;
112+
//
113+
// border-bottom: 8px solid #FFE895;
114+
//}
115+
}
116+
`;
117+
118+
const StyledDrawer = styled(Drawer)`
119+
.MuiDrawer-paper {
120+
border-top: 6px solid #FFE895;
121+
background: #111111;
122+
}
123+
`;
124+
125+
const CloseIcon = styled(IconButton)`
126+
color: #FFE895 !important;
127+
position: absolute;
128+
right: 8px;
129+
top: 8px;
130+
`;
131+
132+
const StyledArrowForward = styled(ArrowForward)`
133+
vertical-align: text-bottom;
134+
`;
135+
136+
const StyledLink = styled(Link)`
137+
display: block;
138+
text-align: center;
139+
color: #FFE895 !important;
140+
margin-bottom: 16px;
141+
font-weight: bold;
142+
`;

‎web/src/pages/open-source-heroes/_sections/0-heading.tsx

+27-52
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
import { ArrowCircleRightOutlined } from '@mui/icons-material';
44
import { Button } from '@mui/material';
55
import { ClaimForm } from '@site/src/pages/open-source-heroes/_components/ClaimForm';
6-
import { Heading, HeadingContainer, HeadingDescription, HeadingLeft, HeadingLogos, HeadingPrompt, HeadingRight, HeadingSpacing, HeadingTitle, HeadingTitlePrefix, MobileHeading } from '@site/src/pages/open-source-heroes/_components/Heading';
6+
import { Heading, HeadingContainer, HeadingDescription, HeadingLogos, HeadingPrompt, HeadingSpacing, HeadingTitle, HeadingTitlePrefix } from '@site/src/pages/open-source-heroes/_components/Heading';
77
import { useResponsiveAuth0 } from '@site/src/theme/NavbarItem/useResponsiveAuth0';
88
import { useGtag } from '@site/src/utils/ga';
99
import React, { useState } from 'react';
10+
import GetCredits from './GetCredits.svg';
1011

1112
declare module 'react' {
1213
interface CSSProperties {
@@ -53,68 +54,42 @@ export function HeadingSection () {
5354
function PrimaryHeading ({ loading, onClickAction }: { loading: boolean, onClickAction: () => void }) {
5455
return (
5556
<HeadingContainer>
56-
<Heading container columnSpacing={8} rowSpacing={0}>
57-
<HeadingLeft xs={12} md={7}>
58-
<div>
59-
<HeadingTitle>
60-
<HeadingTitlePrefix>Fuel Your Next Big Idea:</HeadingTitlePrefix>
61-
<br />
62-
TiDB Serverless Credits for Open Source Heroes
63-
</HeadingTitle>
64-
<HeadingDescription>
65-
TiDB loves open-source. We contribute code, sponsor projects and deeply appreciate developers who actively contribute to the community.
66-
<br />
67-
As a token of our appreciation, we&#39;re offering up to $2000 in free TiDB Serverless credits to fuel open-source hero&#39;s next big idea.
68-
</HeadingDescription>
69-
</div>
70-
</HeadingLeft>
71-
<HeadingRight xs={12} md={5}>
72-
<HeadingPrompt>
73-
Simply log in with your GitHub account to calculate and claim your credits.
74-
</HeadingPrompt>
75-
<HeadingSpacing />
76-
<HeadingLogos>
77-
<img alt="OSSInsight Logo" src={require('../_components/ossi-logo.png').default} height={56} />
78-
<img alt="TiDB Logo" src={require('../_components/tidb-logo.png').default} height={68} />
79-
</HeadingLogos>
80-
<Button
81-
id="start-claim-trigger"
82-
sx={{ width: ['100%', '100%', 'max-content'] }}
83-
disabled={loading}
84-
color="primary"
85-
variant="contained"
86-
onClick={() => {
87-
onClickAction();
88-
}}
89-
>
90-
Claim Your Credits Now
91-
<ArrowCircleRightOutlined sx={{ ml: 0.5 }} />
92-
</Button>
93-
</HeadingRight>
94-
</Heading>
95-
<MobileHeading>
96-
<h1><span>Free Database Credits</span> for Open Source Heroes</h1>
97-
<p>
98-
TiDB loves open-source. We contribute code, sponsor projects, and appreciate developers who do so.
57+
<Heading>
58+
<HeadingTitle>
59+
<HeadingTitlePrefix>Fuel Your Next Big Idea:</HeadingTitlePrefix>
60+
<br />
61+
TiDB Serverless Credits for Open Source Heroes
62+
</HeadingTitle>
63+
<HeadingDescription>
64+
TiDB loves open-source. We contribute code, sponsor projects and deeply appreciate developers who actively contribute to the community.
9965
<br />
100-
As a token of our appreciation, we&#39;re offering up to $2000 free TiDB Serverless credits to fuel open-source hero&#39;s next big idea.
101-
</p>
102-
<p className="action-prompt">
103-
Log in with GitHub account to claim your credits.
104-
</p>
66+
As a token of our appreciation, we&#39;re offering up to $2000 in free TiDB Serverless credits to fuel open-source hero&#39;s next big idea.
67+
</HeadingDescription>
68+
<HeadingPrompt>
69+
Simply log in with your GitHub account to calculate and claim your credits.
70+
</HeadingPrompt>
10571
<Button
106-
id="start-claim-trigger-mobile"
72+
id="start-claim-trigger"
73+
sx={{ width: ['100%', '100%', 'max-content'], mt: 4, mx: 'auto', display: 'flex' }}
10774
disabled={loading}
10875
color="primary"
10976
variant="contained"
11077
onClick={() => {
11178
onClickAction();
11279
}}
11380
>
114-
Claim Now
81+
Claim Your Credits Now
11582
<ArrowCircleRightOutlined sx={{ ml: 0.5 }} />
11683
</Button>
117-
</MobileHeading>
84+
<HeadingSpacing />
85+
<HeadingLogos>
86+
<span>Sponsored by</span>
87+
<img alt="TiDB Logo" src={require('../_components/tidb-logo.png').default} height={68} />
88+
</HeadingLogos>
89+
<div style={{ maxWidth: 812, margin: '0 auto' }}>
90+
<GetCredits style={{ width: '100%' }} />
91+
</div>
92+
</Heading>
11893
</HeadingContainer>
11994
);
12095
}

0 commit comments

Comments
 (0)