Skip to content

Commit 39854cb

Browse files
mildrettemildrette
committed
redesign: update Landing, About, Projects, Partner, Footer UI and add Research section
1 parent 22b8c7c commit 39854cb

7 files changed

Lines changed: 1689 additions & 822 deletions

File tree

‎src/Components/About.js‎

Lines changed: 249 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,262 @@
1-
import React from "react";
1+
import React, { useEffect, useRef } from "react";
22
import { Box, Typography } from "@mui/material";
33
import { useTranslation } from "react-i18next";
44
import parse from "html-react-parser";
55
import { useTheme } from "../Context/ThemeContext";
66

7+
function useReveal() {
8+
const ref = useRef(null);
9+
useEffect(() => {
10+
const el = ref.current;
11+
if (!el) return;
12+
const observer = new IntersectionObserver(
13+
([entry]) => {
14+
if (entry.isIntersecting) {
15+
el.style.opacity = "1";
16+
el.style.transform = "translateY(0)";
17+
observer.disconnect();
18+
}
19+
},
20+
{ threshold: 0.15 }
21+
);
22+
observer.observe(el);
23+
return () => observer.disconnect();
24+
}, []);
25+
return ref;
26+
}
27+
728
export default function FlexRowTwoColumns() {
8-
const { t, i18n } = useTranslation();
9-
const isFarsi = i18n.language === "fa";
10-
const { mode } = useTheme();
29+
const { t, i18n } = useTranslation();
30+
const isFarsi = i18n.language === "fa";
31+
const { mode } = useTheme();
32+
33+
const isLight = mode === "light";
34+
35+
const ref1 = useReveal();
36+
const ref2 = useReveal();
37+
const ref3 = useReveal();
38+
const ref4 = useReveal();
39+
40+
const revealStyle = {
41+
opacity: 0,
42+
transform: "translateY(32px)",
43+
transition: "opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1)",
44+
};
45+
46+
return (
47+
<Box
48+
sx={{
49+
fontFamily: "'Ubuntu', 'Roboto'",
50+
background: isLight
51+
? "linear-gradient(135deg, #071f74ff 100%)"
52+
: "linear-gradient(135deg, #041459 2%, #071f74ff 100%)",
53+
direction: isFarsi ? "rtl" : "ltr",
54+
position: "relative",
55+
overflow: "hidden",
56+
px: { xs: 3, sm: 6, md: 10 },
57+
py: { xs: 7, sm: 10, md: 14 },
58+
overflow: "hidden",
59+
}}
60+
>
61+
1162

12-
const textColor = mode === "light" ? "#EEF2FF" : "#FFFFFF";
13-
const textSub = mode === "light" ? "#D1D1D6" : "#E4E4E7";
14-
const Sub = mode === "light" ? "#F4F4F5" : "#D1D1D6";
63+
<Box sx={{
64+
position: "absolute", inset: 0,
65+
backgroundImage: "radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)",
66+
backgroundSize: "32px 32px",
67+
pointerEvents: "none",
68+
}} />
1569

16-
return (
17-
<Box
70+
<Box
71+
ref={ref1}
72+
style={revealStyle}
73+
sx={{ mb: { xs: 8, md: 10 }, textAlign: "center" }}
74+
>
75+
<Box
1876
sx={{
19-
fontFamily: "'Ubuntu', 'Roboto'",
20-
p: { xs: 2, sm: 4 },
21-
background: "linear-gradient(135deg, #071f74f0 2%, #071f74ff 100%)",
22-
direction: isFarsi ? "rtl" : "ltr",
77+
display: "inline-flex",
78+
alignItems: "center",
79+
gap: 1.5,
80+
mb: 2.5,
2381
}}
24-
>
82+
>
2583
<Box
26-
sx={{
27-
textAlign: "center",
28-
pb: 6,
29-
px: { xs: 2, sm: 4, md: 6 },
30-
}}
84+
sx={{
85+
width: 28,
86+
height: "1.5px",
87+
bgcolor: isLight ? "#eef0f6" : "#FFB800",
88+
}}
89+
/>
90+
<Typography
91+
sx={{
92+
fontSize: "0.72rem",
93+
fontWeight: 700,
94+
letterSpacing: "0.18em",
95+
textTransform: "uppercase",
96+
color: isLight ? "#f3f5fb" : "#FFB800",
97+
fontFamily: "'Ubuntu', 'Roboto'",
98+
}}
3199
>
32-
<Typography
33-
variant="h2"
34-
sx={{
35-
fontWeight: 400,
36-
fontSize: { xs: "1.3rem", sm: "1.3rem", md: "2rem" },
37-
lineHeight: 1.3,
38-
mt: 2,
39-
color: textColor,
40-
textAlign: "center",
41-
fontFamily: "'Ubuntu', 'Roboto'",
42-
}}
43-
>
44-
{t("About.AboutHeader", { defaultValue: "Explore SMSWithoutBorders" })}
45-
</Typography>
46-
</Box>
47-
100+
Our Projects
101+
</Typography>
48102
<Box
49-
sx={{
50-
display: "flex",
51-
flexDirection: { xs: "column", sm: "row" },
52-
gap: { xs: 2, sm: 4 },
53-
mb: 4,
54-
fontWeight: 200,
55-
}}
56-
>
57-
<Box
58-
sx={{
59-
flex: 1,
60-
p: { xs: 1, sm: 2 },
61-
textAlign: isFarsi ? "right" : "justify",
62-
}}
63-
>
64-
<Typography
65-
variant="body1"
66-
component="p"
67-
sx={{
68-
fontFamily: "'Roboto', 'Ubuntu'",
69-
display: "inline-block",
70-
fontWeight: 300,
71-
fontSize: { xs: "1rem", sm: "1rem", md: "1.2rem" },
72-
color: Sub,
73-
position: "relative",
74-
mt: 1,
75-
}}
76-
>
77-
<p>{t("About.description", { defaultValue: "SMSWithoutBorders(SWOB) is dedicated to researching, developing and promoting secure and accessible communication tools that function even without an internet connection." })}</p>
78-
</Typography>
79-
</Box>
80-
81-
<Box
82-
sx={{
83-
flex: 1,
84-
p: { xs: 1, sm: 2 },
85-
textAlign: isFarsi ? "right" : "justify",
86-
}}
87-
>
88-
<Typography
89-
variant="body1"
90-
component="p"
91-
sx={{
92-
fontFamily: "'Roboto', 'Ubuntu'",
93-
display: "inline-block",
94-
fontWeight: 300,
95-
fontSize: { xs: "1rem", sm: "1rem", md: "1.2rem" },
96-
color: Sub,
97-
position: "relative",
98-
mt: 1,
99-
}}
100-
>
101-
<p>{t("About.description1", { defaultValue: "The development includes mobile apps for various platforms such as Android, iOS and Linux systems. Some of the work also includes white papers on topics such as cryptography, communications and internet freedom." })}</p>
102-
<p>{t("About.description2", { defaultValue: "Our journey toward achieving our mission began in 2021 with the development of the first Android version of RelaySMS. We have come far since then, with support for more platforms and many more apps." })}</p>
103-
</Typography>
104-
</Box>
105-
</Box>
106-
107-
<Box sx={{ p: 2 }}>
108-
<Typography
109-
variant="body1"
110-
component="p"
111-
sx={{
112-
display: "inline-block",
113-
fontWeight: 300,
114-
fontSize: { xs: "1rem", sm: "1rem", md: "1.2rem" },
115-
color: Sub,
116-
position: "relative",
117-
mt: 1,
118-
lineHeight: 1.6,
119-
fontFamily: "'Ubuntu', 'Roboto'",
120-
"& a": {
121-
color: "inherit",
122-
textDecoration: "underline",
123-
textUnderlineOffset: "2px",
124-
transition: "color 0.3s ease",
125-
"&:hover": {
126-
color: "#dda406ff",
127-
},
128-
},
129-
}}
130-
>
131-
{parse(
132-
t("About.description3", {
133-
defaultValue:
134-
"We publish our research as frequently as possible on our blog and make announcements via our social media outlets. SMSWithoutBorders is a project started by the team at <a href='https://Afkanerd.com' class='afkanerd'>Afkanerd</a>."
135-
})
136-
)}
137-
</Typography>
138-
</Box>
139-
</Box>
140-
);
141-
}
103+
sx={{
104+
width: 28,
105+
height: "1.5px",
106+
bgcolor: isLight ? "#ecedf4" : "#FFB800",
107+
}}
108+
/>
109+
</Box>
110+
111+
112+
<Typography
113+
variant="h2"
114+
sx={{
115+
fontWeight: 700,
116+
fontSize: { xs: "1.9rem", sm: "2.4rem", md: "3rem" },
117+
lineHeight: 1.12,
118+
color: "#FFFFFF",
119+
fontFamily: "'Ubuntu', 'Roboto'",
120+
letterSpacing: "-0.02em",
121+
mb: 2,
122+
}}
123+
>
124+
{t("About.AboutHeader", { defaultValue: "Explore SMSWithoutBorders" })}
125+
</Typography>
126+
127+
</Box>
128+
129+
130+
<Box
131+
sx={{
132+
display: "grid",
133+
gridTemplateColumns: { xs: "1fr", md: "1fr 1px 1fr" },
134+
gap: { xs: 5, md: 0 },
135+
mb: { xs: 6, md: 10 },
136+
alignItems: "start",
137+
}}
138+
>
139+
140+
<Box
141+
ref={ref2}
142+
style={{ ...revealStyle, transitionDelay: "0.12s" }}
143+
sx={{ pr: { md: 6 } }}
144+
>
145+
<Typography
146+
variant="body1"
147+
sx={{
148+
fontFamily: "'Ubuntu', 'Roboto'",
149+
fontWeight: 300,
150+
fontSize: { xs: "1.05rem", md: "1.15rem" },
151+
color: "rgba(255,255,255,0.80)",
152+
lineHeight: 1.85,
153+
textAlign: isFarsi ? "right" : "left",
154+
}}
155+
>
156+
{t("About.description", {
157+
defaultValue:
158+
"SMSWithoutBorders (SWOB) is dedicated to researching, developing and promoting secure and accessible communication tools that function even without an internet connection.",
159+
})}
160+
</Typography>
161+
</Box>
162+
163+
164+
<Box sx={{
165+
display: { xs: "none", md: "block" },
166+
bgcolor: "rgba(255,255,255,0.10)",
167+
mx: "auto",
168+
width: "1px",
169+
height: "100%",
170+
minHeight: 120,
171+
}} />
172+
173+
174+
<Box
175+
ref={ref3}
176+
style={{ ...revealStyle, transitionDelay: "0.24s" }}
177+
sx={{ pl: { md: 6 } }}
178+
>
179+
<Typography
180+
variant="body1"
181+
sx={{
182+
fontFamily: "'Ubuntu', 'Roboto'",
183+
fontWeight: 300,
184+
fontSize: { xs: "1.05rem", md: "1.15rem" },
185+
color: "rgba(255,255,255,0.80)",
186+
lineHeight: 1.85,
187+
textAlign: isFarsi ? "right" : "left",
188+
mb: 3,
189+
}}
190+
>
191+
{t("About.description1", {
192+
defaultValue:
193+
"The development includes mobile apps for various platforms such as Android, iOS and Linux systems. Some of the work also includes white papers on topics such as cryptography, communications and internet freedom.",
194+
})}
195+
</Typography>
196+
<Typography
197+
variant="body1"
198+
sx={{
199+
fontFamily: "'Ubuntu', 'Roboto'",
200+
fontWeight: 300,
201+
fontSize: { xs: "1.05rem", md: "1.15rem" },
202+
color: "rgba(255,255,255,0.80)",
203+
lineHeight: 1.85,
204+
textAlign: isFarsi ? "right" : "left",
205+
}}
206+
>
207+
{t("About.description2", {
208+
defaultValue:
209+
"Our journey toward achieving our mission began in 2021 with the development of the first Android version of RelaySMS. We have come far since then, with support for more platforms and many more apps.",
210+
})}
211+
</Typography>
212+
</Box>
213+
</Box>
214+
215+
216+
<Box
217+
ref={ref4}
218+
style={{ ...revealStyle, transitionDelay: "0.36s" }}
219+
sx={{
220+
borderTop: "1px solid rgba(255,255,255,0.10)",
221+
pt: { xs: 4, md: 6 },
222+
display: "flex",
223+
flexDirection: { xs: "column", sm: "row" },
224+
alignItems: { xs: "flex-start", sm: "center" },
225+
gap: 3,
226+
}}
227+
>
228+
229+
230+
231+
<Typography
232+
variant="body1"
233+
sx={{
234+
fontFamily: "'Ubuntu', 'Roboto'",
235+
fontWeight: 300,
236+
fontSize: { xs: "1rem", md: "1.1rem" },
237+
color: "rgba(255,255,255,0.65)",
238+
lineHeight: 1.8,
239+
"& a": {
240+
color: "#f3831a",
241+
textDecoration: "none",
242+
borderBottom: "1px solid rgba(255,184,0,0.35)",
243+
paddingBottom: "1px",
244+
transition: "border-color 0.2s, color 0.2s",
245+
"&:hover": {
246+
color: "#ca6303",
247+
borderBottomColor: "#f18b2c",
248+
},
249+
},
250+
}}
251+
>
252+
{parse(
253+
t("About.description3", {
254+
defaultValue:
255+
"We publish our research as frequently as possible on our blog and make announcements via our social media outlets. SMSWithoutBorders is a project started by the team at <a href='https://Afkanerd.com' class='afkanerd'>Afkanerd</a>.",
256+
})
257+
)}
258+
</Typography>
259+
</Box>
260+
</Box>
261+
);
262+
}

0 commit comments

Comments
 (0)