Skip to content

Commit 5fbf6ff

Browse files
sathviknallamallisathviknallamalli
committed
about and navbar
1 parent 92daea1 commit 5fbf6ff

File tree

8 files changed

+603
-31
lines changed

8 files changed

+603
-31
lines changed

‎package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@
1010
"react-anchor-link-smooth-scroll": "^1.0.12",
1111
"react-collapsed": "^2.2.3",
1212
"react-collapsible": "^2.10.0",
13+
"react-countup": "^6.3.2",
1314
"react-dom": "^16.14.0",
1415
"react-player": "^1.15.3",
1516
"react-router": "^5.2.0",
1617
"react-router-dom": "^5.2.0",
1718
"react-scripts": "3.0.1",
1819
"react-slick": "^0.25.2",
20+
"react-visibility-sensor": "^5.1.1",
1921
"slick-carousel": "^1.8.1",
2022
"styled-components": "^5.3.6"
2123
},

‎src/js/about.jsx

Lines changed: 296 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,70 @@ import { about_body } from "./content.json";
55
// import clouds from "../svg/clouds.svg";
66
import hoover from "../svg/hoover.svg";
77
import Countdown from "./countdown.jsx";
8+
import CountUp, { useCountUp } from "react-countup";
9+
import styled from "styled-components";
10+
import VisibilitySensor from "react-visibility-sensor";
11+
import { GreenLeave } from "./new_images/greenleave";
12+
import { WhiteLeave } from "./new_images/whiteleave";
813

