React revamp

src/components/Footer/Footer.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import FacebookIcon from "@mui/icons-material/Facebook";
 import YouTubeIcon from "@mui/icons-material/YouTube";
+import GitHubIcon from "@mui/icons-material/GitHub";
 
 import "./Footer.css";
 
@@ -37,6 +38,13 @@ const Footer: React.FC = () => {
           >
             <YouTubeIcon fontSize="large" className="footer-social-icon" />
           </a>
+          <a
+            href="https://github.com/frc5431/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <GitHubIcon fontSize="large" className="footer-social-icon" />
+          </a>
         </div>
       </div>
     </footer>

src/pages/Events/Events.css

@@ -90,8 +90,68 @@
 }
 
 .balloon-img {
-  width: 70vw;
+  width: 40vw;
   border-radius: 9px;
   display: block;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
+
+.balloon-text {
+  color: #2b0250;
+  font-size: 1.2rem;
+  text-align: center;
+  margin-top: 12px;
+  width: 40vw;
+}
+
+.section-container-events {
+  display: flex;
+  justify-content: center;
+  background-color: #dedede !important;
+  padding-bottom: 2vh;
+  flex-direction: row;
+  gap: 5vw;
+}
+
+.section-container-arrows {
+  display: flex;
+  justify-content: space-around;
+  background-color: #dedede !important;
+  padding-bottom: 5vh;
+  flex-direction: column;
+  width: 100vw;
+}
+
+@media (min-width: 769px) {
+  .section-container-arrows {
+    padding-left: 10vw;
+    padding-right: 10vw;
+  }
+}
+
+@media (max-width: 1140px) {
+  .section-container-arrows {
+    padding-left: 1vw;
+    padding-right: 1vw;
+  }
+}
+
+@media (max-width: 768px) {
+  .events-main-text {
+    font-size: 3.5rem !important;
+  }
+
+  .balloon-img {
+    width: 80vw;
+  }
+
+  .balloon-text {
+    width: 80vw;
+    font-size: 1rem;
+  }
+
+  .section-container-events {
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/pages/Events/Events.tsx

@@ -2,6 +2,15 @@
 import "./Events.css";
 import Footer from "../../components/Footer/Footer";
 import BalloonFestival from "../../assets/img/universal/planoballoonfestival.png";
+import stemGals from "../../assets/img/universal/stem gals.jpg";
+import Carousel from "../../components/Carosuel/Carousel";
+import imageAliases from "../../assets/imageAliases";
+
+export interface CarouselItem {
+  id: number;
+  imagePath: string;
+  alt: string;
+}
 
 const Events: React.FC = () => {
   const [isMobile, setIsMobile] = useState(false);
@@ -17,6 +26,29 @@ const Events: React.FC = () => {
     return () => window.removeEventListener("resize", checkIfMobile);
   }, []);
 
+  const carouselItems: CarouselItem[] = [
+    {
+      id: 1,
+      imagePath: imageAliases.universal5431NumberSign,
+      alt: "Team 5431 number sign",
+    },
+    {
+      id: 2,
+      imagePath: imageAliases.frcEvent,
+      alt: "FRC Event",
+    },
+    {
+      id: 3,
+      imagePath: imageAliases.hatConstruction,
+      alt: "Robot construction",
+    },
+    {
+      id: 4,
+      imagePath: imageAliases.hyperionShooting,
+      alt: "Robot shooting",
+    },
+  ];
+
   const calendarSrc = isMobile
     ? "https://calendar.google.com/calendar/embed?src=pisd.edu_57n5cfp52bltnua0aegb3mnr18%40group.calendar.google.com&ctz=America%2FChicago&mode=AGENDA"
     : "https://calendar.google.com/calendar/embed?src=pisd.edu_57n5cfp52bltnua0aegb3mnr18%40group.calendar.google.com&ctz=America%2FChicago";
@@ -92,18 +124,54 @@ const Events: React.FC = () => {
         </div>
       </section>
       <section
+        className="section-container-events"
         style={{
           position: "relative",
           zIndex: 1,
         }}
       >
-        <h2 className="calendar-title">Plano Balloon Festival</h2>
-        <div className="balloon-container">
-          <img
-            src={BalloonFestival}
-            alt="Plano Balloon Festival"
-            className="balloon-img"
-          />
+        <div>
+          <h2 className="calendar-title">Plano Balloon Festival</h2>
+          <div className="balloon-container">
+            <img
+              src={BalloonFestival}
+              alt="Plano Balloon Festival"
+              className="balloon-img"
+            />
+          </div>
+          <div>
+            <p className="balloon-text">
+              Join us for the annual Plano Balloon Festival!
+            </p>
+          </div>
+        </div>
+        <div>
+          <h2 className="calendar-title">NTX Stem Gals</h2>
+          <div className="balloon-container">
+            <img src={stemGals} alt="NTX Stem Gals" className="balloon-img" />
+          </div>
+          <div>
+            <p className="balloon-text">
+              <a target="_blank" href="https://www.ntxrobotics.com/">
+                NTX
+              </a>{" "}
+              is an annual event, that supports women in STEM.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section className="section-container-arrows">
+        <div>
+          <h2 className="calendar-title">Event Gallery</h2>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              margin: "2rem 0",
+            }}
+          >
+            <Carousel data={carouselItems} />
+          </div>
         </div>
       </section>
 

src/pages/Homepage/Home.css

@@ -2,6 +2,68 @@
 @import url("https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Gothic+A1&family=Outfit:wght@100..900&display=swap");
 
+/* Video background for team description container */
+.video-bg-container {
+  position: relative;
+  overflow: hidden;
+  /* Color filter options - change this variable to apply different color overlays */
+  /* --video-filter-color: rgba(47, 42, 50, 0.3); Default: purple overlay with 30% opacity */
+
+  /* Predefined color options (uncomment one to use):
+  --video-filter-color: rgba(29, 175, 234, 0.3);  /* Brand blue overlay */
+  --video-filter-color: rgba(
+    2,
+    32,
+    78,
+    0.4
+  ); /* Brand navy overlay
+  /* --video-filter-color: rgba(43, 2, 80, 0.3);     /* Brand purple overlay */
+  /* --video-filter-color: rgba(0, 0, 0, 0.4);       /* Black overlay */
+  /* --video-filter-color: rgba(255, 255, 255, 0.2); /* White overlay */
+  /* --video-filter-color: rgba(255, 0, 0, 0.3);     /* Red overlay */
+  /* --video-filter-color: rgba(0, 255, 0, 0.3);     /* Green overlay */
+  /* --video-filter-color: transparent;              /* No color overlay */
+}
+
+.video-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 0;
+  pointer-events: none;
+  filter: blur(3px);
+}
+
+@media (max-width: 768px) {
+  .video-bg {
+    height: 120vh;
+  }
+}
+
+.video-bg::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--video-filter-color);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.team-description-content {
+  display: flex;
+  position: relative;
+  z-index: 2;
+  padding: 2rem;
+  border-radius: 1rem;
+  align-items: center;
+  flex-direction: column;
+}
+
 :root {
   --primary-color: #8b1fea;
   --secondary-color: #3c0370;
@@ -10,7 +72,8 @@
   --brand-navy: #02204e;
   --brand-purple: #2b0250;
   --light-bg: rgba(255, 255, 255, 0.9);
-  --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  flex-direction: column;
+  align-items: center;
 }
 
 .carousel-container {
@@ -21,6 +84,10 @@
   align-items: center;
 }
 
