Skip to content

Commit 4ea1a11

Browse files
andrew-l3andrew-l3
committed
landing page about section changes
1 parent 00b4919 commit 4ea1a11

File tree

2 files changed

+168
-39
lines changed

2 files changed

+168
-39
lines changed

‎frontend/src/components/About/index.tsx

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Image from 'next/image';
22
import Link from 'next/link';
3-
import Stats from '../Stats';
3+
import Github from '../Github';
44

55
const About = () => {
66
return (
@@ -13,47 +13,10 @@ const About = () => {
1313
<div className="lg:grid grid-cols-2 flex-1 max-w-[90rem]">
1414
{/* LEFT SIDE */}
1515
<div className="col-span-2">
16-
{/* <div className="flex items-center justify-center">
17-
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
18-
</div>*/}
19-
{/* <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
20-
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>*/}
21-
<Stats/>
22-
{/* <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>*/}
23-
{/* <p>
24-
CSESoc is the principal representative body for UNSW computing students.
25-
</p>
26-
<div className="my-4 flex gap-5">
27-
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
28-
<div>
29-
432 <span className="text-[#727B8C]">members</span> · 342{' '}
30-
<span className="text-[#727B8C]">subcom</span>
31-
</div>
32-
</div>
33-
<div className="my-4 flex gap-5">
34-
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
35-
Sydney, Australia
36-
</div>
37-
<div className="flex gap-5">
38-
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
39-
info@csesoc.org.au
40-
</div>*/}
16+
<Github/>
4117
</div>
4218
{/* RIGHT SIDE */}
4319
<div className="col-span-4 lg:mt-0 mt-10 pt-8">
44-
{/* <div className="rounded border border-[#595F6D] p-5 h-auto">
45-
<p className="text-xs">
46-
csesoc/README<span className="text-[#7A8192]">.md</span>
47-
</p>
48-
<p className="mt-5">
49-
CSESoc is one of the biggest and most active societies at UNSW, catering to over 3500 CSE
50-
students spanning across degrees in Computer Science, Software Engineering,
51-
Bioinformatics and Computer Engineering.
52-
<br /><br />
53-
We are here to fulfil the social, personal and
54-
professional needs of CSE students, and promote computing through a variety of forms.
55-
</p>
56-
</div>*/}
5720
<div className="mt-10 mb-32">
5821
Pinned
5922
{/* TODO: refactor all of this */}

‎frontend/src/components/Github.tsx

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import Image from 'next/image';
2+
import { motion, useAnimationControls } from "framer-motion"
3+
import { useEffect } from 'react';
4+
5+
const Github = () => {
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 justify-center align-middle items-center relative grow w-full py-12 gap-24">
35+
<div className="flex flex-col gap-2 pl-14 justify-center">
36+
<h2 className="text-3xl font-extrabold">CSESoc Stats</h2>
37+
<span className="text-[#727B8C] font-medium pb-4">unsw-computer-science-engineering-society</span>
38+
<div className="flex gap-0 w-48 justify-between bg-slate-50 px-3 py-1 rounded-md hover:cursor-pointeritems-center"
39+
onClick={() => {revert()}}>
40+
<Image className='mb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
41+
<span className="text-[#727B8C] text-sm py-1 px-2">Total members:</span>
42+
<span className="text-[#727B8C] text-lg relative bottom-1">433</span>
43+
</div>
44+
<div className="group inline-flex justify-between gap-0 w-48 hover:bg-slate-50 px-3 py-1 rounded-md text-right hover:cursor-pointer transition-all hover:text-[#444F6F]"
45+
onClick={() => {revert()}}>
46+
<div className='flex gap-1'>
47+
<Image className='text-white group-hover:text-[#727B8C] pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
48+
<span className="text-[#ffffff] text-sm py-1 px-2 group-hover:text-[#727B8C]">Events held:</span>
49+
</div>
50+
<span className="text-[#ffffff] text-lg leading-3 relative top-1 group-hover:text-[#727B8C] ">53</span>
51+
</div>
52+
<div className="flex justify-between gap-0 w-48 px-3 py-1 rounded-md text-right hover:cursor-pointer"
53+
onClick={() => {revert()}}>
54+
<div className='flex gap-1'>
55+
<Image className='text-white pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
56+
<span className="text-[#ffffff] text-sm py-1 px-2">Subcom:</span>
57+
</div>
58+
<span className="text-[#ffffff] text-lg leading-3 relative top-1">343</span>
59+
</div>
60+
<div className="flex justify-between gap-0 w-48 px-3 py-1 rounded-md text-right hover:cursor-pointer"
61+
onClick={() => {revert()}}>
62+
<div className='flex gap-1'>
63+
<Image className='text-white pb-1' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
64+
<span className="text-[#ffffff] text-sm py-1 px-2">Contributions:</span>
65+
</div>
66+
<span className="text-[#ffffff] text-lg leading-3 relative top-1">343</span>
67+
</div>
68+
</div>
69+
<div className="before:flex before:content-[url('/assets/csesoc_icon.svg')] before:h-0 before:top-14 before:relative before:left-4">
70+
<motion.svg
71+
className="relative top-9" width={200} height={200}
72+
/* style={{transform: "rotate(270deg)", top: "5.65rem", left: "-1.55rem"}}*/
73+
style={{transform: "rotate(270deg)"}}
74+
initial="hidden"
75+
animate={controls}
76+
>
77+
<motion.circle
78+
r={r}
79+
cx={100}
80+
cy={100}
81+
fill="transparent"
82+
stroke="#444F6F"
83+
strokeWidth={"0.75rem"}
84+
strokeLinecap="round"
85+
/>
86+
<motion.circle
87+
r={r}
88+
cx={100}
89+
cy={100}
90+
fill="transparent"
91+
stroke="rgb(248 250 252)"
92+
strokeWidth={"0.75rem"}
93+
strokeLinecap="round"
94+
variants={progress}
95+
/>
96+
</motion.svg>
97+
{/*} <Image className="z-10 absolute top-11" src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />*/}
98+
</div>
99+
</div>
100+
<div className="flex flex-col pb-14">
101+
<div className="flex flex-col">
102+
<div className="flex text-left">
103+
<Image className='pb-1 ml-5' src="/assets/people_icon.svg" alt="People" width={20} height={20} />
104+
<span className="ml-3">CSESoc is the principal representative body for UNSW computing students.</span>
105+
</div>
106+
<div className="my-4 flex">
107+
<Image className="ml-5" src="/assets/location_icon.svg" alt="Location" width={17} height={17} />
108+
<span className="ml-4">Sydney, Australia</span>
109+
</div>
110+
<div className="flex">
111+
<Image className="ml-5" src="/assets/mail_icon.svg" alt="Mail" width={17} height={17} />
112+
<span className="ml-4">info@csesoc.org.au</span>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div className="flex flex-col gap-4">
118+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
119+
<div className="flex flex-col">
120+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
121+
csesoc/README<span className="text-[#7A8192]">.md</span>
122+
</p>
123+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
124+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>CSESoc is one of the biggest and most active societies at</span><br/>
125+
2 &ensp;&ensp;UNSW, catering to over 3500 CSE students spanning across<br/>
126+
3 &ensp;&ensp;degrees in Computer Science, Software Engineering,<br/>
127+
4 &ensp;&ensp;Bioinformatics and Computer Engineering.
128+
<br/><br/>
129+
5 &ensp;&ensp;We are here to fulfil the social, personal and professional<br/>
130+
6 &ensp;&ensp;needs of CSE students, and promote computing through a<br/>
131+
7 &ensp;&ensp;variety of forms.
132+
</p>
133+
</div>
134+
<div>
135+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
136+
<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"/>
137+
</svg>
138+
</div>
139+
</div>
140+
<div className="flex px-6 pt-4 pb-6 bg-[#444f6f38] rounded-md w-full justify-between align-baseline">
141+
<div className="flex flex-col">
142+
<p className="text-3xl mt-6 justify-end" style={{paddingLeft: "0px"}}>
143+
execs-directors-subcoms<span className="text-[#7A8192]">.md</span>
144+
</p>
145+
<p className="mt-10 mb-5 max-w-lg text-[#afb3bc]">
146+
1 &ensp;&ensp;<span style={{paddingLeft: "2px"}}>100+ events (35+ careers related revents)</span><br/>
147+
2 &ensp;&ensp;41 sponsors<br/>
148+
3 &ensp;&ensp;480 000 discord messages<br/>
149+
4 &ensp;&ensp;200+ volunteers.<br/>
150+
5 &ensp;&ensp;Tiktok: 27.2k views, 2k+ likes<br/>
151+
6 &ensp;&ensp;Podcast: 10k downloads, 600+ average viewers<br/>
152+
7 &ensp;&ensp;500+ high school students reached.
153+
</p>
154+
</div>
155+
<div>
156+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" className="bi bi-markdown-fill" viewBox="0 0 16 16">
157+
<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"/>
158+
</svg>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
);
164+
};
165+
166+
export default Github;

0 commit comments

Comments
 (0)