Skip to content

Commit a192064

Browse files
Domin0deDomin0de
authored
Merge pull request #33 from csesoc/CW2-46-redesign-about-section-on-landing-page
[CW2-46] redesign about section on landing page
2 parents 1c27673 + 1512a2b commit a192064

File tree

7 files changed

+257
-31
lines changed

7 files changed

+257
-31
lines changed

Diff for: ‎frontend/package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎frontend/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"autoprefixer": "10.4.15",
2121
"axios": "^1.7.2",
2222
"eslint-config-next": "13.4.19",
23-
"framer-motion": "^11.1.2",
23+
"framer-motion": "^11.2.13",
2424
"next": "13.4.12",
2525
"postcss": "8.4.29",
2626
"react": "18.2.0",

Diff for: ‎frontend/src/components/About/AboutHomepage.tsx

+35-18
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,48 @@ export default function AboutHomePage() {
99
<div className="flex justify-center items-center">
1010
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
1111
{/* LEFT SIDE */}
12+
{/* NOTE: there is slightly altered from about/index.tsx */}
1213
<div className="col-span-2 md:mx-5">
1314
<div className="flex items-center justify-center">
1415
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
1516
</div>
16-
<h2 className="text-3xl font-extrabold">CSESoc</h2>
17-
<button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
17+
<h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2>
18+
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
19+
<div className="my-4 flex gap-5">
20+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
21+
<div>
22+
16k <span className="text-[#727B8C]">members</span> · 146{' '}
23+
<span className="text-[#727B8C]">internal members</span>
24+
</div>
25+
</div>
26+
<div className="my-4 flex gap-5">
27+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
28+
Sydney, Australia
29+
</div>
30+
<div className="flex gap-5">
31+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
32+
<a href="mailto:[email protected]" className="hover:underline">[email protected]</a>
33+
</div>
1834
</div>
1935
{/* RIGHT SIDE */}
2036
<div className="col-span-4 lg:mt-0 mt-10">
21-
<div className="rounded border border-[#595F6D] p-5 h-auto">
22-
<p className="text-xs">
23-
csesoc/README<span className="text-[#7A8192]">.md</span>
24-
</p>
25-
<p className="mt-5">
26-
CSESoc is one of the biggest and most active societies at UNSW, catering to over 3500 CSE
27-
students spanning across degrees in Computer Science, Software Engineering,
28-
Bioinformatics and Computer Engineering.
29-
<br/><br/>
30-
We are here to fulfil the social, personal and
31-
professional needs of CSE students, and promote computing through a variety of forms.
32-
<br/><br/>
33-
Learn more <a href="/about" className="text-[#3977F9]">about us!</a>
34-
</p>
35-
36-
</div>
37+
<p className="text-2xl">
38+
We are one of the largest and most active societies at UNSW, and {" "}
39+
<span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>.
40+
<br/><br/>
41+
CSESoc comprises {" "}
42+
<span className="font-bold text-[#3977F8]">over 16k members</span>
43+
{" "}spanning across various degrees including Computer Science,
44+
Software Engineering, Bioinformatics and Computer Engineering.
45+
<br/><br/>
46+
We are here to fulfil the social, personal and professional needs of CSE students,
47+
and promote computing through a variety of forms.
48+
</p>
49+
<a href="about">
50+
<button className="mt-16 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate mx-auto block">
51+
Find out more
52+
</button>
53+
</a>
3754
</div>
3855
</div>
3956
</div>

Diff for: ‎frontend/src/components/Event/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ const Event = () => {
1111
listings, check out the CSESoc Discord or our Facebook page!
1212
</p>
1313
<a href="events">
14-
<button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate">
15-
See all events
16-
</button>
17-
</a>
14+
<button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate">
15+
See all events
16+
</button>
17+
</a>
1818
</div>
1919
<div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
2020
</div>

Diff for: ‎frontend/src/components/Sponsors/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Sponsors = () => {
1919
<div className="flex justify-center items-center">
2020
<a href="sponsors">
2121
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
22-
Learn More
22+
See all sponsors
2323
</button>
2424
</a>
2525
</div>

Diff for: ‎frontend/src/components/Stats.tsx

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import Image from 'next/image';
2+
import { motion, useAnimationControls } from "framer-motion"
3+
import { useEffect } from 'react';
4+
5+
const Stats = () => {
6+
const r = 80;
7+
const controls = useAnimationControls()
8+
9+
const progress = {
10+
hidden: { pathLength: 0, opacity: 0 },
11+
visible: {
12+
pathLength: 0.7,
13+
opacity: 1,
14+
transition: {
15+
pathLength: { type: "spring", duration: 1.5, bounce: 0 },
16+
opacity: { duration: 0.05 }
17+
}
18+
}
19+
}
20+
21+
useEffect(() => {
22+
controls.start("hidden")
23+
controls.start("visible")
24+
controls.stop();
25+
}, []);
26+
27+
const revert = async() => {
28+
await controls.start("hidden")
29+
return await controls.start("visible")
30+
}
31+
32+
return (
33+
<div className="w-full">
34+
<div className="flex flex-col justify-center align-middle items-center relative grow w-full py-12">
35+
<Image className="z-10" src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
36+
<motion.svg
37+
className="absolute" width={200} height={200}
38+
style={{transform: "rotate(270deg)", top: "1.4rem"}}
39+
initial="hidden"
40+
animate={controls}
41+
>
42+
<motion.circle
43+
r={r}
44+
cx={100}
45+
cy={100}
46+
fill="transparent"
47+
stroke="#444F6F"
48+
strokeWidth={"0.75rem"}
49+
strokeLinecap="round"
50+
/>
51+
<motion.circle
52+
r={r}
53+
cx={100}
54+
cy={100}
55+
fill="transparent"
56+
stroke="rgb(248 250 252)"
57+
strokeWidth={"0.75rem"}
58+
strokeLinecap="round"
59+
variants={progress}
60+
/>
61+
</motion.svg>
62+
<h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
63+
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
64+
<div className="mt-14 mb-2 flex gap-2 flex-1 grow w-full">
65+
<div className="flex flex-col flex-1 gap-0 bg-slate-50 px-3 py-1 rounded-md text-right hover:cursor-pointer"
66+
onClick={() => {revert()}}>
67+
<Image className='ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
68+
<span className="text-[#727B8C] text-6xl leading-3 py-4 pb-6">433</span>
69+
<span className="text-[#727B8C] text-sm py-1 ">total members</span>
70+
</div>
71+
<div className="group flex flex-col flex-1 gap-0 bg-[#444F6F] hover:bg-slate-50 px-3 py-1 rounded-md text-right hover:cursor-pointer transition-all hover:text-[#444F6F]"
72+
onClick={() => {revert()}}>
73+
<Image className='text-white group-hover:text-[#727B8C] ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
74+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6 group-hover:text-[#727B8C]">53</span>
75+
<span className="text-[#ffffff] text-sm py-1 group-hover:text-[#727B8C]">events held</span>
76+
</div>
77+
<div className="flex flex-col flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right hover:cursor-pointer"
78+
onClick={() => {revert()}}>
79+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
80+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">343</span>
81+
<span className="text-[#ffffff] text-sm py-1 ">subcom</span>
82+
</div>
83+
<div className="flex flex-col flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right hover:cursor-pointer"
84+
onClick={() => {revert()}}>
85+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
86+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">343</span>
87+
<span className="text-[#ffffff] text-sm py-1 ">subcom</span>
88+
</div>
89+
{/* <div className="flex flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right">
90+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">53</span>
91+
<div className="flex flex-col text-left">
92+
<Image className='text-white pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
93+
<span className="text-[#ffffff] text-sm py-1 ">held</span>
94+
</div>
95+
</div>
96+
<div className="flex gap-2 bg-slate-50 px-3 py-1 rounded-md">
97+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
98+
<span className="text-[#727B8C]">300 subcom</span>
99+
</div>
100+
<div className="flex gap-2 bg-slate-50 px-3 py-1 rounded-md">
101+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
102+
<span className="text-[#727B8C]">52 events held</span>
103+
</div>*/}
104+
</div>
105+
{/* <div className="flex flex-1 gap-0 bg-[#444F6F] px-3 py-1 rounded-md text-right">
106+
<div>
107+
<Image className="z-10" src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
108+
</div>
109+
<div className="flex flex-col">
110+
<Image className='text-white ml-auto pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
111+
<span className="text-[#ffffff] text-6xl leading-3 py-4 pb-6">53</span>
112+
<span className="text-[#ffffff] text-sm py-1 ">events held</span>
113+
</div>
114+
115+
</div>*/}
116+
{/* <div className="my-4 flex gap-5">
117+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
118+
Sydney, Australia
119+
</div>
120+
<div className="flex gap-5">
121+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
122+
[email protected]
123+
</div>
124+
125+
<div className="w-72 font-semibold text-xl lg:block hidden">
126+
<p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
127+
<hr className="mb-3 mt-5" />
128+
<div className="flex justify-between">
129+
<p>323,000</p>
130+
<p>Members</p>
131+
</div>
132+
<div className="flex justify-between">
133+
<p>300</p>
134+
<p>Team Members</p>
135+
</div>
136+
<div className="flex justify-between">
137+
<p>52</p>
138+
<p>Events held</p>
139+
</div>
140+
</div>*/}
141+
142+
</div>
143+
<div className="flex flex-col pb-14">
144+
<div className="flex flex-col">
145+
<div className="flex text-left">
146+
<Image className='pb-1 ml-5' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
147+
<span className="ml-3">CSESoc is the principal representative body for UNSW computing students.</span>
148+
</div>
149+
<div className="my-4 flex">
150+
<Image className="ml-5" src="/assets/location_icon.svg" alt="Location" width={17} height={17} />
151+
<span className="ml-4">Sydney, Australia</span>
152+
</div>
153+
<div className="flex">
154+
<Image className="ml-5" src="/assets/mail_icon.svg" alt="Mail" width={17} height={17} />
155+
<span className="ml-4">[email protected]</span>
156+
</div>
157+
</div>
158+
</div>
159+
160+
<div className="flex flex-col gap-4">
161+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
162+
<div className="flex flex-col">
163+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
164+
csesoc/README<span className="text-[#7A8192]">.md</span>
165+
</p>
166+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
167+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>CSESoc is one of the biggest and most active societies at</span><br/>
168+
2 &ensp;&ensp;UNSW, catering to over 3500 CSE students spanning across<br/>
169+
3 &ensp;&ensp;degrees in Computer Science, Software Engineering,<br/>
170+
4 &ensp;&ensp;Bioinformatics and Computer Engineering.
171+
<br/><br/>
172+
5 &ensp;&ensp;We are here to fulfil the social, personal and professional<br/>
173+
6 &ensp;&ensp;needs of CSE students, and promote computing through a<br/>
174+
7 &ensp;&ensp;variety of forms.
175+
</p>
176+
</div>
177+
<div>
178+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
179+
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm11.5 1a.5.5 0 0 0-.5.5v3.793L9.854 8.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L12 9.293V5.5a.5.5 0 0 0-.5-.5M3.56 7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/>
180+
</svg>
181+
</div>
182+
</div>
183+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
184+
<div className="flex flex-col">
185+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
186+
execs-directors-subcoms<span className="text-[#7A8192]">.md</span>
187+
</p>
188+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
189+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>100+ events (35+ careers related revents)</span><br/>
190+
2 &ensp;&ensp;41 sponsors<br/>
191+
3 &ensp;&ensp;480 000 discord messages<br/>
192+
4 &ensp;&ensp;200+ volunteers.<br/>
193+
5 &ensp;&ensp;Tiktok: 27.2k views, 2k+ likes<br/>
194+
6 &ensp;&ensp;Podcast: 10k downloads, 600+ average viewers<br/>
195+
7 &ensp;&ensp;500+ high school students reached.
196+
</p>
197+
</div>
198+
<div>
199+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
200+
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm11.5 1a.5.5 0 0 0-.5.5v3.793L9.854 8.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L12 9.293V5.5a.5.5 0 0 0-.5-.5M3.56 7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/>
201+
</svg>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
);
207+
};
208+
209+
export default Stats;

Diff for: ‎frontend/src/pages/about/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function AboutPage() {
2626
<div className="my-4 flex gap-5">
2727
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
2828
<div>
29-
432 <span className="text-[#727B8C]">members</span> · 342{' '}
30-
<span className="text-[#727B8C]">subcom</span>
29+
16k <span className="text-[#727B8C]">members</span> · 146{' '}
30+
<span className="text-[#727B8C]">internal members</span>
3131
</div>
3232
</div>
3333
<div className="my-4 flex gap-5">
@@ -49,7 +49,7 @@ export default function AboutPage() {
4949
<p>
5050
CSESoc is the official representative body of computing students at UNSW. We are one of the
5151
largest and most active societies at UNSW, and the largest computing society in the southern hemisphere.
52-
CSESoc comprises ~10k members spanning across degrees in Computer Science, Software Engineering,
52+
CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering,
5353
Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional
5454
needs of CSE students, and promote computing through a variety of forms.
5555
</p>

0 commit comments

Comments
 (0)