+.card {
+  border-radius: 10px;
+}
+
 .center-element {
   display: flex;
   flex-direction: column;
@@ -49,12 +116,26 @@
 }
 
 .team-number {
-  width: 25vw;
+  width: 30vw;
   filter: drop-shadow(0 2px 8px rgba(139, 31, 234, 0.3))
     drop-shadow(0 4px 16px rgba(29, 175, 234, 0.2))
     drop-shadow(0 8px 24px rgba(2, 32, 78, 0.1));
-  margin-bottom: 1vh;
+  filter: invert(1);
   padding-top: 10vh;
+  z-index: 10;
+  opacity: 0.7;
+  margin-bottom: 1vh;
+}
+
+.who-are-we {
+  font-size: 2.5rem;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin-bottom: 3vh;
+  z-index: 10;
+  opacity: 0.7;
+  margin-bottom: 7vh;
+  letter-spacing: 0.01em;
 }
 
 @media (max-width: 768px) {
@@ -264,7 +345,6 @@
 @media (max-width: 768px) {
   .sponsors-banner {
     padding: 2rem 1rem;
-    margin: 0 0.5rem;
   }
 
   .sponsors-title {
@@ -284,7 +364,6 @@
 /* Subteams Section */
 .subteams-section-container {
   margin: 3rem 0;
-  padding: 0 1rem;
 }
 
 .subteams-banner {
@@ -364,7 +443,6 @@
   .subteams-banner {
     border-radius: 10px;
     padding: 3rem 1rem;
-    margin: 0 0.5rem;
     min-height: 350px;
     display: flex;
     align-items: center;
@@ -533,3 +611,51 @@
     min-height: 300px;
   }
 }
+
+.team-description-container {
+  display: flex;
+  justify-content: center;
+  padding: 5vh;
+  padding-bottom: 10vh;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  border: 20px solid rgba(4, 0, 52, 1);
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgba(0, 44, 91, 0);
+  height: 100vh;
+}
+
+@media (max-width: 768px) {
+  .team-description-container {
+    height: 120vh;
+  }
+}
+
+.team-description-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #040034;
+  background-size: 100% 100%;
+  z-index: 0;
+}
+@media (max-width: 768px) {
+  .description-team {
+    width: 90vw;
+  }
+}
+
+.description-team {
+  width: 80vw;
+  font-size: 1.15rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.4);
+  padding: 1.2rem;
+  border-radius: 10px;
+  z-index: 10;
+}