Skip to content

Commit 4f35f73

Browse files
Domin0deDomin0de
authored
Merge pull request #32 from csesoc/CW2-59-Sponsors
[CW2-59] Sponsors Carousel
2 parents 8cd4943 + 06daf64 commit 4f35f73

File tree

8 files changed

+92
-63
lines changed

8 files changed

+92
-63
lines changed

‎frontend/package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"postcss": "8.4.29",
2626
"react": "18.2.0",
2727
"react-dom": "18.2.0",
28+
"react-multi-carousel": "^2.8.5",
2829
"tailwindcss": "3.3.3",
2930
"typescript": "5.1"
3031
},

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function AboutHomePage() {
1414
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
1515
</div>
1616
<h2 className="text-3xl font-extrabold">CSESoc</h2>
17-
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
17+
<button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
1818
</div>
1919
{/* RIGHT SIDE */}
2020
<div className="col-span-4 lg:mt-0 mt-10">

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { diamondLinks, goldLinks } from "@/../public/data/sponsorInfos";
2+
import Carousel from 'react-multi-carousel';
3+
import 'react-multi-carousel/lib/styles.css';
4+
5+
export default function SponsorCarousel() {
6+
const responsive = {
7+
superLargeDesktop: {
8+
breakpoint: { max: 4000, min: 1024 },
9+
items: 3,
10+
},
11+
desktop: {
12+
breakpoint: { max: 1024, min: 768 },
13+
items: 3,
14+
},
15+
tablet: {
16+
breakpoint: { max: 768, min: 464 },
17+
items: 2,
18+
},
19+
mobile: {
20+
breakpoint: { max: 464, min: 0 },
21+
items: 1,
22+
},
23+
};
24+
25+
// Show diamond and gold sponsors in carousel
26+
const sponsors = diamondLinks.concat(goldLinks);
27+
28+
return (
29+
<Carousel
30+
responsive={responsive}
31+
infinite={true}
32+
autoPlay={true}
33+
arrows={false}
34+
autoPlaySpeed={3000}
35+
keyBoardControl={false}
36+
transitionDuration={500}
37+
pauseOnHover={false}
38+
containerClass="carousel-container my-8"
39+
>
40+
{sponsors.map((sponsor, index) => (
41+
<div key={index} className="p-4 mx-8 flex justify-center items-center">
42+
<img
43+
src={sponsor.svg}
44+
alt={sponsor.alt}
45+
className="h-24"
46+
/>
47+
</div>
48+
))}
49+
</Carousel>
50+
);
51+
}

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

+11-34
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,27 @@
11
import React from 'react';
22
import Footer from '@/components/Footer';
3+
import SponsorCarousel from './SponsorCarousel';
34

45
const Sponsors = () => {
5-
const firstRowBoxesStyling =
6-
'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-1 xl:row-end-2 sm:row-start-3 sm:row-end-4 sm:h-auto h-36';
7-
const secondRowBoxesStyling =
8-
'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
9-
106
return (
117
<section
128
className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
139
id="sponsors"
1410
>
1511
<div className="text-center">
16-
<h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
12+
<h2 className="font-bold text-6xl">OUR SPONSORS</h2>
1713
</div>
18-
<div className="flex-1 flex justify-center items-center my-20">
14+
<div className="flex-1 flex justify-center items-center my-15">
1915
<div
20-
style={{
21-
backgroundImage:
22-
'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%)'
23-
}}
24-
className="overflow-hidden rounded-[4rem] w-[90rem] grid grid-cols-10 xl:grid-row-2 sm:grid-row-5"
16+
className="rounded border border-[#595F6D] h-auto overflow-hidden w-[90rem] flex flex-col gap-8 py-8"
2517
>
26-
<div className="flex flex-col justify-center items-center xl:col-span-4 col-span-10 row-start-1 row-end-3 xl:my-0 my-12">
27-
<div className="max-w-[15rem]">
28-
<h2 className="text-4xl font-black">Our sponsors</h2>
29-
<p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
30-
<a href="sponsors">
31-
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10 hover-animate">
32-
View our sponsors
33-
</button>
34-
</a>
35-
</div>
36-
</div>
37-
<div className={`${firstRowBoxesStyling} bg-[rgba(0, 71, 255, 0.33)]`}>
38-
<img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
39-
</div>
40-
<div className={`${firstRowBoxesStyling} bg-[rgba(82, 130, 255, 0.47)]`}>
41-
<img src="assets/google_logo.svg" alt="Google logo" />
42-
</div>
43-
<div className={`${secondRowBoxesStyling} bg-[rgba(48, 93, 255, 0.2)]`}>
44-
<img src="assets/freelancer_logo.svg" alt="Freelancer logo" />
45-
</div>
46-
<div className={`${secondRowBoxesStyling} bg-[rgba(122, 137, 236, 0.27)]`}>
47-
<img src="assets/microsoft_logo.svg" alt="Microsoft logo" />
18+
<SponsorCarousel />
19+
<div className="flex justify-center items-center">
20+
<a href="sponsors">
21+
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
22+
Learn More
23+
</button>
24+
</a>
4825
</div>
4926
</div>
5027
</div>

‎frontend/src/pages/about/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function AboutPage() {
1717
</div>
1818
<h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
1919
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
20-
<a href="https://www.facebook.com/csesoc/" target="_blank">
20+
<a href="https://github.com/csesoc/" target="_blank">
2121
<button className="bg-[#444F6F] w-full my-5 py-2 rounded hover-animate">Follow</button>
2222
</a>
2323
<p>

‎frontend/src/pages/sponsors.tsx

+12-27
Original file line numberDiff line numberDiff line change
@@ -10,67 +10,52 @@ export default function SponsorsPage() {
1010
const [showModal, setShowModal] = useState(false);
1111
const [information, setInformation] = useState<sponsorInfo | null>(null);
1212

13+
const handleSponsorClick = (info: sponsorInfo) => {
14+
setInformation(info);
15+
setShowModal(true);
16+
};
17+
1318
return (
1419
<Layout>
1520
<section className="py-8">
16-
<h2 className="text-4xl font-black text-center font-bold">Diamond Sponsors</h2>
21+
<h2 className="text-4xl font-black text-center font-bold">DIAMOND SPONSORS</h2>
1722
<div>
1823
<div className="w-100 flex flex-col gap-16">
1924
{showModal && (
2025
<SponsorModal
2126
sponsorInfo={information}
22-
setFalse={() => {
23-
setShowModal(false);
24-
}}
27+
setFalse={() => setShowModal(false)}
2528
/>
2629
)}
2730
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-center rounded border-2 border-[#595F6D] my-10">
2831
{diamondLinks.map((item, index) => {
2932
return (
30-
<div
31-
key={index}
32-
onClick={() => {
33-
setInformation(item);
34-
setShowModal(true);
35-
}}
36-
>
33+
<div key={index} onClick={() => handleSponsorClick(item)}>
3734
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
3835
</div>
3936
);
4037
})}
4138
</div>
4239
</div>
4340
</div>
44-
<h2 className="text-4xl font-black text-center font-bold">Gold Sponsors</h2>
41+
<h2 className="text-4xl font-black text-center font-bold">GOLD SPONSORS</h2>
4542
<div>
4643
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
4744
{goldLinks.map((item, index) => {
4845
return (
49-
<div
50-
key={index}
51-
onClick={() => {
52-
setInformation(item);
53-
setShowModal(true);
54-
}}
55-
>
46+
<div key={index} onClick={() => handleSponsorClick(item)}>
5647
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
5748
</div>
5849
);
5950
})}
6051
</div>
6152
</div>
62-
<h2 className="text-4xl font-black text-center font-bold">Silver Sponsors</h2>
53+
<h2 className="text-4xl font-black text-center font-bold">SILVER SPONSORS</h2>
6354
<div>
6455
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
6556
{silverLinks.map((item, index) => {
6657
return (
67-
<div
68-
key={index}
69-
onClick={() => {
70-
setInformation(item);
71-
setShowModal(true);
72-
}}
73-
>
58+
<div key={index} onClick={() => handleSponsorClick(item)}>
7459
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
7560
</div>
7661
);

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)