Skip to content

Commit 9e71bc3

Browse files
elainefan331elainefan331
committed
feat: add a static nodes img and adjust responsive layout design for section2; refs #50 #51 
1 parent 0e97193 commit 9e71bc3

File tree

4 files changed

+74
-17
lines changed

4 files changed

+74
-17
lines changed

‎public/img/static_nodes.png‎

350 KB
Loading

‎src/components/HomePageComponents/Section2.tsx‎

Lines changed: 66 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,14 @@ const Section2: React.FC<Section2Props> = ({
5858
position: "relative",
5959
width: "100%",
6060
background: "none",
61+
display: "flex",
62+
flexDirection: { xs: "column", md: "row-reverse" }, // <-- key change here
63+
alignItems: "center",
64+
justifyContent: "center",
65+
gap: 6,
66+
px: { xs: 2, md: 6 },
67+
py: { xs: 8, md: 12 },
68+
mt: { xs: 2, md: 8 },
6169
// backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2371feed'/%3E%3Cstop offset='1' stop-color='%2371feed' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23abb2f9'/%3E%3Cstop offset='1' stop-color='%23abb2f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231fa0f6'/%3E%3Cstop offset='1' stop-color='%231fa0f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2302DEC4'/%3E%3Cstop offset='1' stop-color='%2302DEC4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235865F2'/%3E%3Cstop offset='1' stop-color='%235865F2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E")`,
6270
// backgroundAttachment: "fixed",
6371
// backgroundSize: "cover",
@@ -78,18 +86,41 @@ const Section2: React.FC<Section2Props> = ({
7886
{/* title, text and buttons */}
7987
<Box
8088
sx={{
81-
position: { xs: "relative", md: "absolute" },
82-
top: { md: 80 },
83-
left: { md: 20 },
84-
padding: { xs: "80px 20px 0", md: 0 },
89+
// position: { xs: "relative", md: "absolute", lg: "absolute" },
90+
// top: { lg: 250, md: 250, xs: "auto" },
91+
// right: { lg: 50, md: 50, xs: "auto" },
92+
// left: { xs: "auto" },
93+
// padding: { xs: "80px 20px 0", md: 0 },
94+
// border: "2px solid red",
95+
// width: { xs: "100%", md: "40%" },
96+
97+
display: "flex",
98+
flexDirection: "column",
99+
alignItems: "center",
100+
justifyContent: "center",
101+
textAlign: { xs: "center", md: "left" },
102+
gap: 4,
103+
mt: { xs: 4, md: 4 },
104+
px: 2,
105+
flex: 1,
85106
}}
86107
>
87108
{/* title and text */}
88109
<Box
89110
sx={{
111+
flex: 1,
112+
maxWidth: "600px",
113+
textAlign: { xs: "center", md: "left" },
114+
alignItems: { xs: "center", md: "flex-start" },
90115
display: "flex",
91116
flexDirection: "column",
92117
gap: 3,
118+
119+
// display: "flex",
120+
// flexDirection: "column",
121+
// gap: 3,
122+
// alignItems: "flex-start",
123+
// textAlign: "left",
93124
}}
94125
>
95126
<Typography
@@ -105,8 +136,8 @@ const Section2: React.FC<Section2Props> = ({
105136
variant="h6"
106137
sx={{
107138
color: Colors.lightGray,
108-
width: "30%",
109-
display: { xs: "none", sm: "none", md: "none", lg: "block" },
139+
width: "100%",
140+
display: { xs: "none", sm: "block", md: "block", lg: "block" },
110141
}}
111142
>
112143
Dive into our interactive 3D graph to explore neuroimaging
@@ -118,13 +149,14 @@ const Section2: React.FC<Section2Props> = ({
118149
{/* top buttons: show only on large screens */}
119150
<Box
120151
sx={{
121-
display: { xs: "flex", md: "flex", lg: "flex" },
152+
display: "flex",
122153
flexDirection: "column",
123-
width: { xs: "100%", sm: "50%", md: "30%", lg: "15%" },
154+
width: { xs: "100%", sm: "50%", md: "30%", lg: "100%" },
124155
maxWidth: "200px",
125156
mb: 2,
126-
position: { xs: "relative", md: "absolute" },
157+
// position: { xs: "relative", md: "absolute" },
127158
zIndex: 10, // Higher than text and graph
159+
alignItems: { xs: "center", md: "flex-start" },
128160
}}
129161
>
130162
<Button
@@ -146,8 +178,31 @@ const Section2: React.FC<Section2Props> = ({
146178
</Box>
147179
</Box>
148180

149-
{/* 3d-graph */}
150181
<Box
182+
sx={{
183+
// position: "absolute",
184+
// left: 200,
185+
// top: 150,
186+
// width: "40%",
187+
flex: 1,
188+
maxWidth: "600px",
189+
width: "100%",
190+
display: "flex",
191+
justifyContent: "center",
192+
alignItems: "center",
193+
mt: { xs: 4, md: 0 },
194+
}}
195+
>
196+
<img
197+
src={`${process.env.PUBLIC_URL}/img/static_nodes.png`}
198+
alt="3d_graph"
199+
width="100%"
200+
height="auto"
201+
></img>
202+
</Box>
203+
204+
{/* 3d-graph */}
205+
{/* <Box
151206
sx={{
152207
minHeight: "400px",
153208
marginLeft: 15,
@@ -169,7 +224,7 @@ const Section2: React.FC<Section2Props> = ({
169224
</Typography>
170225
</Box>
171226
)}
172-
</Box>
227+
</Box> */}
173228

174229
{/* Bottom Buttons - Show only on smaller screens */}
175230
{/* <Box

‎src/components/NavBar/NavItems.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const NavItems: React.FC = () => {
2222
>
2323
<Grid item sm={12} md={5} lg={5}>
2424
<Button
25+
disableRipple
2526
sx={{
2627
display: "flex",
2728
alignItems: "center",

‎src/design/Layouts/FullScreen.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import { AppBar, Box, Button, Grid, Toolbar, Typography } from "@mui/material";
22
import DefaultNavBar from "components/NavBar/DefaultNavBar";
33
import LandingNavBar from "components/NavBar/LandingNavBar";
4-
import { Colors } from "design/theme";
5-
import useIsLargeScreen from "hooks/useIsLargeScreen";
4+
// import { Colors } from "design/theme";
5+
// import useIsLargeScreen from "hooks/useIsLargeScreen";
66
import { useState, useEffect, useRef } from "react";
77
import { Outlet, useNavigate, Link, useLocation } from "react-router-dom";
8-
import RoutesEnum from "types/routes.enum";
8+
9+
// import RoutesEnum from "types/routes.enum";
910

1011
const FullScreen = () => {
11-
const isLargeScreen = useIsLargeScreen();
12+
// const isLargeScreen = useIsLargeScreen();
1213
const location = useLocation();
1314
const isLandingPage = location.pathname === "/";
1415

15-
const navigate = useNavigate();
16+
// const navigate = useNavigate();
1617
const [scrolled, setScrolled] = useState(false);
1718

18-
const justifyContentValue = isLargeScreen ? "flex-start" : "space-between";
19+
// const justifyContentValue = isLargeScreen ? "flex-start" : "space-between";
1920

2021
useEffect(() => {
2122
const handleScroll = () => {

0 commit comments

Comments
 (0)