Skip to content

Commit 3caed45

Browse files
elainefan331elainefan331
committed
feat: make workflow cards interactive, apply visual redesign, and modularize into Section4 component; refs #50 
1 parent 381ef79 commit 3caed45

File tree

9 files changed

+165
-42
lines changed

9 files changed

+165
-42
lines changed

‎public/img/section4_data_portals.png‎

193 KB
Loading

‎public/img/section4_database.png‎

182 KB
Loading

‎public/img/section4_json_conversion.png‎

403 KB
Loading

‎public/img/section4_platform.png‎

1.87 MB
Loading

‎src/components/HomePageComponents/Section1.tsx‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1+
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
12
import SearchIcon from "@mui/icons-material/Search";
2-
import { Typography, Box, Button, TextField, Grid } from "@mui/material";
3+
import {
4+
Typography,
5+
Box,
6+
Button,
7+
TextField,
8+
Grid,
9+
IconButton,
10+
} from "@mui/material";
311
import StatisticsBanner from "components/StatisticsBanner";
412
import { Colors } from "design/theme";
513
import pako from "pako";
614
import React, { useState } from "react";
715
import { useNavigate } from "react-router-dom";
816

9-
const Section1: React.FC = () => {
17+
interface Section1Props {
18+
scrollToNext: () => void;
19+
}
20+
21+
const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
1022
const [keyword, setKeyword] = useState("");
1123
const navigate = useNavigate();
1224

@@ -116,10 +128,43 @@ const Section1: React.FC = () => {
116128
</Grid>
117129

118130
{/* statistics banner row*/}
119-
<Grid item sx={{ width: "60%" }}>
131+
<Grid
132+
item
133+
sx={{
134+
width: "60%",
135+
mb: { xs: 10, sm: 10, md: 14, lg: 14 },
136+
}}
137+
>
120138
<StatisticsBanner />
121139
</Grid>
122140
</Grid>
141+
142+
{/* Scroll Arrow */}
143+
<Box
144+
sx={{
145+
// position: "absolute",
146+
// bottom: "1rem",
147+
// left: 0,
148+
// right: 0,
149+
// width: "100%",
150+
// display: "flex",
151+
// justifyContent: "center",
152+
// alignItems: "center",
153+
// paddingBottom: "2rem",
154+
// mt: 10,
155+
// zIndex: 1000,
156+
// mt: { xs: 6, sm: 4, md: 20, lg: 20 },
157+
mb: 2,
158+
display: "flex",
159+
justifyContent: "center",
160+
alignItems: "center",
161+
// border: "2px red solid",
162+
}}
163+
>
164+
<IconButton onClick={scrollToNext}>
165+
<ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
166+
</IconButton>
167+
</Box>
123168
</Box>
124169
);
125170
};

‎src/components/HomePageComponents/Section3.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import CloseIcon from "@mui/icons-material/Close";
12
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
23
import { Typography, Box, Button, IconButton, Dialog } from "@mui/material";
34
import { Colors } from "design/theme";
@@ -111,7 +112,19 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
111112

112113
{/* video dialog */}
113114
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
114-
<Box sx={{ p: 2 }}>
115+
<Box sx={{ p: 4, position: "relative" }}>
116+
{/* close button in top-right */}
117+
<IconButton
118+
onClick={handleClose}
119+
sx={{
120+
position: "absolute",
121+
top: 2,
122+
right: 2,
123+
zIndex: 10,
124+
}}
125+
>
126+
<CloseIcon />
127+
</IconButton>
115128
{/* <Box sx={{ position: "relative", paddingTop: "56.25%", height: 0 }}>
116129
<iframe
117130
src="https://www.youtube.com/watch?v=ZI-HntdeVas" // Replace with actual video URL
@@ -127,7 +140,7 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
127140
border: "none",
128141
}}
129142
></iframe> */}
130-
<video controls style={{ width: "100%", borderRadius: "8px" }}>
143+
<video controls style={{ width: "100%", borderRadius: "4px" }}>
131144
<source
132145
src={`${process.env.PUBLIC_URL}/video/tiger.mp4`}
133146
type="video/mp4"

