|
1 | | -import * as React from "react"; |
2 | | -import Founder from "./Founder"; |
3 | | -import { alpha } from "@mui/material"; |
4 | | -import Box from "@mui/material/Box"; |
5 | | -import Button from "@mui/material/Button"; |
6 | | -import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; |
7 | | -import Container from "@mui/material/Container"; |
8 | | -import Link from "@docusaurus/Link"; |
9 | | -import Stack from "@mui/material/Stack"; |
10 | | -import CustomDivider from "@site/src/components/CustomDivider"; |
11 | | -// import TextField from '@mui/material/TextField'; |
12 | | -import Typography from "@mui/material/Typography"; |
13 | | - |
14 | | -export default function Hero() { |
15 | | - const founderInfo = { |
16 | | - image: "/img/hero.png", // Replace with the actual image path or URL |
17 | | - bio: "Our mentors aren't just tech experts—they're industry leaders, innovators, and passionate advocates for open source collaboration. With years of experience and a deep commitment to empowering the next generation of tech heroes, they're the driving force behind our mission to revolutionize tech education in the northern region of Nigeria.", |
18 | | - experiences: [ |
19 | | - "Expertise: Our mentors bring a wealth of knowledge and expertise to the table, spanning a wide range of tech fields and disciplines", |
20 | | - "Dedication: They are deeply committed to guiding and supporting students, offering personalized mentorship and hands-on assistance.", |
21 | | - "Impact: Through their leadership and advocacy, our mentors are making a tangible impact on the world of technology, shaping the future of open source and inspiring the next generation of tech leaders.", |
22 | | - ], |
23 | | - }; |
24 | | - return ( |
25 | | - <Box |
26 | | - id="hero" |
27 | | - sx={(theme) => ({ |
28 | | - width: "100%", |
29 | | - backgroundImage: |
30 | | - theme.palette.mode === "light" |
31 | | - ? "linear-gradient(180deg, #97f0af, #FFF)" |
32 | | - : `linear-gradient(#02294F, ${alpha("#090E10", 0.0)})`, |
33 | | - backgroundSize: "100% 20%", |
34 | | - backgroundRepeat: "no-repeat", |
35 | | - })} |
36 | | - > |
37 | | - <Container |
38 | | - sx={{ |
39 | | - display: "flex", |
40 | | - flexDirection: "column", |
41 | | - alignItems: "center", |
42 | | - pt: { xs: 14, sm: 20 }, |
43 | | - pb: { xs: 8, sm: 12 }, |
44 | | - }} |
45 | | - > |
46 | | - <Stack spacing={2} useFlexGap sx={{ width: { xs: "100%", sm: "70%" } }}> |
47 | | - <Typography |
48 | | - component="span" |
49 | | - variant="h1" |
50 | | - sx={{ |
51 | | - display: "flex", |
52 | | - flexDirection: { xs: "column", md: "row" }, |
53 | | - alignSelf: "center", |
54 | | - textAlign: "center", |
55 | | - fontSize: "clamp(3rem, 10vw, 2rem)", |
56 | | - color: "success.main", |
57 | | - }} |
58 | | - > |
59 | | - Geek Ink |
60 | | - </Typography> |
61 | | - <Typography |
62 | | - component={motion.div} |
63 | | - initial={{ opacity: 0 }} |
64 | | - animate={{ opacity: 1 }} |
65 | | - transition={{ duration: 1, delay: 0.5 }} |
66 | | - textAlign="center" |
67 | | - color="text.secondary" |
68 | | - sx={{ alignSelf: "center", width: { sm: "100%", md: "80%" } }} |
69 | | - > |
70 | | - is here to bridge the gap for aspiring tech professionals in |
71 | | - northern Nigeria. We understand the unique challenges you face – |
72 | | - limited access to quality education, a focus on theory over |
73 | | - practical skills, and a lack of mentorship to navigate the industry. |
74 | | - </Typography> |
75 | | - <Stack |
76 | | - direction={{ xs: "column", sm: "row" }} |
77 | | - alignSelf="center" |
78 | | - spacing={1} |
79 | | - useFlexGap |
80 | | - sx={{ pt: 2, width: { xs: "100%", sm: "auto" } }} |
81 | | - > |
82 | | - <Button |
83 | | - variant="contained" |
84 | | - color="success" |
85 | | - component={Link} |
86 | | - to="/docs/intro" |
87 | | - > |
88 | | - Expore Courses |
89 | | - </Button> |
90 | | - </Stack> |
91 | | - <Typography |
92 | | - component={motion.div} |
93 | | - initial={{ opacity: 0 }} |
94 | | - animate={{ opacity: 1 }} |
95 | | - transition={{ duration: 1, delay: 1 }} |
96 | | - textAlign="center" |
97 | | - color="text.secondary" |
98 | | - sx={{ |
99 | | - pt: 3, |
100 | | - alignSelf: "center", |
101 | | - width: { sm: "100%", md: "80%" }, |
102 | | - }} |
103 | | - > |
104 | | - At Geek Ink, we believe in practical knowledge. Our courses are |
105 | | - project-based: learn by building. |
106 | | - </Typography> |
107 | | - </Stack> |
108 | | - <Stack> |
109 | | - <Box |
110 | | - sx={{ |
111 | | - pt: 4, |
112 | | - mb: 4, |
113 | | - display: "flex", |
114 | | - flexDirection: "column", |
115 | | - alignItems: "center", |
116 | | - justifyContent: "space-between", |
117 | | - width: "100%", |
118 | | - gap: 2, |
119 | | - "@media (min-width: 600px)": { |
120 | | - flexDirection: "row", |
121 | | - }, |
122 | | - }} |
123 | | - > |
124 | | - {["Skills", "Innovate", "Build"].map((text) => ( |
125 | | - <Stack |
126 | | - key={text} |
127 | | - direction="row" |
128 | | - spacing={2} |
129 | | - sx={{ alignSelf: "center", width: { xs: "100%", sm: "auto" } }} |
130 | | - > |
131 | | - <Typography |
132 | | - component="span" |
133 | | - variant="h1" |
134 | | - sx={{ |
135 | | - display: "flex", |
136 | | - flexDirection: { xs: "column", md: "row" }, |
137 | | - alignSelf: "center", |
138 | | - textAlign: "center", |
139 | | - fontSize: "clamp(3rem, 10vw, 2rem)", |
140 | | - color: "success.main", |
141 | | - }} |
142 | | - > |
143 | | - {text} |
144 | | - </Typography> |
145 | | - <CheckCircleOutlineIcon color="success" fontSize="large" /> |
146 | | - </Stack> |
147 | | - ))} |
148 | | - </Box> |
149 | | - {/* */} |
150 | | - {/* <Stack > */} |
151 | | - {/* <Box |
152 | | - sx={{ |
153 | | - display: 'flex', |
154 | | - flexDirection: 'column', |
155 | | - alignItems: 'center', |
156 | | - marginTop: 4, |
157 | | - width: '100%', |
158 | | - '@media (min-width: 600px)': { |
159 | | - flexDirection: 'row', |
160 | | - justifyContent: 'center', |
161 | | - }, |
162 | | - }} |
163 | | - > |
164 | | - <Typography |
165 | | - component="p" |
166 | | - variant="h6" |
167 | | - sx={{ |
168 | | - textAlign: 'center', |
169 | | - fontSize: 'clamp(1rem, 2vw, 1.5rem)', |
170 | | - color: 'text.success', |
171 | | - marginBottom: 2, |
172 | | - marginRight: 2, |
173 | | - }} |
174 | | - > |
175 | | - Subscribe to be notified about our new courses |
176 | | - </Typography> |
177 | | - <Box |
178 | | - component="form" |
179 | | - sx={{ |
180 | | - display: 'flex', |
181 | | - flexDirection: 'column', |
182 | | - alignItems: 'center', |
183 | | - gap: 2, |
184 | | - width: '100%', |
185 | | - '@media (min-width: 600px)': { |
186 | | - flexDirection: 'row', |
187 | | - width: 'auto', |
188 | | - }, |
189 | | - }} |
190 | | - > |
191 | | - <TextField |
192 | | - label="Email" |
193 | | - variant="outlined" |
194 | | - size="small" |
195 | | - sx={{ width: { xs: '100%', sm: 'auto' } }} |
196 | | - /> |
197 | | - <Button |
198 | | - variant="contained" |
199 | | - color="success" |
200 | | - sx={{ width: { xs: '100%', sm: 'auto' } }} |
201 | | - > |
202 | | - Subscribe |
203 | | - </Button> |
204 | | - </Box> |
205 | | - </Box> |
206 | | - </Stack> */} |
207 | | - {/* */} |
208 | | - <CustomDivider label="Meet Our Mentors" /> |
209 | | - <Box sx={{ width: "100%", mt: { xs: 8, sm: 12 } }}> |
210 | | - <Founder |
211 | | - image={founderInfo.image} |
212 | | - bio={founderInfo.bio} |
213 | | - experiences={founderInfo.experiences} |
214 | | - /> |
215 | | - </Box> |
216 | | - </Stack> |
217 | | - </Container> |
218 | | - </Box> |
219 | | - ); |
220 | | -} |
0 commit comments