Skip to content

Commit 67bfca2

Browse files
derek-htderek-ht
committed
Finished basic structure of sponsors page.
2 parents 7e25999 + 5a5b358 commit 67bfca2

34 files changed

+438
-81
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"discord.enabled": true
3+
}

‎README.md

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎components/About/index.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import Image from "next/image";
2+
3+
const About = () => {
4+
return (
5+
<section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
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="flex justify-center items-center">
11+
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
12+
{/* LEFT SIDE */}
13+
<div className="col-span-2 md:mx-5">
14+
<div className="flex items-center justify-center">
15+
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
16+
</div>
17+
<h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
18+
<p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
19+
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
20+
<p>We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.</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 lg:mt-0 mt-10">
38+
<div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
39+
<p className="text-xs">
40+
csesoc/README<span className="text-[#7A8192]">.md</span>
41+
</p>
42+
<p className="mt-5">Lorem Ipsum</p>
43+
</div>
44+
<div className="mt-10">
45+
Pinned
46+
<div className="sm:flex my-5">
47+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
48+
<div className="flex text-[#3A76F8]">
49+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
50+
csesoc.unsw.edu.au/<span className="font-semibold">events</span>
51+
</div>
52+
<div className="my-5">CSESoc's recent events</div>
53+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
54+
</div>
55+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
56+
<div className="flex text-[#3A76F8]">
57+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
58+
csesoc.unsw.edu.au/<span className="font-semibold">socials</span>
59+
</div>
60+
<div className="my-5">Follow us on all socials</div>
61+
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
62+
</div>
63+
</div>
64+
<div className="sm:flex">
65+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
66+
<div className="flex text-[#3A76F8]">
67+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
68+
csesoc.unsw.edu.au/<span className="font-semibold">join-us</span>
69+
</div>
70+
<div className="my-5">Get involved!</div>
71+
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
72+
</div>
73+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
74+
<div className="flex text-[#3A76F8]">
75+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
76+
csesoc.unsw.edu.au/<span className="font-semibold">contact</span>
77+
</div>
78+
<div className="my-5">Contact us via email</div>
79+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
);
88+
};
89+
90+
export default About;

‎components/Event/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const Event = () => {
2+
return <section></section>;
3+
};
4+
5+
export default Event;

‎components/Landing/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Navbar from "../Navbar";
22

