Skip to content

Commit 091eb09

Browse files
andrew-l3andrew-l3
authored
Merge pull request #3 from csesoc/CW2-5-Create-sponsors-page
CW2-5 Sponsors Page Draft/Template
2 parents 97db3fb + 7ba5f4a commit 091eb09

25 files changed

+730
-11
lines changed

‎components/Footer.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Link from 'next/link';
2+
3+
const Footer = () => {
4+
return (
5+
<section>
6+
<div className="sm:flex justify-between">
7+
<div className="flex items-center">
8+
<img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
9+
<Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
10+
<img
11+
src="/flag/ollie_is_hiding.png"
12+
alt="Ollie"
13+
draggable="false"
14+
width={60}
15+
height={60}
16+
className="ml-10"
17+
/>
18+
</Link>
19+
<img
20+
src="/flag/ollie_is_hiding.png"
21+
alt="Ollie"
22+
draggable="false"
23+
width={60}
24+
height={60}
25+
className="ml-10 sm:block hidden"
26+
/>
27+
</div>
28+
<div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
29+
<p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
30+
<p>© 2021 — CSESoc UNSW</p>
31+
</div>
32+
</div>
33+
<img
34+
src="assets/sponsors_backdrop.svg"
35+
alt="Sponsors backdrop"
36+
className="absolute bottom-0 left-0 w-screen -z-10"
37+
/>
38+
</section>
39+
);
40+
};
41+
42+
export default Footer;

‎components/Navbar.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
11
import Image from 'next/image';
22
import Link from 'next/link';
3+
import { useEffect, useState } from 'react';
34

45
const Navbar = () => {
6+
const [path, setPath] = useState<string>('');
7+
useEffect(() => {
8+
const item: string | undefined = window.location.href.split('/').pop();
9+
if (item == '' || item == undefined) setPath('HOME');
10+
else setPath(item.toUpperCase());
11+
}, []);
12+
513
return (
614
<nav className="flex justify-between items-center relative z-10">
7-
<Link href="#landing">
15+
<Link href="/">
816
<Image
917
src="/assets/csesoc_logo.svg"
1018
alt="CSESoc Logo"
1119
width={200}
1220
height={200}
1321
draggable={false}
1422
/>
15-
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
23+
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\{path}</p>
1624
</Link>
1725
<div>
1826
<div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
19-
<Link href="#about">
27+
<Link href="about us">
2028
<p className="text-[0.6rem] text-[#C4C5C8]">01</p>
2129
<div>{'//'} about us</div>
2230
</Link>
23-
<Link href="#events">
31+
<Link href="events">
2432
<p className="text-[0.6rem] text-[#C4C5C8]">02</p>
2533
<div>{'//'} events</div>
2634
</Link>
27-
<Link href="#resources">
35+
<Link href="resources">
2836
<p className="text-[0.6rem] text-[#C4C5C8]">03</p>
2937
<div>{'//'} resources</div>
3038
</Link>
31-
<Link href="#sponsors">
39+
<Link href="sponsors">
3240
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
3341
<div>{'//'} sponsors</div>
3442
</Link>

‎components/Sponsors/index.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Image from 'next/image';
21
import Link from 'next/link';
32
import React from 'react';
43

@@ -26,9 +25,11 @@ const Sponsors = () => {
2625
<div className="max-w-[15rem]">
2726
<h2 className="text-4xl font-black">Our sponsors</h2>
2827
<p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
29-
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">
30-
View our sponsors
31-
</button>
28+
<a href="sponsors">
29+
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">
30+
View our sponsors
31+
</button>
32+
</a>
3233
</div>
3334
</div>
3435
<div className={`${firstRowBoxesStyling} bg-[rgba(0, 71, 255, 0.33)]`}>

‎components/Sponsors/sponsorlinks.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { diamondLinks, goldLinks, silverLinks } from '../../public/data/data';
2+
//import '/styles/sponsorLinks.module.css';
3+
const logostyle = 'h-14';
4+
const logodiv = 'block gap-y-8 h-14';
5+
const background =
6+
'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%)';
7+
// const outer = 'rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16';
8+
9+
function SponsorLinks() {
10+
return (
11+
<div className="flex justify-center items-center my-20">
12+
<div className="w-100 flex flex-col gap-16">
13+
<div
14+
style={{ backgroundImage: `${background}` }}
15+
className="flex rounded-[1rem] pl-14 py-14 gap-16 items-center"
16+
>
17+
<h2 className="text-4xl font-black">Diamond Sponsors</h2>
18+
{diamondLinks.map((item, index) => {
19+
return (
20+
<a key={index} className={`${logodiv}`} href={item.href}>
21+
<img className={`${logostyle}`} src={item.svg} alt={item.alt} />
22+
</a>
23+
);
24+
})}
25+
</div>
26+
<div
27+
style={{ backgroundImage: `${background}` }}
28+
className="flex rounded-[1rem] px-14 py-14"
29+
>
30+
<h2 className="text-4xl font-black pr-16">Gold Sponsors</h2>
31+
<div className="grid grid-cols-5 gap-16 items-center">
32+
{goldLinks.map((item, index) => {
33+
return (
34+
<a key={index} className="" href={item.href}>
35+
<img className="h-6" src={item.svg} alt={item.alt} />
36+
</a>
37+
);
38+
})}
39+
</div>
40+
</div>
41+
<div
42+
style={{ backgroundImage: `${background}` }}
43+
className="grid grid-cols-5 rounded-[1rem] pl-14 py-14 gap-16 items-center"
44+
>
45+
<h2 className="text-4xl font-black">Silver Sponsors</h2>
46+
{silverLinks.map((item, index) => {
47+
return (
48+
<a key={index} className="h-14" href={item.href}>
49+
<img className="h-8" src={item.svg} alt={item.alt} />
50+
</a>
51+
);
52+
})}
53+
</div>
54+
</div>
55+
</div>
56+
);
57+
}
58+
59+
export default SponsorLinks;

‎components/Sponsors/subpage.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
//import '/styles/sponsors.module.css';
3+
import SponsorLinks from './sponsorlinks';
4+
5+
const SponsorsPage = () => {
6+
return (
7+
<section className="">
8+
<SponsorLinks />
9+
</section>
10+
);
11+
};
12+
13+
export default SponsorsPage;

‎pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Landing from '@/components/Landing';
2-
import Sponsors from '@/components/Sponsors';
2+
import Sponsors from '@/components/Sponsors/index';
33
import About from '@/components/About';
44
import Event from '@/components/Event';
55
import ResourcesAndContacts from '@/components/ResourcesAndContacts';

‎pages/sponsors.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import SponsorsPage from '@/components/Sponsors/subpage';
2+
import Navbar from '@/components/Navbar';
3+
import Footer from '@/components/Footer';
4+
5+
export default function Home() {
6+
return (
7+
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
8+
<Navbar />
9+
<SponsorsPage />
10+
<Footer />
11+
</section>
12+
);
13+
}

‎public/assets/appian_logo.svg

+27
Loading

‎public/assets/canva_logo.svg

+9
Loading

‎public/assets/citadel_logo.svg

+1
Loading

‎public/assets/flowtraders_logo.svg

+9
Loading

‎public/assets/imc_logo.svg

+9
Loading

‎public/assets/janestreet_logo.svg

+9
Loading

0 commit comments

Comments
 (0)