+
+
+
+ );
+};
+
+
+export default CarouselButtons;
\ No newline at end of file
diff --git a/src/pages/Sponsors/sponsors-carousel.css b/src/pages/Sponsors/sponsors-carousel.css
new file mode 100644
index 0000000..dd4a02c
--- /dev/null
+++ b/src/pages/Sponsors/sponsors-carousel.css
@@ -0,0 +1,107 @@
+:root {
+ --easing: cubic-bezier(0.18, 0.89, 0.32, 1.27);
+ --duration: 0.5s;
+}
+.wheel {
+ width: 65vmin;
+ height: 65vmin;
+ transition: transform var(--duration) var(--easing);
+ position: relative;
+ top: 0%;
+ left: 0%;
+ margin: 0;
+ background-color: transparent;
+}
+.slide {
+ width: 40vw;
+ height: 0vw;
+ max-width: 600px;
+ max-height: 600px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform var(--duration) var(--easing);
+ border: 0.3vmin solid white;
+ position: absolute;
+ box-sizing: border-box;
+}
+.slide img {
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.slide img {
+ user-select: none;
+}
+
+.slide.active-mobile {
+ border-width: 1.3vmin;
+ /* height: 20vw;
+ width: 20vw; */
+ /*I want to make the highlighted one bigger - Low priority task*/
+}
+.slide.active-landscape{
+ border-width: 1vmin;
+ height: 20vw;
+ width: 20vw;
+}
+.wheel-border{
+ border: 3px #326491 dashed;
+ margin: 0;
+ animation: spin 30s linear infinite;
+ background-color: transparent;
+}
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+@media only screen and (orientation: portrait){
+ .container{
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: absolute;
+ transform: translateX(10%);
+ }
+ .wheel{
+ width: 100vw;
+ height: 100vw;
+ border-radius: 50%;
+ }
+ .wheel-border{
+ height: inherit;
+ width: inherit;
+ border-radius: 50%;
+ background-color: transparent;
+ }
+}
+@media only screen and (orientation: landscape){
+ .container{
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ rotate: 90deg;
+ align-self: stretch;
+ }
+ .wheel{
+ width: 100vh;
+ height: 100vh;
+ border-radius: 50%;
+ rotate: -90deg;
+
+ }
+ .wheel-border{
+ height: inherit;
+ width: inherit;
+ border-radius: 50%;
+ background-color: transparent;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Sponsors/sponsors-carousel.tsx b/src/pages/Sponsors/sponsors-carousel.tsx
new file mode 100644
index 0000000..b030175
--- /dev/null
+++ b/src/pages/Sponsors/sponsors-carousel.tsx
@@ -0,0 +1,168 @@
+import React, { useRef, useState, useEffect} from "react";
+import './sponsors-carousel.css';
+
+interface CircularCarouselProps {
+ flexDirection: string;
+ getCurrentSponsor: (value: any) => void;
+ images: any[];
+ carouselIndex: number;
+}
+
+const SponsorsCircularCarousel: React.FC
+
+ );
+ }
+
+ return (
+
+
+ {slides &&
+ slides.map((slide, index) => {
+ return (
+
+
+ {handleSlideClick(e);}}
+ key={index}
+ ref={wheelRef}
+ className={`slide ${slide.index === activeSlide.index ? 'active-mobile' : ''}`}
+ data-index={index + 1}
+ style={{
+ top: center.x + slide.coords.x,
+ left: center.y + slide.coords.y,
+ transform: `rotate(${-rotate}deg)`
+ }}
+ >
+ 
+
+ );
+ })}
+
+
+ );
+};
+
+export default SponsorsCircularCarousel;
\ No newline at end of file
diff --git a/src/pages/Sponsors/sponsors.css b/src/pages/Sponsors/sponsors.css
new file mode 100644
index 0000000..4bee22c
--- /dev/null
+++ b/src/pages/Sponsors/sponsors.css
@@ -0,0 +1,44 @@
+.sponsors-body{
+ height: 92vh;
+ width: 100vw;
+ display: flex;
+ box-sizing: border-box;
+ overflow: hidden;
+ top: 8vh;
+ text-align: center;
+}
+
+.sponsors-leftside{
+ height: 100%;
+ width: 50%;
+ display: flex;
+ justify-content: flex-start;
+ position: relative;
+}
+
+.sponsors-rightside{
+ height: 100%;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.sponsors-type{
+ justify-content: center;
+}
+
+.sponsors-name{
+ justify-content: center;
+ padding: 0 20%;
+}
+
+.sponsors-desc{
+ justify-content: center;
+}
+
+/*
+.container{
+
+}
+*/
\ No newline at end of file
diff --git a/src/pages/Sponsors/sponsors.tsx b/src/pages/Sponsors/sponsors.tsx
new file mode 100644
index 0000000..e2a1c4f
--- /dev/null
+++ b/src/pages/Sponsors/sponsors.tsx
@@ -0,0 +1,67 @@
+//import stuff errmmmmm idk
+//am i in the kitchen
+import SponsorsCircularCarousel from './sponsors-carousel';
+import CarouselButtonProps from './sponsors-carousel.buttons';
+import { sponsorsInfo } from '../../resources/sponsorsImagesInfo';
+import Navbar from "../../components/Navbar";
+import { getWindowDimensions } from "../Home/Home";
+import BinaryBackground from "../Home/BinaryBackground";
+import React, { useRef, useState } from "react";
+import './sponsors.css'
+
+const Sponsors: React.FC = () =>{
+ const sponsortypes = ["type", "type", "type"];
+ const sponsornames = ["Nokia", "Communications Security Establishment (CSE) Canada", "Sponsor Us!"];
+ const sponsordescs = ["yap", "yap", "plssss"];
+
+ const [currentSponsor, setCurrentSponsor] = useState(sponsorsInfo[0]);
+ const [currentindex, setIndex] = useState(0);
+
+ const changesponsor = (direction: string) => {
+
+ // Handle carousel navigation logic (forward/backward)
+ let index = currentindex;
+
+ if (direction === "fwd"){
+ index++;
+ }
+ else if (direction === "back"){
+ index--;
+ }
+
+ if (index === sponsorsInfo.length){
+ index = 0;
+ }
+ else if (index < 0){
+ index = sponsorsInfo.length - 1;
+ }
+
+ setCurrentSponsor(sponsorsInfo[index]);;
+
+ setIndex(index);
+ }
+
+ return(
+
+
+ {slides &&
+ slides.map((slide, index) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+ )
+}
+
+export default Sponsors;
\ No newline at end of file
diff --git a/src/resources/sponsorsImagesInfo.ts b/src/resources/sponsorsImagesInfo.ts
new file mode 100644
index 0000000..6614fcd
--- /dev/null
+++ b/src/resources/sponsorsImagesInfo.ts
@@ -0,0 +1,31 @@
+import cse from '../images/sponsors/cse-cst.webp';
+import nokia from '../images/sponsors/nokia.webp';
+import placeholder from '../images/sponsors/placeholder.webp';
+
+export interface Sponsor {
+ name: string;
+ type: string;
+ description: string;
+ frontImage: string;
+}
+
+export const sponsorsInfo: Sponsor[] = [
+ {
+ name: "Nokia",
+ type: "sponsor type",
+ description: "blalablablablabalb",
+ frontImage: nokia
+ },
+ {
+ name: "Communications Security Establishment (CSE) Canada",
+ type: "sponsor type 2",
+ description: "bababbababab 2",
+ frontImage: cse
+ },
+ {
+ name: "Sponsor us!",
+ type: "",
+ description: "PLEASEPLEASEPLEASEPLEASEPLASE",
+ frontImage: placeholder
+ },
+]
\ No newline at end of file
+
+
+
+
+
+
+
+ {currentSponsor.type}
+
+
+ {currentSponsor.name}
+
+
+ {currentSponsor.description}
+