Skip to content

Commit b41b5cf

Browse files
GurprankedGurpranked
authored
feat: Reorganized Info cards on landing page (#112)
1 parent 971a020 commit b41b5cf

File tree

4 files changed

+100
-89
lines changed

4 files changed

+100
-89
lines changed

‎src/cards_meta/cards_data.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
[
2+
{
3+
"header": "About Us",
4+
"content": "We are a student-led organization dedicated to exploring cloud computing and its applications through hands-on learning, projects, and industry connections.",
5+
"footerButton_link": "/docs/About Us",
6+
"footerButton_title": "See More"
7+
},
8+
{
9+
"header": "Join Us",
10+
"content": "Open to all UMass Lowell students, faculty, and staff. Join us at our weekly meetings to learn, build, and connect.",
11+
"footerButton_link": "https://discord.gg/WC2NdqYtDt",
12+
"footerButton_title": "Discord"
13+
},
14+
{
15+
"header": "Our Projects",
16+
"content": "We work on our various projects including UniPath.io, UniBot, the UML-Now-CLI, react mui resume, and more. Contribute and gain practical experience.",
17+
"footerButton_link": "/docs/projects",
18+
"footerButton_title": "Project Docs"
19+
},
20+
{
21+
"header": "Hands-On Learning",
22+
"content": "Engage in hands-on learning experiences with cloud computing technologies like AWS, Docker, Kubernetes, and more.",
23+
"footerButton_link": "/docs/resources",
24+
"footerButton_title": "Resources"
25+
},
26+
{
27+
"header": "Industry Connections",
28+
"content": "Connect with industry professionals through guest lectures, workshops, and networking events.",
29+
"footerButton_link": "/docs/current-schedule",
30+
"footerButton_title": "Meetings"
31+
},
32+
{
33+
"header": "Collaborative Work",
34+
"content": "Work on real-world projects and collaborate with peers to develop practical cloud computing skills.",
35+
"footerButton_link": "https://github.com/UMLCloudComputing",
36+
"footerButton_title": "Github"
37+
}
38+
]

‎src/components/PaperCard.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import Link from "@docusaurus/Link";
3+
4+
const PaperCard = ({ Header, Content, footerButtonLink, footerButtonTitle }) => (
5+
<div className="card papercard">
6+
<div className="card__header text--center">
7+
<h3>{Header}</h3>
8+
</div>
9+
<div className="card__body text--center">
10+
<p>
11+
{Content}
12+
</p>
13+
</div>
14+
<div className="card__footer">
15+
<Link className="button button--secondary button--block" to={footerButtonLink}>{footerButtonTitle}</Link>
16+
</div>
17+
</div>
18+
);
19+
20+
export default PaperCard;

‎src/css/custom.css

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,15 @@
5050
background-color: grey.800;
5151
}
5252