14+
const Button = styled.button`
15+
background: linear-gradient(86.93deg, #0ea5e9 2.37%, #f43f5e 106.02%);
16+
border-radius: 10px;
17+
color: white;
18+
border: transparent;
19+
cursor: pointer;
20+
padding: 15px;
21+
font-size: 15px;
22+
font-weight: 400;
23+
padding-left: 30px;
24+
padding-right: 30px;
25+
margin-top: 20px;
26+
font-family: Poppins;
27+
width: fit-content;
28+
&:hover {
29+
box-shadow: 0px 0px 15px 0px #e4e4e4;
30+
transform: scale(1.1);
31+
background-color: #fff;
32+
}
33+
transition: 0.2s all;
34+
`;
35+
36+
const LeaveWrapper = styled.div`
37+
transform: rotate(-70deg);
38+
height: fit-content;
39+
`;
40+
41+
const StatDiv = styled.div`
42+
&:hover {
43+
box-shadow: 0px 0px 15px 0px #e4e4e4;
44+
transform: scale(1.1);
45+
background-color: #fff;
46+
cursor: pointer;
47+
}
48+
width: "400px;
49+
transition: 0.2s all;
50+
`;
51+
52+
const StatItem = ({ count, tag, pos }) => {
53+
return (
54+
<div id={pos == 1 ? "statCard2" : "statCard1"}>
55+
<CountUp end={count} redraw={true} suffix="+">
56+
{({ countUpRef, start }) => (
57+
<VisibilitySensor onChange={start} delayedCall>
58+
<span
59+
id="statNum"
60+
style={{
61+
fontWeight: 600,
62+
}}
63+
ref={countUpRef}
64+
/>
65+
</VisibilitySensor>
66+
)}
67+
</CountUp>
68+
<h1 style={{ fontWeight: "400" }}>{tag}</h1>
69+
</div>
70+
);
71+
};
972
function About() {
1073
let videoURL = "https://player.vimeo.com/video/391854507";
1174
return (
@@ -17,14 +80,244 @@ function About() {
1780
<div>
1881
<p className="intro">{about_intro}</p>
1982
</div>
20-
<Countdown />
83+
<div style={{ margin: "10px", marginBottom: "30px" }}>
84+
<Countdown />
85+
</div>
86+
87+
<div style={{ display: "flex", justifyContent: "center" }}>
88+
<a href="https://form.typeform.com/to/LveQzGzn" target="_blank">
89+
<Button>Get notified </Button>
90+
</a>
91+
</div>
92+
2193
<div>
2294
<p className="body">{about_body}</p>
2395
</div>
2496

25-
<div className="about-video">
26-
<ReactPlayer controls="true" url={videoURL} height="100%" width="100%" />
97+
<h1 className="section-heading" style={{ color: "white" }}>
98+
numbers of treehacks
99+
</h1>
100+
101+
<div
102+
style={{
103+
position: "relative",
104+
display: "flex",
105+
flexDirection: "column",
106+
alignItems: "center",
107+
}}
108+
>
109+
<section>
110+
<div class="set">
111+
<div>
112+
<LeaveWrapper>
113+
<GreenLeave />
114+
</LeaveWrapper>
115+
</div>
116+
<div>
117+
<LeaveWrapper>
118+
<WhiteLeave />
119+
</LeaveWrapper>
120+
</div>
121+
<div>
122+
<LeaveWrapper>
123+
<GreenLeave />
124+
</LeaveWrapper>
125+
</div>
126+
<div>
127+
<LeaveWrapper>
128+
<WhiteLeave />
129+
</LeaveWrapper>
130+
</div>
131+
<div>
132+
<LeaveWrapper>
133+
<GreenLeave />
134+
</LeaveWrapper>
135+
</div>
136+
<div>
137+
<LeaveWrapper>
138+
<WhiteLeave />
139+
</LeaveWrapper>
140+
</div>
141+
<div>
142+
<LeaveWrapper>
143+
<GreenLeave />
144+
</LeaveWrapper>
145+
</div>
146+
<div>
147+
<LeaveWrapper>
148+
<WhiteLeave />
149+
</LeaveWrapper>
150+
</div>
151+
</div>
152+
<div class="set set2">
153+
<div>
154+
<LeaveWrapper>
155+
<WhiteLeave />
156+
</LeaveWrapper>
157+
</div>
158+
<div>
159+
<LeaveWrapper>
160+
<GreenLeave />
161+
</LeaveWrapper>
162+
</div>
163+
<div>
164+
<LeaveWrapper>
165+
<WhiteLeave />
166+
</LeaveWrapper>
167+
</div>
168+
<div>
169+
<LeaveWrapper>
170+
<GreenLeave />
171+
</LeaveWrapper>
172+
</div>
173+
<div>
174+
<LeaveWrapper>
175+
<WhiteLeave />
176+
</LeaveWrapper>
177+
</div>
178+
<div>
179+
<LeaveWrapper>
180+
<GreenLeave />
181+
</LeaveWrapper>
182+
</div>
183+
<div>
184+
<LeaveWrapper>
185+
<WhiteLeave />
186+
</LeaveWrapper>
187+
</div>
188+
<div>
189+
<LeaveWrapper>
190+
<GreenLeave />
191+
</LeaveWrapper>
192+
</div>
193+
</div>
194+
<div class="set set3">
195+
<div>
196+
<LeaveWrapper>
197+
<GreenLeave />
198+
</LeaveWrapper>
199+
</div>
200+
<div>
201+
<LeaveWrapper>
202+
<WhiteLeave />
203+
</LeaveWrapper>
204+
</div>
205+
<div>
206+
<LeaveWrapper>
207+
<GreenLeave />
208+
</LeaveWrapper>
209+
</div>
210+
<div>
211+
<LeaveWrapper>
212+
<WhiteLeave />
213+
</LeaveWrapper>
214+
</div>
215+
<div>
216+
<LeaveWrapper>
217+
<GreenLeave />
218+
</LeaveWrapper>
219+
</div>
220+
<div>
221+
<LeaveWrapper>
222+
<WhiteLeave />
223+
</LeaveWrapper>
224+
</div>
225+
<div>
226+
<LeaveWrapper>
227+
<GreenLeave />
228+
</LeaveWrapper>
229+
</div>
230+
<div>
231+
<LeaveWrapper>
232+
<WhiteLeave />
233+
</LeaveWrapper>
234+
</div>
235+
</div>
236+
</section>
237+
<div
238+
style={{
239+
position: "absolute",
240+
}}
241+
>
242+
<div id="statRow">
243+
<StatItem count={250000} tag="in prizes and awards" pos={2} />
244+
<StatItem count={36} tag="hours of hacking" pos={1} />
245+
<StatItem count={1000} tag="hackers in attendance" pos={2} />
246+
</div>
247+
<div id="statRow">
248+
<StatItem
249+
count={50}
250+
tag="universities represented all over the world"
251+
pos={1}
252+
/>
253+
<StatItem
254+
count={100}
255+
tag="qualified industry-level mentors"
256+
pos={2}
257+
/>
258+
</div>
259+
<div id="statRow">
260+
<StatItem count={200} tag="projects submitted" pos={1} />
261+
<StatItem count={20} tag="countries represented" pos={2} />
262+
<StatItem count={60} tag="companies partnered" pos={1} />
263+
</div>
264+
</div>
265+
</div>
266+
267+
<div id="wrapper">
268+
<div id="floatingLeaves">
269+
{/* <LeaveWrapper style={{ marginLeft: "-180px", marginTop: "-20px" }}>
270+
<GreenLeave />
271+
</LeaveWrapper>
272+
<LeaveWrapper style={{ marginLeft: "790px", marginTop: "120px" }}>
273+
<WhiteLeave />
274+
</LeaveWrapper>
275+
<LeaveWrapper style={{ marginLeft: "10px", marginTop: "-20px" }}>
276+
<GreenLeave />
277+
</LeaveWrapper> */}
278+
</div>
279+
280+
<div id="statWrapper">
281+
{/* <div id="statRow">
282+
<StatItem count={250000} tag="in prizes and awards" pos={2} />
283+
<StatItem count={36} tag="hours of hacking" pos={1} />
284+
<StatItem count={1000} tag="hackers in attendance" pos={2} />
285+
</div>
286+
<div id="statRow">
287+
<StatItem
288+
count={50}
289+
tag="universities represented all over the world"
290+
pos={1}
291+
/>
292+
<StatItem
293+
count={100}
294+
tag="qualified industry-level mentors"
295+
pos={2}
296+
/>
297+
</div>
298+
<div id="statRow">
299+
<StatItem count={200} tag="projects submitted" pos={1} />
300+
<StatItem count={20} tag="countries represented" pos={2} />
301+
<StatItem count={60} tag="companies partnered" pos={1} />
302+
</div> */}
303+
</div>
27304
</div>
305+
306+
{/* <h1
307+
className="section-heading"
308+
style={{ color: "white", marginTop: "100px", position: "fixed" }}
309+
>
310+
why treehacks?
311+
</h1> */}
312+
313+
{/* <div className="about-video">
314+
<ReactPlayer
315+
controls="true"
316+
url={videoURL}
317+
height="100%"
318+
width="100%"
319+
/>
320+
</div> */}
28321
</div>
29322
</div>
30323
);

0 commit comments

Comments
 (0)