‎src/components/HomePageComponents/Section4.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Box, Typography } from "@mui/material";
2+
import React from "react";
3+
4+
const Section4: React.FC = () => {
5+
return (
6+
<Box
7+
sx={{
8+
zIndex: "2",
9+
position: "relative",
10+
width: "100%",
11+
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")`,
12+
backgroundAttachment: "fixed",
13+
backgroundSize: "cover",
14+
padding: "5rem 7rem",
15+
display: "flex",
16+
flexDirection: "row",
17+
alignItems: "center",
18+
gap: 6,
19+
}}
20+
>
21+
<Box
22+
sx={{
23+
display: "flex",
24+
flexDirection: "column",
25+
maxWidth: "43%",
26+
position: "relative",
27+
}}
28+
>
29+
{[
30+
{
31+
src: "/img/section4_data_portals.png",
32+
onClick: () => console.log("Data Portals clicked"),
33+
},
34+
{
35+
src: "/img/section4_json_conversion.png",
36+
onClick: () => console.log("JSON Conversion clicked"),
37+
},
38+
{
39+
src: "/img/section4_database.png",
40+
onClick: () => console.log("Database clicked"),
41+
},
42+
{
43+
src: "/img/section4_platform.png",
44+
onClick: () => console.log("Platform clicked"),
45+
},
46+
].map((card, index, arr) => (
47+
<Box
48+
key={index}
49+
onClick={card.onClick}
50+
sx={{
51+
width: "100%",
52+
cursor: "pointer",
53+
position: "relative",
54+
zIndex: arr.length - index,
55+
marginTop: index === 0 ? 0 : "-17px", // adjust overlap
56+
transition: "transform 0.2s",
57+
"&:hover": {
58+
transform: "scale(1.02)",
59+
zIndex: 5,
60+
},
61+
}}
62+
>
63+
<img
64+
src={process.env.PUBLIC_URL + card.src}
65+
alt={`card-${index}`}
66+
style={{ width: "100%", height: "auto", display: "block" }}
67+
/>
68+
</Box>
69+
))}
70+
</Box>
71+
<Box>
72+
<Typography variant="h6">click each card to learn more</Typography>
73+
</Box>
74+
</Box>
75+
);
76+
};
77+
78+
export default Section4;

‎src/components/HomePageComponents/workflow.tsx‎

Whitespace-only changes.

‎src/pages/Home.tsx‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
2-
import { Box, Container, IconButton } from "@mui/material";
1+
import { Box, Container } from "@mui/material";
32
import Section1 from "components/HomePageComponents/Section1";
43
import Section2 from "components/HomePageComponents/Section2";
54
import Section3 from "components/HomePageComponents/Section3";
5+
import Section4 from "components/HomePageComponents/Section4";
66
import NodeInfoPanel from "components/NodeInfoPanel";
7-
import { Colors } from "design/theme";
87
import { useAppDispatch } from "hooks/useAppDispatch";
98
import { useAppSelector } from "hooks/useAppSelector";
109
import { NodeObject } from "modules/universe/NeuroJsonGraph";
@@ -73,23 +72,11 @@ const Home: React.FC = () => {
7372
>
7473
{/* section 1 */}
7574
<Box sx={{ position: "relative" }}>
76-
<Section1 />
77-
<Box
78-
sx={{
79-
display: "flex",
80-
justifyContent: "center",
81-
mt: 2,
82-
mb: 2,
83-
}}
84-
>
85-
<IconButton
86-
onClick={() =>
87-
section2Ref.current?.scrollIntoView({ behavior: "smooth" })
88-
}
89-
>
90-
<ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
91-
</IconButton>
92-
</Box>
75+
<Section1
76+
scrollToNext={() =>
77+
section2Ref.current?.scrollIntoView({ behavior: "smooth" })
78+
}
79+
/>
9380
</Box>
9481

9582
{/* section 2 */}
@@ -117,25 +104,25 @@ const Home: React.FC = () => {
117104
/>
118105
</Box>
119106

120-
{/* footer*/}
107+
{/* section 4*/}
121108
<Box
122109
ref={section4Ref}
123-
sx={{
124-
zIndex: "2",
125-
position: "relative",
126-
width: "100%",
127-
// backgroundColor: Colors.purple,
128-
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")`,
129-
backgroundAttachment: "fixed",
130-
backgroundSize: "cover",
131-
padding: "5rem 7rem",
132-
display: "flex",
133-
flexDirection: "column",
134-
justifyContent: "flex-end",
135-
alignItems: "center",
136-
}}
110+
// sx={{
111+
// zIndex: "2",
112+
// position: "relative",
113+
// width: "100%",
114+
// 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")`,
115+
// backgroundAttachment: "fixed",
116+
// backgroundSize: "cover",
117+
// padding: "5rem 7rem",
118+
// display: "flex",
119+
// flexDirection: "column",
120+
// justifyContent: "flex-end",
121+
// alignItems: "center",
122+
// }}
137123
>
138-
<img
124+
<Section4 />
125+
{/* <img
139126
src={`${process.env.PUBLIC_URL}/img/section4_workflow.png`}
140127
alt="workflow of the website"
141128
style={{
@@ -145,7 +132,7 @@ const Home: React.FC = () => {
145132
position: "relative",
146133
zIndex: "2",
147134
}}
148-
></img>
135+
></img> */}
149136
</Box>
150137

151138
<NodeInfoPanel

0 commit comments

Comments
 (0)