33
const Landing = () => {
44
return (
5-
<section className="flex flex-col min-h-screen justify-between py-8 px-24">
5+
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5" id="landing">
66
<Navbar />
77
<div className="flex justify-between items-end">
88
<div>
@@ -19,7 +19,7 @@ const Landing = () => {
1919
<p>{"</h2>"}</p>
2020
</div>
2121
</div>
22-
<div className="w-72 font-semibold text-xl">
22+
<div className="w-72 font-semibold text-xl lg:block hidden">
2323
<p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
2424
<hr className="mb-3 mt-5" />
2525
<div className="flex justify-between">

‎components/Navbar.js

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎components/Navbar.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
4+
const Navbar = () => {
5+
return (
6+
<nav className="flex justify-between items-center">
7+
<Link href="#landing">
8+
<Image src="/assets/csesoc_logo.svg" alt="CSESoc Logo" width={200} height={200} draggable={false} />
9+
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
10+
</Link>
11+
<div>
12+
<div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
13+
<Link href="#about">
14+
<p className="text-[0.6rem] text-[#C4C5C8]">01</p>
15+
<div>{"//"} about us</div>
16+
</Link>
17+
<Link href="#events">
18+
<p className="text-[0.6rem] text-[#C4C5C8]">02</p>
19+
<div>{"//"} events</div>
20+
</Link>
21+
<Link href="#resources">
22+
<p className="text-[0.6rem] text-[#C4C5C8]">03</p>
23+
<div>{"//"} resources</div>
24+
</Link>
25+
<Link href="#sponsors">
26+
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
27+
<div>{"//"} sponsors</div>
28+
</Link>
29+
</div>
30+
</div>
31+
</nav>
32+
);
33+
};
34+
35+
export default Navbar;

‎components/ResourcesAndContacts/index.tsx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// import DiscordLogo from "@/public/assets/discord_logo.svg"
2+
import Image from "next/image";
3+
4+
const boxStyling = "border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300";
5+
const socialsBoxStyling = "xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300";
6+
7+
const ResourcesAndContacts = () => {
8+
return (
9+
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
10+
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
11+
<div className="relative">
12+
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
13+
14+
<div className="text-center my-10">
15+
<p className="text-[#3977F8] font-game text-xl">03</p>
16+
<h1 className="font-bold text-5xl">RESOURCES & CONTACTS</h1>
17+
</div>
18+
19+
<div className="py-8 bg-no-repeat bg-center">
20+
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
21+
<a href="https://circles.csesoc.app/course-selector" target="_blank" className={`col-span-4 p-5 ${boxStyling}`}>
22+
<h2 className="mt-5 text-3xl font-extrabold">Circles</h2>
23+
<p className="mt-7 text-lg mb-5">A UNSW degree planner where you can explore and validate your degree structure.</p>
24+
</a>
25+
26+
<a href="https://structs.sh/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
27+
<h2 className="mt-1 text-3xl font-extrabold">Structs.sh</h2>
28+
<p className="mt-7 text-lg mb-5">An educational data structures and algorithms platform.</p>
29+
</a>
30+
31+
<a href="https://jobsboard.csesoc.unsw.edu.au/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
32+
<h2 className="mt-1 text-3xl font-extrabold">Jobs Board</h2>
33+
<p className="mt-7 text-lg mb-5">A place where CSESoc students can look for relevant job opportunities.</p>
34+
</a>
35+
36+
<a href="https://notangles.csesoc.app/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
37+
<h2 className="mt-1 text-3xl font-extrabold">Notangles</h2>
38+
39+
<p className="mt-7 text-lg mb-5">Trimester timetabling tool - no more timetable tangles!</p>
40+
</a>
41+
42+
<a href="https://unilectives.csesoc.app/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
43+
<h2 className="mt-1 text-3xl font-extrabold">Uni-lectives</h2>
44+
45+
<p className="mt-7 text-lg mb-5">Read course electives to help you pick your electives or even write your own!</p>
46+
</a>
47+
48+
<a href="https://compclub.org/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
49+
<h2 className="mt-1 text-3xl font-extrabold">CompClub</h2>
50+
51+
<p className="mt-7 text-lg mb-5">Promoting computing to high school students</p>
52+
</a>
53+
54+
<a href="https://media.csesoc.org.au/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
55+
<h2 className="mt-1 text-3xl font-extrabold">CSESoc Media</h2>
56+
<p className="mt-7 text-lg mb-5">All things content</p>
57+
</a>
58+
59+
<a href="https://media.csesoc.org.au/fyg-2023/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
60+
<h2 className="mt-1 text-3xl font-extrabold">First Year Guide</h2>
61+
<p className="mt-7 text-lg mb-5">The ultimate guide to conquering your first year at CSE</p>
62+
</a>
63+
64+
<a href="https://media.csesoc.org.au/cse-enrol/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
65+
<h2 className="mt-1 text-3xl font-extrabold">Enrolment Guide</h2>
66+
<p className="mt-7 text-lg mb-5">Learn how to get a headstart on uni</p>
67+
</a>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<div className="md:mt-10 mt-5">
73+
<div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
74+
<a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
75+
<Image src="assets/discord_logo.svg" alt="" width={25} height={25} className="mr-1" />
76+
<p className="text-xl font-bold m-2">DISCORD</p>
77+
</a>
78+
<a href="https://www.facebook.com/csesoc/" target="_blank" className={socialsBoxStyling}>
79+
<Image src="assets/fb_logo.svg" alt="" width={25} height={25} className="mr-1" />
80+
<p className="text-xl font-bold m-2">FACEBOOK</p>
81+
</a>
82+
<a href="https://www.facebook.com/groups/csesoc" target="_blank" className={socialsBoxStyling}>
83+
<Image src="assets/group_icon.svg" alt="" width={25} height={25} className="mr-1" />
84+
<p className="text-xl font-bold m-2">FACEBOOK GROUP</p>
85+
</a>
86+
</div>
87+
88+
<div className="flex 1 justify-around xl:mx-40">
89+
<a href="https://twitter.com/csesoc?lang=en" target="_blank">
90+
<Image src="assets/x_twitter_icon.svg" alt="X/Twitter" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
91+
</a>
92+
<a href="https://www.youtube.com/@CSESocUNSW" target="_blank">
93+
<Image src="assets/youtube_logo.svg" alt="Youtube" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
94+
</a>
95+
<a href="https://www.instagram.com/csesoc_unsw/?hl=en" target="_blank">
96+
<Image src="assets/instagram_logo.svg" alt="Instagram" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
97+
</a>
98+
<a href="https://www.tiktok.com/@csesoc?lang=en" target="_blank">
99+
<Image src="assets/tiktok_logo.svg" alt="TikTok" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
100+
</a>
101+
<a href="#" target="_blank">
102+
<Image src="assets/wechat_logo.svg" alt="weChat" width={40} height={40} className="mr-1 fill-white hover:scale-105 transition-all" />
103+
</a>
104+
<a href="https://www.linkedin.com/company/csesoc?originalSubdomain=au" target="_blank">
105+
<Image src="assets/linkedin_logo.svg" alt="LinkedIn" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
106+
</a>
107+
</div>
108+
</div>
109+
</div>
110+
</section>
111+
);
112+
};
113+
114+
export default ResourcesAndContacts;

‎components/Sponsors/index.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,31 @@ const Sponsors = () => {
44
return (
55
<section className="flex flex-col min-h-screen py-8 px-24">
66
<div>
7-
<p>04</p>
8-
<h2>SUPPORT CSESOC</h2>
7+
<p className="text-[#3977F8] font-game text-xl">04</p>
8+
<h2 className="font-bold text-7xl">SUPPORT CSESOC</h2>
99
</div>
10-
<div className="flex-1 grid grid-cols-10 grid-row-2 py-80 px-64">
11-
<div className="bg-blue-300 sponsors col-span-4 row-start-1 row-end-3"></div>
12-
<div className="bg-red-300 atlassian col-span-3 row-start-1 row-end-2"></div>
13-
<div className="bg-yellow-300 google col-span-3 row-start-1 row-end-2"></div>
14-
<div className="bg-pink-300 freelancer col-span-3 row-start-2 row-end-3"></div>
15-
<div className="bg-green-300 microsoft col-span-3 row-start-2 row-end-3"></div>
10+
<div className="flex-1 flex justify-center items-center">
11+
<div style={{ backgroundImage: 'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)' }} className="overflow-hidden rounded-[4rem] h-[35rem] w-[90rem] grid grid-cols-10 grid-row-2">
12+
<div className="flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3 flex">
13+
<div className="div">
14+
<h2 className=" text-5xl font-extrabold">Our sponsors</h2>
15+
<p className="my-36 text-2xl">Check out our very cool sponsors.</p>
16+
<button>View our sponsors</button>
17+
</div>
18+
</div>
19+
<div style={{ backgroundColor: 'rgba(0, 71, 255, 0.33)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/atlassian_logo.svg" alt="Atlassian logo" /></div>
20+
<div style={{ backgroundColor: 'rgba(82, 130, 255, 0.47)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/google_logo.svg" alt="Google logo" /></div>
21+
<div style={{ backgroundColor: 'rgba(48, 93, 255, 0.2)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/freelancer_logo.svg" alt="Freelancer logo" /></div>
22+
<div style={{ backgroundColor: 'rgba(122, 137, 236, 0.27)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/microsoft_logo.svg" alt="Microsoft logo" /></div>
23+
</div>
24+
</div>
25+
<div className="flex justify-between">
26+
<img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
27+
<div className="flex flex-col">
28+
<p>B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
29+
<p>© 2021 — CSESoc UNSW</p>
30+
</div>
31+
1632
</div>
1733
</section >
1834
)

0 commit comments

Comments
 (0)