Skip to content

Commit 7f95bac

Browse files
nicoaleenicoalee
committed
feat: added help page
1 parent 6235703 commit 7f95bac

File tree

2 files changed

+197
-0
lines changed

2 files changed

+197
-0
lines changed

‎compose/neurosynth-frontend/src/pages/BaseNavigation/BaseNavigation.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
1919
import LandingPage from '../LandingPage/LandingPage';
2020
import BaseNavigationStyles from './BaseNavigation.styles';
2121
import ProtectedRoute from './components/ProtectedRoute';
22+
import HelpPage from 'pages/HelpPage/HelpPage';
2223

2324
const EditStudyPage = React.lazy(() => import('pages/Study/EditStudyPage'));
2425
const ProjectStudyPage = React.lazy(() => import('pages/Study/ProjectStudyPage'));
@@ -215,6 +216,7 @@ const BaseNavigation: React.FC = () => {
215216
</ProtectedRoute>
216217
}
217218
/>
219+
<Route path="/help" element={<HelpPage />} />
218220
<Route
219221
path="/forbidden"
220222
element={

‎compose/neurosynth-frontend/src/pages/HelpPage/HelpPage.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { Box, Button, Card, CardContent, Container, Link, Typography } from '@mui/material';
2+
import ForumIcon from '@mui/icons-material/Forum';
3+
import EmailIcon from '@mui/icons-material/Email';
4+
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
5+
6+
const HelpPage: React.FC = () => {
7+
const handleNeuroStarsClick = () => {
8+
window.open('https://neurostars.org/tag/neurosynth-compose', '_blank', 'noopener,noreferrer');
9+
};
10+
11+
const handleEmailClick = () => {
12+
window.location.href = 'mailto:[email protected]';
13+
};
14+
15+
return (
16+
<Box
17+
sx={{
18+
width: '100%',
19+
display: 'flex',
20+
alignItems: 'center',
21+
justifyContent: 'center',
22+
py: '1.5rem',
23+
}}
24+
>
25+
<Container maxWidth="lg">
26+
<Box
27+
sx={{
28+
textAlign: 'center',
29+
marginBottom: '2rem',
30+
py: '1rem',
31+
}}
32+
>
33+
<Typography variant="h4" color="primary" gutterBottom>
34+
How Can We Help?
35+
</Typography>
36+
<Typography variant="h6">
37+
We're here to support you. Choose the best way to get in touch with us.
38+
</Typography>
39+
</Box>
40+
41+
<Box
42+
sx={{
43+
display: 'flex',
44+
flexDirection: { xs: 'column', md: 'row' },
45+
gap: '2rem',
46+
}}
47+
>
48+
{[
49+
{
50+
title: 'Community Support',
51+
descriptionElement: (
52+
<Typography
53+
variant="body1"
54+
sx={{
55+
color: 'text.primary',
56+
marginBottom: '1rem',
57+
}}
58+
>
59+
'Join our community on NeuroStars to ask questions, share insights, and connect with
60+
other researchers. Get answers from both the Neurosynth team and the wider
61+
neuroscience community.',
62+
</Typography>
63+
),
64+
icon: <ForumIcon sx={{ fontSize: '2rem', color: 'white' }} />,
65+
button: {
66+
label: 'Visit NeuroStars',
67+
onClick: handleNeuroStarsClick,
68+
},
69+
},
70+
{
71+
title: 'Email Support',
72+
descriptionElement: (
73+
<Typography
74+
variant="body1"
75+
sx={{
76+
color: 'text.primary',
77+
marginBottom: '1rem',
78+
}}
79+
>
80+
Prefer direct contact? Send us an email at{' '}
81+
<Link underline="hover" href="mailto:[email protected]" fontWeight="bold">
82+
[email protected]
83+
</Link>{' '}
84+
Our team will get back to you as soon as possible to help resolve your questions or
85+
issues.,
86+
</Typography>
87+
),
88+
icon: <EmailIcon sx={{ fontSize: '2rem', color: 'white' }} />,
89+
button: {
90+
label: 'Send Email',
91+
onClick: handleEmailClick,
92+
},
93+
},
94+
].map(({ title, descriptionElement, icon, button }) => (
95+
<Card
96+
key={title}
97+
elevation={2}
98+
sx={{
99+
flex: 1,
100+
borderRadius: '16px',
101+
}}
102+
>
103+
<CardContent
104+
sx={{
105+
display: 'flex',
106+
height: '100%',
107+
boxSizing: 'border-box',
108+
flexDirection: 'column',
109+
alignItems: 'center',
110+
padding: '2rem',
111+
textAlign: 'center',
112+
}}
113+
>
114+
<Box
115+
sx={{
116+
width: '70px',
117+
height: '70px',
118+
backgroundColor: 'primary.main',
119+
borderRadius: '50%',
120+
display: 'flex',
121+
alignItems: 'center',
122+
justifyContent: 'center',
123+
marginBottom: '1.5rem',
124+
}}
125+
>
126+
{icon}
127+
</Box>
128+
<Typography
129+
variant="h4"
130+
sx={{
131+
marginBottom: '1rem',
132+
color: 'primary.main',
133+
}}
134+
>
135+
{title}
136+
</Typography>
137+
<Box>{descriptionElement}</Box>
138+
<Button
139+
variant="contained"
140+
size="large"
141+
disableElevation
142+
endIcon={<OpenInNewIcon />}
143+
onClick={button.onClick}
144+
sx={{
145+
width: '230px',
146+
marginTop: 'auto',
147+
paddingX: '1.5rem',
148+
}}
149+
>
150+
{button.label}
151+
</Button>
152+
</CardContent>
153+
</Card>
154+
))}
155+
</Box>
156+
157+
<Box
158+
sx={{
159+
marginTop: '3rem',
160+
textAlign: 'center',
161+
padding: '1.5rem',
162+
backgroundColor: 'primary.light',
163+
borderRadius: '8px',
164+
}}
165+
>
166+
<Typography
167+
variant="body1"
168+
sx={{
169+
color: 'white',
170+
lineHeight: 1.8,
171+
}}
172+
>
173+
Tip: Before reaching out, you might find answers in our{' '}
174+
<Link
175+
href="https://neurostuff.github.io/compose-docs/"
176+
target="_blank"
177+
underline="always"
178+
rel="noopener noreferrer"
179+
sx={{
180+
textDecorationColor: 'white',
181+
color: 'white',
182+
fontWeight: 'bold',
183+
}}
184+
>
185+
documentation
186+
</Link>
187+
.
188+
</Typography>
189+
</Box>
190+
</Container>
191+
</Box>
192+
);
193+
};
194+
195+
export default HelpPage;

0 commit comments

Comments
 (0)