Skip to content

Commit f36c2fe

Browse files
prashantbhandaryprashantbhandary
authored
Merge pull request #27 from WRCRoboticsClub/dev-website-2.0
Dev website 2.0
2 parents f25abcc + cc87030 commit f36c2fe

12 files changed

Lines changed: 501 additions & 547 deletions

File tree

‎src/components/SingleAchievement.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@ import ShapePattern2 from "../assets/shape-pattern2.png";
55

66
function fixDriveUrl(url) {
77
if (!url) return "";
8-
9-
// Extract file ID from common Google Drive URL patterns
108
const idMatch = url.match(/(?:id=|\/d\/)([a-zA-Z0-9_-]+)/);
119
if (!idMatch) return url;
1210
const fileId = idMatch[1];
13-
14-
// Construct lh3.googleusercontent.com direct URL for image thumbnails
1511
return `https://lh3.googleusercontent.com/d/${fileId}=s0`;
1612
}
1713

18-
1914
function SingleAchievement({ infos, id, onShowDetails }) {
2015
const imageUrl = fixDriveUrl(infos.image[0]);
2116

@@ -27,7 +22,7 @@ function SingleAchievement({ infos, id, onShowDetails }) {
2722
{/* Left Portion */}
2823
<Box>
2924
<Heading sx={styles.heading}>{infos.title[0]}</Heading>
30-
<p style={{ fontSize: "20px", lineHeight: "1.5" }}>
25+
<p style={{ fontSize: "18px", lineHeight: "1.6", marginBottom: "12px", color: "#444" }}>
3126
{infos.desc[0].slice(0, 100)}...
3227
</p>
3328
<Button onClick={() => onShowDetails(infos)}>Show Details</Button>
@@ -37,7 +32,7 @@ function SingleAchievement({ infos, id, onShowDetails }) {
3732
sx={styles.imageBoxContainer}
3833
style={id % 2 ? { order: 1 } : { order: -1 }}
3934
>
40-
<Image src={imageUrl} style={{ width: "100%" }} />
35+
<Image src={imageUrl} sx={{ width: "100%", borderRadius: "8px", objectFit: "cover" }} />
4136
{id % 2 ? (
4237
<Box sx={styles.shapeBoxRight}>
4338
<Image src={ShapePattern2.src} alt="shape" />
@@ -59,47 +54,50 @@ export default SingleAchievement;
5954

6055
const styles = {
6156
imageBoxContainer: {
62-
objectFit: "cover",
6357
position: "relative",
6458
"@media screen and (max-width:500px)": {
6559
order: "-10 !important",
6660
},
6761
},
6862
gridContainer: {
6963
display: "grid",
70-
gridGap: 8,
71-
gridTemplateColumns: ["auto", "auto", "1fr 1fr"],
64+
gridGap: 4,
65+
gridTemplateColumns: ["1fr", null, "1fr 1fr"],
7266
alignItems: "center",
67+
gap: [3, 4],
7368
},
7469
heading: {
75-
fontSize: "40px",
70+
fontSize: ["26px", "32px", "36px", "40px"],
7671
fontWeight: "bold",
7772
textAlign: "left",
73+
mb: 2,
74+
color: "text",
7875
},
7976
banner: {
80-
pt: ["140px", "145px", "155px", "170px", null, null, "180px", "215px"],
81-
pb: [2, null, 0, null, 2, 0, null, 5],
77+
pt: ["100px", "120px", "140px", "160px", null, null, "180px", "200px"],
78+
pb: [3, 4, 5],
8279
position: "relative",
8380
zIndex: 2,
8481
container: {
8582
minHeight: "inherit",
86-
padding: "40px",
83+
px: [3, 4],
84+
py: [3, 4],
8785
maxWidth: "1200px",
8886
mx: "auto",
8987
},
9088
},
9189
shapeBoxLeft: {
9290
position: "absolute",
93-
bottom: -68,
94-
left: -160,
91+
bottom: -60,
92+
left: -140,
9593
zIndex: -1,
96-
display: ["none", null, "none", null, null, "inline-block"],
94+
display: ["none", null, "inline-block"],
9795
},
9896
shapeBoxRight: {
9997
position: "absolute",
100-
bottom: -65,
101-
right: -150,
98+
bottom: -60,
99+
right: -140,
102100
zIndex: -1,
103-
display: ["none", null, "none", null, null, "inline-block"],
101+
display: ["none", null, "inline-block"],
104102
},
105103
};

‎src/components/footer/Copyright.js‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default function Copyright() {
1414
<Text sx={styles.devName}>
1515
Managed By:
1616
<Link href="https://bhandari-prashant.com.np"> Prashant Bhandari </Link>
17-
1817
</Text>
1918
</Box>
2019
</Box>
@@ -27,47 +26,44 @@ const styles = {
2726
display: "flex",
2827
justifyContent: "center",
2928
alignItems: "center",
30-
height: "200px",
29+
minHeight: "150px",
3130
backgroundColor: "primary",
31+
px: [3, 4],
32+
py: [3, 4],
3233
},
3334
content: {
3435
display: "flex",
3536
flexDirection: "column",
3637
alignItems: "center",
38+
gap: "8px",
3739
},
3840
copyright: {
3941
display: "flex",
4042
alignItems: "center",
43+
gap: "8px",
4144
},
4245
text: {
43-
fontSize: [1, "15px"],
44-
width: "100%",
46+
fontSize: [1, 2],
4547
color: "white",
46-
fontWeight: "400",
47-
fontFamily: "Verdana,sans-serif",
48+
fontWeight: 400,
49+
fontFamily: "Verdana, sans-serif",
4850
},
4951
image: {
50-
width: "100px",
51-
height: "70px",
52+
width: ["60px", "80px"],
53+
height: "auto",
5254
},
5355
designer: {
5456
display: "flex",
5557
justifyContent: "center",
5658
alignItems: "center",
57-
// width: "500px",
5859
},
5960
devName: {
60-
fontSize: [1, "15px"],
61-
// width: "100%",
62-
padding: "10px",
61+
fontSize: [1, 2],
62+
padding: "6px 12px",
6363
color: "white",
64-
fontWeight: "400",
65-
fontFamily: "Verdana,sans-serif",
64+
fontWeight: 400,
65+
fontFamily: "Verdana, sans-serif",
6666
textTransform: "uppercase",
67+
letterSpacing: "0.5px",
6768
},
68-
// hr: {
69-
// width: "40%",
70-
// border: "none",
71-
// borderTop: "1px solid white",
72-
// },
7369
};

‎src/components/footer/footer.js‎

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function Footer() {
6262
</Box>
6363

6464
<Box sx={styles.contact}>
65-
<Text sx={styles.contact.title}>Contact Us</Text>
65+
<Text sx={styles.contact.title}>Contact Us </Text>
6666
<Text sx={styles.contact.email}>robotics@wrc.edu.np</Text>
6767
<Box sx={styles.contact.container}>
6868
{/* <Box sx={styles.contact.info}>
@@ -103,23 +103,23 @@ export default function Footer() {
103103
</>
104104
);
105105
}
106-
107106
const styles = {
108107
footer: {
109-
padding: "1rem",
110-
108+
padding: "1.5rem",
111109
footerBottomArea: {
112110
borderTop: "1px solid",
113111
borderTopColor: "border_color",
114112
display: "flex",
115-
pt: [7, null, 8],
116-
pb: ["40px", null, "100px"],
117-
textAlign: "center",
118113
flexDirection: "row",
119114
justifyContent: "space-between",
115+
pt: [6, null, 8],
116+
pb: ["40px", null, "80px"],
117+
textAlign: "center",
118+
gap: "20px",
120119

121120
"@media screen and (max-width:700px)": {
122121
flexDirection: "column",
122+
gap: "30px",
123123
},
124124
},
125125
menus: {
@@ -136,35 +136,36 @@ const styles = {
136136
display: "flex",
137137
alignItems: "center",
138138
justifyContent: "center",
139-
flexWrap: "wrap",
140139
flexDirection: "column",
140+
gap: "6px",
141141
},
142142
link: {
143143
fontSize: [1, "15px"],
144144
color: "text",
145145
fontWeight: "600",
146146
cursor: "pointer",
147-
transition: "all 0.35s",
147+
transition: "color 0.3s ease",
148148
display: "block",
149149
textDecoration: "underline",
150150
lineHeight: [1.5, null, 1.8],
151151
px: [2, null, 4],
152+
letterSpacing: ["1.2px", null, "1.5px"],
152153
":hover": {
153154
color: "primary",
154155
},
155-
156-
letterSpacing: ["1.5px", null, "2px"],
157156
},
158157
logo: {
159-
width: "150px",
160-
height: "60px",
158+
width: "140px",
159+
height: "auto",
160+
mb: 2,
161161
},
162162
},
163163
footerLink: {
164164
display: "flex",
165165
flexDirection: "column",
166-
justifyContent: "space-between",
167166
alignItems: "center",
167+
gap: "10px",
168+
168169
"@media screen and (max-width: 1024px)": {
169170
display: "none",
170171
},
@@ -174,78 +175,66 @@ const styles = {
174175
display: "flex",
175176
alignItems: "center",
176177
justifyContent: "center",
178+
gap: "15px",
177179

178180
icon: {
179181
display: "flex",
180182
alignItems: "center",
181183
justifyContent: "center",
182184
color: "text",
183-
fontSize: 25,
184-
mr: "15px",
185-
transition: "all 0.25s",
185+
fontSize: 26,
186+
transition: "color 0.3s ease, transform 0.3s ease",
186187
cursor: "pointer",
187-
":last-child": {
188-
mr: "0",
189-
},
190188
"&:hover": {
191189
color: "primary",
190+
transform: "scale(1.1)",
192191
},
193192
},
194193
},
195194
contact: {
196-
// padding: "1rem",
197-
// alignItems: "right",
198195
title: {
199-
fontSize: [1, "25px"],
196+
fontSize: [2, "22px"],
200197
color: "text",
201198
fontWeight: "500",
202-
fontFamily: "Roboto,sans-serif",
199+
fontFamily: "Roboto, sans-serif",
203200
mb: 2,
204-
cursor: "pointer",
205-
transition: "all 0.35s",
206-
display: "block",
207-
textDecoration: "none",
208201
},
209202
info: {
210203
display: "flex",
211204
alignItems: "center",
212205
justifyContent: "center",
213-
flexWrap: "wrap",
214206
flexDirection: "column",
207+
gap: "4px",
215208
px: [2, null, 4],
216209
},
217210
phone: {
218-
fontSize: [1, "17px", "20px"],
211+
fontSize: [1, "17px", "19px"],
219212
color: "primary",
220213
fontWeight: "700",
221-
fontFamily: "Verdana,sans-serif",
222-
mb: 2,
223-
cursor: "pointer",
214+
fontFamily: "Verdana, sans-serif",
224215
},
225216
email: {
226-
fontSize: [1, "27px"],
217+
fontSize: [1, "22px"],
227218
color: "primary",
228219
fontWeight: "700",
229-
fontFamily: "Verdana,sans-serif",
220+
fontFamily: "Verdana, sans-serif",
230221
mb: 2,
231-
cursor: "pointer",
232222
},
233223
subTitle: {
234224
fontSize: [0, "13px", null, "14px"],
235-
// color: "primary",
236225
textAlign: "center",
237-
letterSpacing: ["1.5px", null, "2px"],
226+
letterSpacing: ["1.2px", null, "1.5px"],
238227
textTransform: "uppercase",
239228
fontWeight: "600",
240-
mb: 2,
241-
lineHeight: 1.5,
229+
color: "text",
242230
},
243231
container: {
244232
display: "flex",
245233
alignItems: "center",
246234
justifyContent: "center",
235+
flexWrap: "wrap",
236+
gap: "20px",
247237
mt: [3, 4],
248238
},
249239
},
250240
};
251-

0 commit comments

Comments
 (0)