1
+ import Image from "next/image"
2
+
3
+ const About = ( ) => {
4
+ return (
5
+ < section className = "py-8 px-24" >
6
+ < div className = "text-center my-10" >
7
+ < p className = "text-[#3977F8] font-game text-xl" > 01</ p >
8
+ < h1 className = "font-bold text-6xl" > ABOUT</ h1 >
9
+ </ div >
10
+ < div className = "grid grid-cols-6 flex-1" >
11
+ { /* LEFT SIDE */ }
12
+ < div className = "col-span-2 xl:mx-16" >
13
+ < div className = "flex items-center justify-center" > < Image src = "/assets/csesoc_icon.svg" alt = "CSESoc Icon" width = { 150 } height = { 150 } /> </ div >
14
+ < h1 className = "mt-10 text-3xl font-extrabold" > CSESoc</ h1 >
15
+ < p className = "text-[#727B8C] font-medium" > unsw-computer-science-soc</ p >
16
+ < button className = "bg-[#444F6F] w-full my-5 py-2 rounded" > Follow</ button >
17
+ < p >
18
+ We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees
19
+ in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.
20
+ </ p >
21
+ < div className = "my-4 flex gap-5" >
22
+ < Image src = "/assets/people_icon.svg" alt = "People" width = { 20 } height = { 20 } />
23
+ < div >
24
+ 432 < span className = "text-[#727B8C]" > members</ span > · 342 < span className = "text-[#727B8C]" > subcom</ span >
25
+ </ div >
26
+ </ div >
27
+ < div className = "my-4 flex gap-5" >
28
+ < Image src = "/assets/location_icon.svg" alt = "Location" width = { 20 } height = { 20 } />
29
+ Sydney, Australia
30
+ </ div >
31
+ < div className = "flex gap-5" >
32
+ < Image src = "/assets/mail_icon.svg" alt = "Mail" width = { 20 } height = { 20 } />
33
+ info@csesoc.org.au
34
+ </ div >
35
+ </ div >
36
+ { /* RIGHT SIDE */ }
37
+ < div className = "col-span-4" >
38
+ < div className = "rounded border border-[#595F6D] p-5 h-92 h-full" >
39
+ < p className = "text-xs" > csesoc/README< span className = "text-[#7A8192]" > .md</ span > </ p >
40
+ < p className = "mt-5" > Lorem Ipsum</ p >
41
+ </ div >
42
+ < div className = "mt-10" >
43
+ Pinned
44
+ < div className = "flex my-5" >
45
+ < div className = "p-5 border border-[#595F6D] flex-1 rounded-lg mr-5" >
46
+ < div className = "flex text-[#3A76F8]" >
47
+ < Image src = "/assets/book_icon.svg" alt = "Book" width = { 20 } height = { 20 } />
48
+ csesoc.unsw.edu.au/< span className = "font-semibold" > events</ span >
49
+ </ div >
50
+ < div className = "my-5" > CSESoc's recent events</ div >
51
+ < div className = "rounded-full bg-[#CC5421] w-3 h-3" />
52
+ </ div >
53
+ < div className = "p-5 border border-[#595F6D] flex-1 rounded-lg" >
54
+ < div className = "flex text-[#3A76F8]" >
55
+ < Image src = "/assets/book_icon.svg" alt = "Book" width = { 20 } height = { 20 } />
56
+ csesoc.unsw.edu.au/< span className = "font-semibold" > socials</ span >
57
+ </ div >
58
+ < div className = "my-5" > Follow us on all socials</ div >
59
+ < div className = "rounded-full bg-[#566ACE] w-3 h-3" />
60
+ </ div >
61
+ </ div >
62
+ < div className = "flex" >
63
+ < div className = "p-5 border border-[#595F6D] flex-1 rounded-lg mr-5" >
64
+ < div className = "flex text-[#3A76F8]" >
65
+ < Image src = "/assets/book_icon.svg" alt = "Book" width = { 20 } height = { 20 } />
66
+ csesoc.unsw.edu.au/< span className = "font-semibold" > join-us</ span >
67
+ </ div >
68
+ < div className = "my-5" > Get involved!</ div >
69
+ < div className = "rounded-full bg-[#E7E923] w-3 h-3" />
70
+ </ div >
71
+ < div className = "p-5 border border-[#595F6D] flex-1 rounded-lg" >
72
+ < div className = "flex text-[#3A76F8]" >
73
+ < Image src = "/assets/book_icon.svg" alt = "Book" width = { 20 } height = { 20 } />
74
+ csesoc.unsw.edu.au/< span className = "font-semibold" > contact</ span >
75
+ </ div >
76
+ < div className = "my-5" > Contact us via email</ div >
77
+ < div className = "rounded-full bg-[#CC5421] w-3 h-3" />
78
+ </ div >
79
+ </ div >
80
+ </ div >
81
+ </ div >
82
+ </ div >
83
+ </ section >
84
+ )
85
+ }
86
+
87
+ export default About
0 commit comments