1
1
// import DiscordLogo from "@/public/assets/discord_logo.svg"
2
2
import Image from 'next/image' ;
3
+ import { stage1 , stage2 , stage3 } from '../../public/data/resourceCards' ;
3
4
4
5
const boxStyling =
5
6
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300' ;
@@ -20,101 +21,60 @@ const ResourcesAndContacts = () => {
20
21
21
22
< div className = "py-8 bg-no-repeat bg-center" >
22
23
< div className = "grid grid-cols-4 1 gap-x-9 gap-y-5" >
23
- < a
24
- href = "https://circles.csesoc.app/course-selector"
25
- target = "_blank"
26
- className = { `col-span-4 p-5 ${ boxStyling } ` }
27
- >
28
- < h2 className = "mt-5 text-3xl font-extrabold" > Circles</ h2 >
29
- < p className = "mt-7 text-lg mb-5" >
30
- A UNSW degree planner where you can explore and validate your degree structure.
31
- </ p >
32
- </ a >
33
24
34
- < a
35
- href = "https://structs.sh/"
36
- target = "_blank"
37
- className = { `xl:col-span-1 col-span-4 p-5 ${ boxStyling } ` }
38
- >
39
- < h2 className = "mt-1 text-3xl font-extrabold" > Structs.sh</ h2 >
40
- < p className = "mt-7 text-lg mb-5" >
41
- An educational data structures and algorithms platform.
42
- </ p >
43
- </ a >
44
-
45
- < a
46
- href = "https://jobsboard.csesoc.unsw.edu.au/"
47
- target = "_blank"
48
- className = { `xl:col-span-1 col-span-4 p-5 ${ boxStyling } ` }
49
- >
50
- < h2 className = "mt-1 text-3xl font-extrabold" > Jobs Board</ h2 >
51
- < p className = "mt-7 text-lg mb-5" >
52
- A place where CSESoc students can look for relevant job opportunities.
53
- </ p >
54
- </ a >
55
-
56
- < a
57
- href = "https://notangles.csesoc.app/"
58
- target = "_blank"
59
- className = { `xl:col-span-1 col-span-4 p-5 ${ boxStyling } ` }
60
- >
61
- < h2 className = "mt-1 text-3xl font-extrabold" > Notangles</ h2 >
62
-
63
- < p className = "mt-7 text-lg mb-5" >
64
- Trimester timetabling tool - no more timetable tangles!
65
- </ p >
66
- </ a >
67
-
68
- < a
69
- href = "https://unilectives.csesoc.app/"
70
- target = "_blank"
71
- className = { `xl:col-span-1 col-span-4 p-5 ${ boxStyling } ` }
72
- >
73
- < h2 className = "mt-1 text-3xl font-extrabold" > Uni-lectives</ h2 >
74
-
75
- < p className = "mt-7 text-lg mb-5" >
76
- Read course electives to help you pick your electives or even write your own!
77
- </ p >
78
- </ a >
79
-
80
- < a
81
- href = "https://learn.csesoc.org.au/"
82
- target = "_blank"
83
- className = { `md:col-span-2 col-span-4 p-5 ${ boxStyling } ` }
84
- >
85
- < h2 className = "mt-1 text-3xl font-extrabold" > CSESoc Learn</ h2 >
86
-
87
- < p className = "mt-7 text-lg mb-5" > Your learning outside the classroom starts here</ p >
88
- </ a >
89
-
90
- < a
91
- href = "https://media.csesoc.org.au/"
92
- target = "_blank"
93
- className = { `md:col-span-2 col-span-4 p-5 ${ boxStyling } ` }
94
- >
95
- < h2 className = "mt-1 text-3xl font-extrabold" > CSESoc Media</ h2 >
96
- < p className = "mt-7 text-lg mb-5" > All things content</ p >
97
- </ a >
98
-
99
- < a
100
- href = "https://media.csesoc.org.au/first-year-guide-2024/"
101
- target = "_blank"
102
- className = { `md:col-span-2 col-span-4 p-5 ${ boxStyling } ` }
103
- >
104
- < h2 className = "mt-1 text-3xl font-extrabold" > First Year Guide</ h2 >
105
- < p className = "mt-7 text-lg mb-5" >
106
- The ultimate guide to conquering your first year at CSE
107
- </ p >
108
- </ a >
109
-
110
- < a
111
- href = "https://media.csesoc.org.au/cse-enrol/"
112
- target = "_blank"
113
- className = { `md:col-span-2 col-span-4 p-5 ${ boxStyling } ` }
114
- >
115
- < h2 className = "mt-1 text-3xl font-extrabold" > Enrolment Guide</ h2 >
116
- < p className = "mt-7 text-lg mb-5" > Learn how to get a headstart on uni</ p >
117
- </ a >
25
+ { stage1 . map ( ( item ) => {
26
+ return (
27
+ < a
28
+ href = { item . href }
29
+ target = "_blank"
30
+ className = { `col-span-4 p-5 ${ boxStyling } flex` }
31
+ >
32
+ < div className = "flex justify-center align-middle items-center pl-2 pr-8" >
33
+ < Image src = { item . svg } alt = { item . alt } draggable = "false" width = { item . width } height = { item . height } />
34
+ </ div >
35
+ < div >
36
+ < h2 className = "mt-5 text-3xl font-extrabold" > { item . title } </ h2 >
37
+ < p className = "mt-7 text-lg mb-5" > { item . desc } </ p >
38
+ </ div >
39
+ </ a >
40
+ ) ;
41
+ } ) }
42
+
43
+ { stage2 . map ( ( item ) => {
44
+ return (
45
+ < a
46
+ href = { item . href }
47
+ target = "_blank"
48
+ className = { `xl:col-span-1 col-span-4 p-5 ${ boxStyling } ` }
49
+ >
50
+ < div className = 'flex align-middle items-center pt-2 pb-4' >
51
+ < Image src = { item . svg } alt = { item . alt } draggable = "false" width = { item . width } height = { item . height } />
52
+ </ div >
53
+ < div >
54
+ < h2 className = "mt-5 text-3xl font-extrabold" > { item . title } </ h2 >
55
+ < p className = "mt-7 text-lg mb-5" > { item . desc } </ p >
56
+ </ div >
57
+ </ a >
58
+ ) ;
59
+ } ) }
60
+
61
+ { stage3 . map ( ( item ) => {
62
+ return (
63
+ < a
64
+ href = { item . href }
65
+ target = "_blank"
66
+ className = { `md:col-span-2 col-span-4 p-5 ${ boxStyling } flex` }
67
+ >
68
+ < div className = 'flex align-middle items-center pt-2 pb-4 pr-8' >
69
+ < Image src = { item . svg } alt = { item . alt } draggable = "false" width = { item . width } height = { item . height } className = 'rounded-md' />
70
+ </ div >
71
+ < div >
72
+ < h2 className = "mt-5 text-3xl font-extrabold" > { item . title } </ h2 >
73
+ < p className = "mt-7 text-lg mb-5" > { item . desc } </ p >
74
+ </ div >
75
+ </ a >
76
+ ) ;
77
+ } ) }
118
78
</ div >
119
79
</ div >
120
80
</ div >
0 commit comments