Skip to content

Commit 5b5ff8b

Browse files
elainefan331elainefan331
committed
feat: adjust section3 layout to center all content within full screen and reposition scroll arrow to bottom; refs #50 #51 
1 parent fa2ad8c commit 5b5ff8b

File tree

3 files changed

+79
-73
lines changed

3 files changed

+79
-73
lines changed

‎src/components/HomePageComponents/Section2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Section2: React.FC<Section2Props> = ({
4242
backgroundSize: "cover",
4343
minHeight: "100vh",
4444
display: "flex",
45-
flexDirection: { xs: "column", md: "row-reverse" }, // <-- key change here
45+
flexDirection: { xs: "column", md: "row-reverse" },
4646
alignItems: "center",
4747
justifyContent: "center",
4848
gap: 6,

‎src/components/HomePageComponents/Section3.tsx‎

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -9,108 +9,114 @@ interface Section3Props {
99

1010
const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
1111
return (
12-
<Box // white background
12+
<Box
1313
sx={{
1414
zIndex: "2",
1515
position: "relative",
1616
width: "100%",
17-
// backgroundColor: Colors.white,
1817
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%232c3379'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(100 0)'%3E%3Cg transform='translate(0 210)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-176.4 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
1918
backgroundAttachment: "fixed",
2019
backgroundSize: "cover",
21-
// overflow: "auto",
22-
padding: "5rem 7rem",
20+
minHeight: "100vh",
21+
display: "flex",
22+
flexDirection: { xs: "column", md: "row-reverse" },
23+
alignItems: "center",
24+
justifyContent: "center",
25+
gap: 15,
26+
px: { xs: 2, md: 6 },
27+
py: { xs: 8, md: 12 },
2328
}}
2429
>
25-
<Box
30+
{/* <Box
2631
sx={{
27-
zIndex: "3",
2832
position: "relative",
2933
width: "100%",
3034
background: "none",
31-
// backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%232c3379'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(100 0)'%3E%3Cg transform='translate(0 210)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-176.4 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
32-
// backgroundAttachment: "fixed",
33-
// backgroundSize: "cover",
34-
// overflow: "auto",
35-
// borderRadius: "20px",
36-
// display: "flex",
37-
// flexDirection: "row",
38-
// justifyContent: "flex-end",
39-
// alignItems: "center",
35+
maxWidth: "1600px",
36+
display: "flex",
37+
flexDirection: { xs: "column", md: "row-reverse" },
38+
justifyContent: "space-between",
39+
alignItems: "center",
40+
gap: 4,
41+
}}
42+
> */}
43+
{/* title and text */}
44+
<Box
45+
sx={{
46+
flex: 1,
47+
display: "flex",
48+
flexDirection: "column",
49+
justifyContent: "center",
50+
maxWidth: "600px",
51+
alignItems: "center",
52+
textAlign: { xs: "center", md: "left" },
53+
gap: 4,
54+
mt: { xs: 4, md: 4 },
55+
px: 2,
4056
}}
4157
>
42-
{/* <Box
58+
<Typography
59+
variant="h3"
60+
sx={{
61+
fontWeight: "bold",
62+
color: Colors.lightGray,
63+
}}
64+
>
65+
Visualize data via our preview tools
66+
</Typography>
67+
<Typography
68+
variant="h6"
4369
sx={{
44-
border: "solid 2px red",
45-
display: "flex",
46-
justifyContent: "center", // Center the image inside
47-
alignItems: "center",
48-
// width: "100%",
70+
color: Colors.lightGray,
71+
width: "100%",
72+
display: { xs: "none", sm: "block", md: "block", lg: "block" },
4973
}}
50-
> */}
74+
>
75+
Preview and explore neuroimaging data with interactive visualization
76+
tools directly in NeuroJSON.io. Adjust display modes, customize
77+
colormaps, slice across dimensions, and interactively rotate and zoom
78+
models.
79+
</Typography>
80+
</Box>
81+
82+
<Box
83+
sx={{
84+
flex: 1,
85+
maxWidth: "600px",
86+
width: "100%",
87+
display: "flex",
88+
justifyContent: "center",
89+
alignItems: "center",
90+
mt: { xs: 4, md: 2 },
91+
mb: { xs: 8, md: 0 },
92+
}}
93+
>
5194
<img
52-
src={`${process.env.PUBLIC_URL}/img/3cards_diagonal.png`}
95+
src={`${process.env.PUBLIC_URL}/img/3cards_vertical.png`}
5396
alt="rendering feature info cards"
5497
style={{
55-
width: "80%",
98+
width: "100%",
5699
height: "auto",
57-
padding: "2rem",
58-
position: "relative",
59-
zIndex: "2",
60100
}}
61101
></img>
62-
{/* </Box> */}
63-
64-
<Box
65-
sx={{
66-
display: "flex",
67-
flexDirection: "column",
68-
// padding: "2rem",
69-
position: "absolute",
70-
right: 30,
71-
width: "35%",
72-
top: 1,
73-
zIndex: "2",
74-
}}
75-
>
76-
<Typography
77-
variant="h3"
78-
sx={{
79-
// fontSize: "4rem",
80-
fontWeight: "bold",
81-
color: Colors.lightGray,
82-
mt: 4,
83-
}}
84-
>
85-
Visualize data via our preview tools
86-
</Typography>
87-
<Typography
88-
variant="h6"
89-
sx={{
90-
color: Colors.lightGray,
91-
mt: 4,
92-
display: { xs: "none", sm: "none", md: "none", lg: "block" },
93-
"@media (max-width:1500px)": {
94-
display: "none", // hide again if screen < 1500px
95-
},
96-
}}
97-
>
98-
Preview and explore neuroimaging data with interactive visualization
99-
tools directly in NeuroJSON.io. Adjust display modes, customize
100-
colormaps, slice across dimensions, and interactively rotate and
101-
zoom models.
102-
</Typography>
103-
</Box>
104102
</Box>
103+
{/* </Box> */}
104+
105105
{/* Scroll Arrow to Section4 */}
106106
<Box
107107
sx={{
108+
position: "absolute",
108109
display: "flex",
109110
justifyContent: "center",
110111
alignItems: "center",
111112
paddingTop: "2rem",
112-
// paddingBottom: "1rem",
113-
zIndex: 3,
113+
zIndex: 1000,
114+
bottom: "1rem",
115+
left: 0,
116+
right: 0,
117+
width: "100%",
118+
paddingBottom: "2rem",
119+
mb: 3,
114120
}}
115121
>
116122
<IconButton onClick={scrollToNext}>

‎src/pages/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ const Home: React.FC = () => {
136136
src={`${process.env.PUBLIC_URL}/img/section4_workflow.png`}
137137
alt="workflow of the website"
138138
style={{
139-
width: "90%",
139+
width: "80%",
140140
height: "auto",
141141
padding: "2rem",
142142
position: "relative",

0 commit comments

Comments
 (0)