Unique Event Carousel Component and /app Routes

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:25-alpine AS build
+FROM node:22-alpine AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci

cypress/e2e/events/events.cy.ts

@@ -1,7 +1,7 @@
 describe('Event Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173/events');
+        cy.visit('localhost:5173/app/events');
 
-        cy.contains('my events');
+        cy.contains('events');
     });
 });

cypress/e2e/home/home.cy.ts

@@ -1,6 +1,6 @@
 describe('Home Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173');
+        cy.visit('localhost:5173/app/');
 
         cy.contains('UserId:');
     });

cypress/e2e/organizations/organizations.cy.ts

@@ -1,7 +1,7 @@
 describe('Organizations Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173/organizations');
+        cy.visit('localhost:5173/app/organizations');
 
-        cy.contains('my orgs');
+        cy.contains('orgs');
     });
 });

cypress/e2e/profile/profile.cy.ts

@@ -1,6 +1,6 @@
 describe('Profile Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173profile');
+        cy.visit('localhost:5173/app/profile');
 
         cy.get('h1').should('contain', 'Profile');
     });

nginx.conf

@@ -1,9 +1,14 @@
 server {
   listen 80;
 
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html;
-    try_files $uri /index.html;
+  root /usr/share/nginx/html;
+
+  location = /app {
+    return 301 /app/;
+  }
+
+  location /app/ {
+    rewrite ^/app/(.*)$ /$1 break;
+    try_files $uri $uri/ /index.html;
   }
 }

src/App.tsx

@@ -8,12 +8,12 @@ import Testing from './pages/Testing.tsx'; // temp page
 import Profile from './pages/Profile.tsx';
 import { AuthProvider } from './contexts/AuthContext.tsx';
 
