Merge pull request #66 from RGBOARD/landing_page

Landing Page

Author: edimarvalentin

view/src/App.css

@@ -8,6 +8,10 @@
     font-display: swap;
 }
 
+.content > .landing-container {
+  flex-direction: row !important;
+}
+
 /* Make sure pages within content area use full height */
 .content > div {
   flex: 1;
@@ -16,6 +20,10 @@
   overflow: hidden;
 }
 
+.content > .landing-page {
+  flex-direction: row !important;
+}
+
 /* Your existing button menu styles */
 .button-menu {
   display: flex;

view/src/App.jsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import './App.css';
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -12,12 +12,13 @@ import ViewPage from './pages/ViewPage';
 import QueueAdminPage from './pages/QueueAdminPage';
 import UserAdminPage from './pages/UserAdminPage';
 import LoadingPage from './pages/LoadingPage';
+import LandingPage from './pages/LandingPage';
 import AuthProvider from './auth/AuthProvider';
 import { useAuth } from './auth/authContext';
 
 function AppContent() {
   const { isLoading, isAuthenticated, hasRole, hasAnyRole } = useAuth();
-
+  const location = useLocation();
   if (isLoading) {
     return <LoadingPage />;
   }
@@ -37,7 +38,7 @@ function AppContent() {
 
   return (
     <div className="app-container">
-      <Header />
+      {!(location.pathname === '/' && !isAuthenticated) && <Header />}
       <main className="content">
         <Routes>
           <Route 
@@ -47,7 +48,7 @@ function AppContent() {
           <Route 
             path="/" 
             element={
-              !isAuthenticated ? <Navigate to="/login" /> :
+              !isAuthenticated ? <LandingPage /> :
               hasRole('admin') ? <AdminHome /> : <UserHome />
             } 
           />

view/src/assets/RGB-Icon.png

@@ -9,7 +9,7 @@
 }
 
 .logo img {
-  height: 100px;
+  margin: 25px 2px;
   width: 180px; 
 }
 

view/src/components/styles/Header.css

@@ -0,0 +1,32 @@
+import { useNavigate } from 'react-router-dom';
+import './styles/LandingPage.css'
+import logoImage from '../assets/RGB-Icon.png';
+import React from "react";
+
+const LandingPage = () => {
+  const navigate = useNavigate();
+
+  return (
+      <div className="landing-container">
+          <div className="desc-container landing-page-animation">
+              <img className= "landing-logo" src={logoImage} alt="RGB Board"/>
+              <p className="sponsored font-bold">Sponsored by:</p>
+              <p className="sponsored bold">IEEE Computer Society – Student Branch, University of Puerto Rico at Mayagüez</p>
+              <h1 className="desc-title spacing">What are we about?</h1>
+              <p className= "desc">
+                  RGBoard provides a dynamic, engaging, and simple to understand system
+                  that allows its users to to engage with each other and the wider community of people
+                  that view the images and ads displayed in the board. Using the RGBoard site you can upload
+                  flyers or image ads and have them be displayed in the RGBoard’s LED Board. Being able to display
+                  ads and reach out to students in a fuss-less and convenient way.
+              </p>
+          </div>
+          <div className="choice-container landing-page-animation">
+              <button className="landing-buttons" onClick={() => navigate('/login')}>Log In</button>
+              <button className= "landing-buttons" onClick={() => navigate('/signup')}>Sign Up</button>
+          </div>
+      </div>
+  );
+};
+
+export default LandingPage;

view/src/pages/LandingPage.jsx

@@ -0,0 +1,96 @@
+@font-face {
+  font-family: 'PixelifySans';
+  src: url('../../assets/fonts/PixelifySans/PixelifySans-VariableFont_wght.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@keyframes fadeSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.landing-page-animation {
+  animation: fadeSlideIn 0.6s ease-out both;
+}
+
+.landing-container{
+    background: #D9D9D9;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding: 1.5rem;
+    width: 100%;
+    font-size: larger;
+}
+
+.landing-logo{
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+}
+
+.desc-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.desc-title {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.desc {
+  max-width: 600px;
+  width: 100%;
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  margin: 0 auto;
+}
+
+.sponsored{
+    font-family: "Pixelify Sans", sans-serif;
+    max-width: 600px;
+    font-size: 24px;
+}
+.choice-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.landing-buttons{
+  width: 100%;
+  max-width: 400px;
+  padding: clamp(1rem, 2.5vw, 2rem) clamp(3rem, 8vw, 6rem);
+  font-size: clamp(1rem, 3vw, 2rem);
+  color: white;
+  font-weight: 600;
+  border-radius: 2rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  outline: none;
+  background: black;
+  font-family: "Pixelify Sans", sans-serif;
+  text-align: center;
+  cursor: pointer;
+}
+
+.landing-buttons:hover {
+    background-color: white;
+    color: black;
+    transform: translateY(-2px);
+}
+
+.spacing {
+  margin-top: 2rem;
+}