53+
/* PaperCard Styles */
54+
.papercard {
55+
min-height: 350px;
56+
}
57+
.papercard:hover {
58+
transform: scale(1.02);
59+
}
60+
61+
/* UniBot Hero Title Styles */
5362
[data-theme='dark'] .unibot_theme_hero_text {
5463
background: radial-gradient(circle, #7a37a4 0%, #ac4cc4 50%, rgb(191, 127, 223) 100%);
5564
-webkit-background-clip: text;
@@ -64,6 +73,7 @@
6473
color: transparent;
6574
}
6675

76+
/* Meeting Recording iframe styles */
6777
.meeting_recording_iframe {
6878
border:none;
6979
position: absolute;
@@ -99,16 +109,18 @@ html[data-theme='dark'] .navbar__github {
99109
color: #fff;
100110
}
101111

112+
.navbar__github:hover {
113+
background: var(--ifm-color-emphasis-200);
114+
}
115+
102116
footer {
103117
align-items: center;
104118
text-align: center;
105119
border-radius: 16px 16px 0px 0px;
106120
}
107121

108-
.navbar__github:hover {
109-
background: var(--ifm-color-emphasis-200);
110-
}
111122

123+
/* IFrame for UniBot on Landing Page */
112124
.iframe_container {
113125
display: flex;
114126
justify-content: center;

‎src/pages/index.js

Lines changed: 27 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,12 @@ import { createTheme,responsiveFontSizes } from '@mui/material';
2121
// Local
2222
import Layout from '@theme/Layout';
2323
import { ThemeProvider } from '@emotion/react';
24+
2425
import members from "../members_meta/members.json";
26+
import cards_data from "../cards_meta/cards_data.json";
27+
2528
import AvatarLarge from "../components/AvatarLarge";
29+
import PaperCard from '../components/PaperCard';
2630

2731
let theme = createTheme();
2832
theme = responsiveFontSizes(theme);
@@ -108,95 +112,33 @@ function HomepageHeader() {
108112
);
109113
}
110114

111-
const PaperCard = ({ Header, Content, footerButton }) => (
112-
<div class="card">
113-
<div class="card__header text--center">
114-
<h3>{Header}</h3>
115-
</div>
116-
<div class="card__body text--center">
117-
<p>
118-
{Content}
119-
</p>
120-
</div>
121-
<div class="card__footer">
122-
{footerButton}
123-
</div>
124-
</div>
125-
);
126-
127-
function ClubDetails() {
128-
129-
const Buttons = {
130-
'about us': <Link class="button button--secondary button--block" to="/docs/About Us">See More</Link>,
131-
'join us': <Link class="button button--secondary button--block" to="https://discord.gg/WC2NdqYtDt">Discord</Link>,
132-
'our projects': <Link class="button button--secondary button--block" to="/docs/projects">Project Docs</Link>,
133-
};
134-
135-
return (
136-
<Container sx={{ py: 4 }}>
137-
<Grid container spacing={4}>
138-
<Grid item xs={12} sm={4} >
139-
<PaperCard Header={"About Us"}
140-
Content={"We are a student-led organization dedicated to exploring cloud computing and its applications through hands-on learning, projects, and industry connections."}
141-
footerButton={Buttons['about us']} />
142-
</Grid>
143-
<Grid item xs={12} sm={4}>
144-
<PaperCard Header={"Join Us"}
145-
Content={"Open to all UMass Lowell students, faculty, and staff. Join us at our weekly meetings to learn, build, and connect."}
146-
footerButton={Buttons['join us']}/>
147-
</Grid>
148-
<Grid item xs={12} sm={4}>
149-
<PaperCard Header={"Our Projects"}
150-
Content={"We work on our various projects including UniPath.io, UniBot, the UML-Now-CLI, react mui resume, and more. Contribute and gain practical experience."}
151-
footerButton={Buttons['our projects']}/>
152-
</Grid>
153-
</Grid>
154-
</Container>
155-
);
156-
}
157-
158-
function HomepageFeatures() {
159-
const Buttons = {
160-
'resources': <Link class="button button--secondary button--block" to="/docs/resources">Resources</Link>,
161-
'meetings': <Link class="button button--secondary button--block" to="/docs/current-schedule" >Meetings</Link>,
162-
'collaborative projects': <Link class="button button--secondary button--block" to="https://github.com/UMLCloudComputing">Github</Link>,
163-
};
164-
115+
function InfoCards() {
165116
return (
166-
<Container sx={{ pb: 4 }}>
167-
<Grid container spacing={4}>
168-
<Grid item xs={12} sm={4}>
169-
<PaperCard Header={"Hands-On Learning"}
170-
Content={"Engage in hands-on learning experiences with cloud computing technologies like AWS, Docker, Kubernetes, and more."}
171-
footerButton={Buttons['resources']}/>
172-
</Grid>
173-
<Grid item xs={12} sm={4}>
174-
<PaperCard Header={"Industry Connections"}
175-
Content={"Connect with industry professionals through guest lectures, workshops, and networking events."}
176-
footerButton={Buttons['meetings']}/>
177-
</Grid>
178-
<Grid item xs={12} sm={4}>
179-
<PaperCard Header={"Collaborative Work"}
180-
Content={"Work on real-world projects and collaborate with peers to develop practical cloud computing skills."}
181-
footerButton={Buttons['collaborative projects']}/>
182-
</Grid>
117+
<Box wrap="nowrap" sx={{ display: 'block', overflowX: 'auto', py:6, pl: 4,
118+
'&::-webkit-scrollbar': {
119+
display: 'none',
120+
},
121+
'-ms-overflow-style': 'none', // IE and Edge
122+
'scrollbar-width': 'none', // Firefox
123+
}}>
124+
<Grid container spacing={4} wrap="nowrap">
125+
{cards_data.map((card, idx) => {
126+
return (
127+
<Grid item key={idx} sx={{ minWidth: '320px' }}>
128+
<PaperCard
129+
Header={card.header}
130+
Content={card.content}
131+
footerButtonLink={card.footerButton_link}
132+
footerButtonTitle={card.footerButton_title}
133+
/>
134+
</Grid>
135+
)
136+
})}
183137
</Grid>
184-
</Container>
138+
</Box>
185139
);
186140
}
187141

188-
// const AvatarLarge = ({ Image, Name, Subtitle }) =>(
189-
// <div class="avatar">
190-
// <img
191-
// class="avatar__photo avatar__photo--lg"
192-
// src={Image} />
193-
// <div class="avatar_intro">
194-
// <div class="avatar__name"> {Name} </div>
195-
// <small class="avatar__subtitle"> {Subtitle} </small>
196-
// </div>
197-
// </div>
198-
// );
199-
200142
function Members() {
201143
return (
202144
<Box wrap="nowrap" sx={{ display: 'block', overflowX: 'auto', py:6, pl: 4,
@@ -249,8 +191,7 @@ export default function Home() {
249191
<main>
250192
<Members />
251193
<LandingPageUniBotiFrame />
252-
<ClubDetails />
253-
<HomepageFeatures />
194+
<InfoCards/>
254195
</main>
255196
</Layout>
256197
);

0 commit comments

Comments
 (0)