From 103149d0274fe4cadb6af042e7e575db8c5d968c Mon Sep 17 00:00:00 2001 From: addison Date: Thu, 12 Sep 2024 18:50:06 +1000 Subject: [PATCH 1/6] carousel nearly finished, need animation for background --- frontend/src/components/Carousel.tsx | 26 ++++++ frontend/src/pages/sponsors.tsx | 120 ++++++++++++++------------- 2 files changed, 87 insertions(+), 59 deletions(-) create mode 100644 frontend/src/components/Carousel.tsx diff --git a/frontend/src/components/Carousel.tsx b/frontend/src/components/Carousel.tsx new file mode 100644 index 0000000..8442fc8 --- /dev/null +++ b/frontend/src/components/Carousel.tsx @@ -0,0 +1,26 @@ +import { useState } from "react"; +import { sponsorInfo } from "../../public/data/sponsorInfos"; + +interface CarouselImages { + images: { category: string; href: string; svg: string; alt: string; description: string; }[]; + onImageClick: (info: sponsorInfo) => void; +} + +export default function Carousel({ images, onImageClick }: CarouselImages) { + return ( +
+
+ {images.map((image, index) => ( + {image.alt} onImageClick(image)} + /> + ))} +
+
+ ); +} diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx index ae83c8a..685c974 100644 --- a/frontend/src/pages/sponsors.tsx +++ b/frontend/src/pages/sponsors.tsx @@ -3,22 +3,44 @@ import { useState } from 'react'; import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos'; import SponsorModal from '@/components/Sponsors/SponsorModal'; import PageTitle from '@/components/PageTitle'; +import Carousel from '@/components/Carousel'; +import { motion, AnimatePresence } from 'framer-motion'; export default function SponsorsPage() { - const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105'; - const logodiv = 'block gap-y-8 h-14'; const background = 'rgba(57, 119, 248, 0.6)'; const [showModal, setShowModal] = useState(false); const [information, setInformation] = useState(null); + const [currentCategory, setCurrentCategory] = useState<'Diamond' | 'Gold' | 'Silver'>('Diamond'); + + const sponsors = { + Diamond: diamondLinks, + Gold: goldLinks, + Silver: silverLinks + } + + const handleClick = (info: sponsorInfo) => { + setInformation(info); + setShowModal(true); + }; + + const handleCategoryChange = (category: 'Diamond' | 'Gold' | 'Silver') => { + setCurrentCategory(category); + }; + + const containerVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }, + exit: { opacity: 0, y: 20, transition: { duration: 0.3 } }, + }; return ( - - + +
-
+
{showModal && ( -

Diamond Sponsors

- {diamondLinks.map((item, index) => { - return ( -
{ - setInformation(item); - setShowModal(true); - }} - > - {item.alt} -
- ); - })} -
-
-

Gold Sponsors

- {goldLinks.map((item, index) => { - return ( -
{ - setInformation(item); - setShowModal(true); - }} + +
+ {['Diamond', 'Gold', 'Silver'].map(category => ( +

handleCategoryChange(category as 'Diamond' | 'Gold' | 'Silver')} > - {item.alt} -

- ); - })} -
-
-

Silver Sponsors

- {silverLinks.map((item, index) => { - return ( -
{ - setInformation(item); - setShowModal(true); - }} + // {category.toLowerCase()} + + ))} +
+ +
+ + - {item.alt} -
- ); - })} + ({ + ...item, + category: currentCategory, + }))} + onImageClick={handleClick} + /> + + +
From aec886339ebd9ff42ee45a4b80ed0bad25c8c016 Mon Sep 17 00:00:00 2001 From: addison Date: Fri, 20 Sep 2024 18:12:46 +1000 Subject: [PATCH 2/6] done sponsors --- frontend/src/pages/sponsors.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx index 685c974..f10ca99 100644 --- a/frontend/src/pages/sponsors.tsx +++ b/frontend/src/pages/sponsors.tsx @@ -58,7 +58,7 @@ export default function SponsorsPage() { {['Diamond', 'Gold', 'Silver'].map(category => (

handleCategoryChange(category as 'Diamond' | 'Gold' | 'Silver')} From a172ade82aefe2efd45d95f88648a69fc6675b8f Mon Sep 17 00:00:00 2001 From: Addison Date: Fri, 11 Oct 2024 01:39:17 +1100 Subject: [PATCH 3/6] Carousel for sponsors done --- frontend/package-lock.json | 9 ++ frontend/package.json | 1 + .../src/components/About/AboutHomepage.tsx | 2 +- frontend/src/components/Event/index.tsx | 2 +- frontend/src/components/Sponsors/index.tsx | 82 +++++++++++++++---- frontend/src/styles/globals.css | 15 ++++ package-lock.json | 6 ++ 7 files changed, 101 insertions(+), 16 deletions(-) create mode 100644 package-lock.json diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cebf6c7..176abf9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,6 +20,7 @@ "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", + "react-multi-carousel": "^2.8.5", "tailwindcss": "3.3.3", "typescript": "5.1" }, @@ -4141,6 +4142,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/react-multi-carousel": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz", + "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==", + "engines": { + "node": ">=8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7aea3ff..d04ed3b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -25,6 +25,7 @@ "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", + "react-multi-carousel": "^2.8.5", "tailwindcss": "3.3.3", "typescript": "5.1" }, diff --git a/frontend/src/components/About/AboutHomepage.tsx b/frontend/src/components/About/AboutHomepage.tsx index 31975b4..42c3659 100644 --- a/frontend/src/components/About/AboutHomepage.tsx +++ b/frontend/src/components/About/AboutHomepage.tsx @@ -14,7 +14,7 @@ export default function AboutHomePage() { CSESoc Icon

CSESoc

- + {/* RIGHT SIDE */}
diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index b9b1a0c..f9f98a7 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -11,7 +11,7 @@ const Event = () => { listings, check out the CSESoc Discord or our Facebook page!

- diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index f3217f1..6bf1a01 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -1,11 +1,27 @@ import React from 'react'; import Footer from '@/components/Footer'; +import Carousel from 'react-multi-carousel'; +import 'react-multi-carousel/lib/styles.css'; const Sponsors = () => { - const firstRowBoxesStyling = - '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'; - const secondRowBoxesStyling = - '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'; + const responsive = { + superLargeDesktop: { + breakpoint: { max: 4000, min: 1024 }, + items: 3, + }, + desktop: { + breakpoint: { max: 1024, min: 768 }, + items: 3, + }, + tablet: { + breakpoint: { max: 768, min: 464 }, + items: 2, + }, + mobile: { + breakpoint: { max: 464, min: 0 }, + items: 1, + }, + }; return (
{

SUPPORT CSESOC

-
+
-
+
+

Our sponsors

+
+ + +
+ TikTok logo +
+
+ Jane Street logo +
+
+ Atlassian logo +
+
+ Citadel logo +
+
+ IMC logo +
+
+ Neara logo +
+ + + + {/*
-

Our sponsors

+

Our sponsors

Check out our very cool sponsors.

@@ -45,7 +99,7 @@ const Sponsors = () => {
Microsoft logo -
+
*/}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index c96c5a6..1546ba9 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -29,3 +29,18 @@ body { .hover-animate:hover { transform: scale(1.01); } + +.sponsor-item { + padding: 16px; + margin: 0 2rem; + display: flex; + justify-content: center; + align-items: center; +} + +.sponsor-item img { + width: 24rem; + height: 8rem; + object-fit: contain; + filter: brightness(0) invert(1); +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..14ab158 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "csesoc-website-2023", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 6f3e0dc190358747d641d0ea3308037f7042abbc Mon Sep 17 00:00:00 2001 From: Addison Date: Fri, 11 Oct 2024 02:00:09 +1100 Subject: [PATCH 4/6] removed old code --- frontend/src/components/Sponsors/index.tsx | 23 ---------------------- 1 file changed, 23 deletions(-) diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index 6bf1a01..effe500 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -77,29 +77,6 @@ const Sponsors = () => {
- {/*
-
-

Our sponsors

-

Check out our very cool sponsors.

- - - -
-
-
- Atlassian logo -
-
- Google logo -
-
- Freelancer logo -
-
- Microsoft logo -
*/}