sponsors page update NOT FINISHED

package.json

@@ -25,7 +25,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.30.0",
     "react-scripts": "5.0.1",
     "stream": "^0.0.3",
     "typescript": "^4.9.5",

src/App.tsx

@@ -8,6 +8,7 @@ import Minutes from './pages/Minutes/Minutes';
 import Volunteer from './pages/Volunteer/Volunteer';
 import Blog from './pages/Blog/Blog';
 import Events from './pages/Events/Events';
+import Sponsors from './pages/Sponsors/sponsors'
 
 export function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
@@ -24,6 +25,7 @@ const App: React.FC = () => {
     { name: 'Volunteer', url: '/volunteer' },
     { name: 'Minutes', url: '/minutes' },
     { name: 'About', url: '/about' },
+    { name: 'Sponsors', url: '/sponsors' },
   ];
 
   const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
@@ -34,6 +36,7 @@ const App: React.FC = () => {
         <Navbar title="My Navbar" links={links} />
         <Routes>
           <Route path="/" Component={Home} />
+          <Route path="/sponsors" Component={Sponsors} />
           <Route path="/about" Component={About} />
           <Route path="/minutes" Component={Minutes} />
           <Route path="/volunteer" Component={Volunteer} />

src/pages/Sponsors/sponsors-carousel-buttons.css

@@ -0,0 +1,21 @@
+.sponsors-buttoncontainer{
+    font-family: 'Intervogue Soft';
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding: 3% 0;
+}
+
+.sponsors-buttons{
+    background-color: transparent;
+    outline: none;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    color: rgba(0, 0, 0, 0);
+}
+
+button svg{
+    width: 3em;
+    height: 3em;
+}

src/pages/Sponsors/sponsors-carousel.buttons.tsx

@@ -0,0 +1,24 @@
+import React, { useRef, useState, useEffect} from "react";
+import './sponsors-carousel-buttons.css';
+
+interface CarouselButtonProps{
+    changesponsor: (direction: string) => void;
+}
+
+const CarouselButtons: React.FC<CarouselButtonProps> = ({changesponsor}) => {
+    return(
+        <div className="sponsors-buttoncontainer">
+            <button className="sponsors-buttons" onClick={() => changesponsor("fwd")}>
+                <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="matrix(-1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m16 0c8.836556 0 16 7.163444 16 16s-7.163444 16-16 16-16-7.163444-16-16 7.163444-16 16-16zm2.7781746 9.60710678c-.3905243-.39052429-1.0236893-.39052429-1.4142136 0l-5.6568542 5.65685422c-.180242.180242-.2772954.4121708-.2911601.6480754v.1612085c.0138647.2359047.1109181.4678335.2911601.6480754l5.6568542 5.6568543c.3905243.3905243 1.0236893.3905243 1.4142136 0s.3905243-1.0236893 0-1.4142136l-4.9712279-4.9717474 4.9712279-4.9708933c.3905243-.3905242.3905243-1.02368923 0-1.41421352z" fill="#46638d" fill-rule="evenodd"></path></g></svg>
+                next
+            </button>
+            <button className="sponsors-buttons" onClick={() => changesponsor("back")}>
+                 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m16 0c8.836556 0 16 7.163444 16 16s-7.163444 16-16 16-16-7.163444-16-16 7.163444-16 16-16zm2.7781746 9.60710678c-.3905243-.39052429-1.0236893-.39052429-1.4142136 0l-5.6568542 5.65685422c-.180242.180242-.2772954.4121708-.2911601.6480754v.1612085c.0138647.2359047.1109181.4678335.2911601.6480754l5.6568542 5.6568543c.3905243.3905243 1.0236893.3905243 1.4142136 0s.3905243-1.0236893 0-1.4142136l-4.9712279-4.9717474 4.9712279-4.9708933c.3905243-.3905242.3905243-1.02368923 0-1.41421352z" fill="#46638d" fill-rule="evenodd"></path></g></svg>
+                back
+            </button>
+        </div>
+    );
+};
+
+
+export default CarouselButtons;

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;
+    }
+}