-function App() {
+export default function App() {
     return (
         <>
             <AuthProvider>
                 <ThemeProvider>
-                    <BrowserRouter>
+                    <BrowserRouter basename="/app">
                         <Routes>
                             <Route element={<AppLayout />}>
                                 <Route path="/profile" element={<Profile />} />
@@ -29,5 +29,3 @@ function App() {
         </>
     );
 }
-
-export default App;

src/components/Carousel.tsx

@@ -12,7 +12,6 @@ type CarouselProps =
     | { type: 'organization'; title: string; data: Organization[] };
 
 export default function Carousel({ type, title, data }: CarouselProps) {
-    console.log(data);
     const [active, setActive] = useState(0);
 
     const moveLeft = () => {
@@ -40,7 +39,7 @@ export default function Carousel({ type, title, data }: CarouselProps) {
                               return (
                                   <EventPanel
                                       event={event}
-                                      className={`carousel-item offset-${offset}`}
+                                      className={`carousel-item ${type}-offset-${offset}`}
                                       onClick={() => setActive(index)}
                                   />
                               );
@@ -51,7 +50,7 @@ export default function Carousel({ type, title, data }: CarouselProps) {
                               return (
                                   <OrganizationPanel
                                       organization={org}
-                                      className={`carousel-item offset-${offset}`}
+                                      className={`carousel-item ${type}-offset-${offset}`}
                                       onClick={() => setActive(index)}
                                   />
                               );

src/components/EventCarouselPanel.tsx

@@ -1,4 +1,4 @@
-import '../css/organizations.css';
+import '../css/events.css';
 import '../css/carousel.css';
 
 import type { Event } from '../types/Event.ts';
@@ -11,16 +11,11 @@ type EventCarouselPanelProps = {
 
 export default function EventCarouselPanel({ event, className, onClick }: EventCarouselPanelProps) {
     return (
-        <div className={`org ${className}`} onClick={onClick}>
-            <div className="org-metadata">
-                <div className="image-placeholder"></div>
-                <span className="org-title">{event.title}</span>
+        <div className={`event ${className}`} onClick={onClick}>
+            <div className="event-metadata">
+                <span className="event-title">{event.title}</span>
                 <span>{event.description}</span>
             </div>
-            <div className="org-btns">
-                <button className="events-btn">Events</button>
-                <button className="manage-btn">Manage</button>
-            </div>
         </div>
     );
 }

src/css/carousel.css

@@ -49,77 +49,152 @@
     will-change: transform;
 }
 
+/* arrow buttons */
+.carousel-arrow {
+    z-index: 10;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 2.5rem;
+    color: black;
+    transition: var(--site-transition);
+}
+
+.carousel-arrow:hover {
+    scale: 1.1;
+}
+
+/* left arrow */
+.carousel-arrow.left {
+    margin-left: 0.5rem;
+}
+
+/* right arrow */
+.carousel-arrow.right {
+    margin-right: 0.5rem;
+}
+
 /* ===================================================== */
 
 /* OFFSETS                                               */
 
 /* ===================================================== */
 
-.offset-2 {
+.organization-offset-2 {
     transform: translate(90%, -50%) scale(0.75);
     opacity: 0.8;
     z-index: 1;
 }
 
-.offset-1 {
+.organization-offset-1 {
     transform: translate(50%, -50%) scale(0.9);
     opacity: 1;
     z-index: 2;
 }
 
-.offset-0 {
+.organization-offset-0 {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
     z-index: 3;
     box-shadow: 0 0 1rem gray;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.offset--1 {
+.organization-offset--1 {
     transform: translate(-150%, -50%) scale(0.9);
     opacity: 1;
     z-index: 2;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.offset--2 {
+.organization-offset--2 {
     transform: translate(-190%, -50%) scale(0.75);
     opacity: 0.8;
     z-index: 1;
 }
 
 /* hide far cards */
-[class*='offset-3'],
-[class*='offset--3'] {
+[class*='organization-offset-3'],
+[class*='organization-offset--3'] {
     opacity: 0;
     pointer-events: none;
     z-index: 0;
 }
 
-/* arrow buttons */
-.carousel-arrow {
-    z-index: 10;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 2.5rem;
-    color: black;
-    transition: var(--site-transition);
+.event-offset-4 {
+    transform: translate(160%, -50%) scale(0.6);
+    filter: saturate(0.2);
+    opacity: 0.8;
+    z-index: 1;
 }
 
-.carousel-arrow:hover {
-    scale: 1.1;
+.event-offset-3 {
+    transform: translate(140%, -50%) scale(0.76);
+    filter: saturate(0.4);
+    opacity: 1;
+    z-index: 2;
 }
 
-/* left arrow */
-.carousel-arrow.left {
-    margin-left: 0.5rem;
+.event-offset-2 {
+    transform: translate(105%, -50%) scale(0.88);
+    filter: saturate(0.6);
+    opacity: 1;
+    z-index: 3;
 }
 
-/* right arrow */
-.carousel-arrow.right {
-    margin-right: 0.5rem;
+.event-offset-1 {
+    transform: translate(45%, -50%) scale(0.96);
+    filter: saturate(0.8);
+    opacity: 1;
+    z-index: 4;
+}
+
+.event-offset-0 {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    z-index: 5;
+    box-shadow: 0 0 0.75rem gray;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--1 {
+    transform: translate(-145%, -50%) scale(0.96);
+    filter: saturate(0.8);
+    opacity: 1;
+    z-index: 4;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--2 {
+    transform: translate(-205%, -50%) scale(0.88);
+    filter: saturate(0.6);
+    opacity: 1;
+    z-index: 3;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--3 {
+    transform: translate(-240%, -50%) scale(0.76);
+    filter: saturate(0.4);
+    opacity: 1;
+    z-index: 2;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--4 {
+    transform: translate(-260%, -50%) scale(0.6);
+    filter: saturate(0.2);
+    opacity: 0.8;
+    z-index: 1;
+}
+
+/* hide far cards */
+[class*='event-offset-5'],
+[class*='eventoffset--5'] {
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
 }

src/css/events.css

@@ -0,0 +1,57 @@
+.event {
+    height: 16rem;
+    width: 14rem;
+    border-radius: 2rem;
+    background: var(--org-bg);
+    padding: 1.25rem;
+    color: var(--standard-bw-text);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+}
+
+.event-metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.event-title {
+    font-size: 1.1rem;
+}
+
+.event-btns {
+    margin: auto 0 0.5rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.events-btn,
+.join-btn,
+.manage-btn,
+.home-btn {
+    font-size: 1rem;
+    padding: 0.25rem 2rem;
+    border-radius: 2rem;
+    border: none;
+    cursor: pointer;
+    color: var(--standard-bw-text);
+}
+
+.events-btn {
+    background: var(--general-org-btn-bg);
+}
+
+.join-btn {
+    margin-left: auto;
+    background: var(--general-org-btn-bg);
+}
+
+.manage-btn {
+    margin-left: auto;
+    background: var(--manage-org-btn-bg);
+}
+
+.home-btn {
+    background: var(--general-org-btn-bg);
+}