Skip to content

Commit 5fa1c38

Browse files
derekxu04derekxu04
authored
Merge pull request #19 from csesoc/CW2-33_Organise_Landing_Page
[CW2-33] Organise Landing Page
2 parents a297fc3 + 01cf7a9 commit 5fa1c38

File tree

9 files changed

+84
-50
lines changed

9 files changed

+84
-50
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Link from "next/link";
2+
import Image from "next/image";
3+
export default function AboutHomePage() {
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+
<h2 className="font-bold text-6xl">ABOUT</h2>
8+
</div>
9+
<div className="flex justify-center items-center">
10+
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
11+
{/* LEFT SIDE */}
12+
<div className="col-span-2 md:mx-5">
13+
<div className="flex items-center justify-center">
14+
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
15+
</div>
16+
<h2 className="text-3xl font-extrabold">CSESoc</h2>
17+
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
18+
</div>
19+
{/* RIGHT SIDE */}
20+
<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+
</div>
38+
</div>
39+
</div>
40+
</section>
41+
);
42+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const About = () => {
55
return (
66
<section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
77
<div className="text-center my-10">
8-
<p className="text-[#3977F8] font-game text-xl">01</p>
98
<h2 className="font-bold text-6xl">ABOUT</h2>
109
</div>
1110
<div className="flex justify-center items-center">

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@ const Event = () => {
22
return (
33
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
44
<div className="text-center my-10">
5-
<p className="text-[#3977F8] font-game text-xl">02</p>
6-
<h1 className="font-bold text-6xl">EVENTS</h1>
5+
<h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
76
</div>
87
<div className="flex items-center">
8+
<div className="flex flex-col text-center">
99
<p className="text-center text-3xl">
1010
We run a wide-variety of events for fun, learning new skills and careers. For full
1111
listings, check out the CSESoc Discord or our Facebook page!
1212
</p>
13+
<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">
15+
See all events
16+
</button>
17+
</a>
18+
</div>
1319
<div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
1420
</div>
1521
</section>

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,6 @@ const Landing = () => {
2525
<p>{'</h2>'}</p>
2626
</div>
2727
</div>
28-
<div className="w-72 font-semibold text-xl lg:block hidden">
29-
<p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
30-
<hr className="mb-3 mt-5" />
31-
<div className="flex justify-between">
32-
<p>323,000</p>
33-
<p>Members</p>
34-
</div>
35-
<div className="flex justify-between">
36-
<p>300</p>
37-
<p>Team Members</p>
38-
</div>
39-
<div className="flex justify-between">
40-
<p>52</p>
41-
<p>Events held</p>
42-
</div>
43-
</div>
4428
</div>
4529
</section>
4630
);

‎frontend/src/components/Navbar.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,21 @@ const Navbar = () => {
2424
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\{path}</p>
2525
</Link>
2626
<div>
27-
<div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
27+
<div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
2828
<Link href="/about">
29-
<p className="text-[0.6rem] text-[#C4C5C8]">01</p>
30-
<div>{'//'} about us</div>
29+
<div className="text-xl">{'//'} about us</div>
3130
</Link>
3231
<Link href="/events">
33-
<p className="text-[0.6rem] text-[#C4C5C8]">02</p>
34-
<div>{'//'} events</div>
32+
<div className="text-xl">{'//'} events</div>
3533
</Link>
3634
<Link href="/resources">
37-
<p className="text-[0.6rem] text-[#C4C5C8]">03</p>
38-
<div>{'//'} resources</div>
35+
<div className="text-xl">{'//'} resources</div>
3936
</Link>
4037
<Link href="/sponsors">
41-
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
42-
<div>{'//'} sponsors</div>
38+
<div className="text-xl">{'//'} sponsors</div>
4339
</Link>
4440
<Link href="/contact-us">
45-
<p className="text-[0.6rem] text-[#C4C5C8]">05</p>
46-
<div>{'//'} contact us</div>
41+
<div className="text-xl">{'//'} contact us</div>
4742
</Link>
4843
</div>
4944
<div className="md:hidden xl:hidden lg:hidden text-right font-bold block">

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

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,12 @@ const Resources = () => {
1212
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
1313
<div className="relative">
1414
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
15-
1615
<div className="text-center my-10">
17-
<p className="text-[#3977F8] font-game text-xl">03</p>
1816
<h2 className="font-bold text-6xl">RESOURCES</h2>
1917
</div>
2018

2119
<div className="py-8 bg-no-repeat bg-center">
2220
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
23-
2421
{stage1.map((item: resourceCards) => {
2522
return (
2623
<a
@@ -30,7 +27,13 @@ const Resources = () => {
3027
className={`col-span-4 p-5 ${boxStyling} flex`}
3128
>
3229
<div className="flex justify-center align-middle items-center pl-2 pr-10">
33-
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
30+
<Image
31+
src={item.svg}
32+
alt={item.alt}
33+
draggable="false"
34+
width={item.width}
35+
height={item.height}
36+
/>
3437
</div>
3538
<div>
3639
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
@@ -48,8 +51,14 @@ const Resources = () => {
4851
target="_blank"
4952
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
5053
>
51-
<div className='flex align-middle items-center pt-2 pb-4'>
52-
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
54+
<div className="flex align-middle items-center pt-2 pb-4">
55+
<Image
56+
src={item.svg}
57+
alt={item.alt}
58+
draggable="false"
59+
width={item.width}
60+
height={item.height}
61+
/>
5362
</div>
5463
<div>
5564
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
@@ -67,8 +76,15 @@ const Resources = () => {
6776
target="_blank"
6877
className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
6978
>
70-
<div className='flex align-middle items-center pt-2 pb-4 pr-10'>
71-
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height} className='rounded-md'/>
79+
<div className="flex align-middle items-center pt-2 pb-4 pr-10">
80+
<Image
81+
src={item.svg}
82+
alt={item.alt}
83+
draggable="false"
84+
width={item.width}
85+
height={item.height}
86+
className="rounded-md"
87+
/>
7288
</div>
7389
<div>
7490
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const Sponsors = () => {
1313
id="sponsors"
1414
>
1515
<div className="text-center">
16-
<p className="text-[#3977F8] font-game text-xl">04</p>
1716
<h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
1817
</div>
1918
<div className="flex-1 flex justify-center items-center my-20">

‎frontend/src/pages/contact-us.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export default function ContactUs() {
88
<Navbar />
99
<section className="py-8 xl:px-24 sm:px-10 px-5" id="contact-us">
1010
<div className="text-center my-10">
11-
<p className="text-[#3977F8] font-game text-xl">05</p>
1211
<h1 className="font-bold text-6xl">CONTACT US</h1>
1312
</div>
1413

@@ -54,10 +53,6 @@ export default function ContactUs() {
5453
</a>
5554
.
5655
</p>
57-
{/* <iframe
58-
className="w-1/2 h-[80vh] self-center"
59-
src="https://forms.gle/7kk3RRBJbXo3Sip86"
60-
></iframe> */}
6156
</li>
6257
</ul>
6358

‎frontend/src/pages/index.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import Landing from '@/components/Landing';
22
import Sponsors from '@/components/Sponsors/index';
3-
import About from '@/components/About';
43
import Event from '@/components/Event';
5-
import Resources from '@/components/Resources';
4+
import AboutHomePage from '@/components/About/AboutHomepage';
65

76
export default function Home() {
87
return (
98
<section>
10-
<Landing/>
11-
<About/>
12-
<Event/>
13-
<Resources />
9+
<Landing />
10+
<AboutHomePage />
11+
<Event />
1412
<Sponsors />
1513
</section>
1614
);

0 commit comments

Comments
 (0)