Skip to content

Commit a172ade

Browse files
h34312575sh34312575s
committed
Carousel for sponsors done
1 parent aec8863 commit a172ade

File tree

7 files changed

+101
-16
lines changed

7 files changed

+101
-16
lines changed

‎frontend/package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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/Event/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Event = () => {
1111
listings, check out the CSESoc Discord or our Facebook page!
1212
</p>
1313
<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">
14+
<button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate">
1515
See all events
1616
</button>
1717
</a>

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

Lines changed: 68 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
import React from 'react';
22
import Footer from '@/components/Footer';
3+
import Carousel from 'react-multi-carousel';
4+
import 'react-multi-carousel/lib/styles.css';
35

46
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';
7+
const responsive = {
8+
superLargeDesktop: {
9+
breakpoint: { max: 4000, min: 1024 },
10+
items: 3,
11+
},
12+
desktop: {
13+
breakpoint: { max: 1024, min: 768 },
14+
items: 3,
15+
},
16+
tablet: {
17+
breakpoint: { max: 768, min: 464 },
18+
items: 2,
19+
},
20+
mobile: {
21+
breakpoint: { max: 464, min: 0 },
22+
items: 1,
23+
},
24+
};
925

1026
return (
1127
<section
@@ -15,21 +31,59 @@ const Sponsors = () => {
1531
<div className="text-center">
1632
<h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
1733
</div>
18-
<div className="flex-1 flex justify-center items-center my-20">
34+
<div className="flex-1 flex justify-center items-center">
1935
<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"
36+
className="rounded border border-[#595F6D] p-5 h-auto overflow-hidden w-[90rem] flex flex-col gap-8 py-8"
2537
>
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">
38+
<div className="flex flex-col justify-center items-center">
39+
<h2 className="text-center text-4xl font-black">Our sponsors</h2>
40+
</div>
41+
42+
<Carousel
43+
responsive={responsive}
44+
infinite={true}
45+
autoPlay={true}
46+
arrows={false}
47+
autoPlaySpeed={3000}
48+
keyBoardControl={false}
49+
transitionDuration={500}
50+
pauseOnHover={false}
51+
containerClass="carousel-container my-16"
52+
>
53+
<div className="sponsor-item">
54+
<img src="assets/tiktok_logo.svg" alt="TikTok logo" />
55+
</div>
56+
<div className="sponsor-item">
57+
<img src="assets/janestreet_logo.svg" alt="Jane Street logo" />
58+
</div>
59+
<div className="sponsor-item">
60+
<img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
61+
</div>
62+
<div className="sponsor-item">
63+
<img src="assets/citadel_logo.svg" alt="Citadel logo" />
64+
</div>
65+
<div className="sponsor-item">
66+
<img src="assets/imc_logo.svg" alt="IMC logo" />
67+
</div>
68+
<div className="sponsor-item">
69+
<img src="assets/neara_logo.svg" alt="Neara logo" />
70+
</div>
71+
</Carousel>
72+
73+
<div className="flex justify-center items-center">
74+
<a href="sponsors">
75+
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
76+
Learn More
77+
</button>
78+
</a>
79+
</div>
80+
{/* <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">
2781
<div className="max-w-[15rem]">
28-
<h2 className="text-4xl font-black">Our sponsors</h2>
82+
<h2 className="text-4xl font-black text-center">Our sponsors</h2>
2983
<p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
3084
<a href="sponsors">
3185
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">
32-
View our sponsors
86+
Learn More
3387
</button>
3488
</a>
3589
</div>
@@ -45,7 +99,7 @@ const Sponsors = () => {
4599
</div>
46100
<div className={`${secondRowBoxesStyling} bg-[rgba(122, 137, 236, 0.27)]`}>
47101
<img src="assets/microsoft_logo.svg" alt="Microsoft logo" />
48-
</div>
102+
</div> */}
49103
</div>
50104
</div>
51105
<Footer />

‎frontend/src/styles/globals.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,18 @@ body {
2929
.hover-animate:hover {
3030
transform: scale(1.01);
3131
}
32+
33+
.sponsor-item {
34+
padding: 16px;
35+
margin: 0 2rem;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
}
40+
41+
.sponsor-item img {
42+
width: 24rem;
43+
height: 8rem;
44+
object-fit: contain;
45+
filter: brightness(0) invert(1);
46+
}

‎package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)