aeef

src/components/footer.css

@@ -10,6 +10,7 @@ footer{
 }
 .footer{
   display: flex;
+	background-color: #e3c18a;
   justify-content: space-between;
   padding-top: 50px;
   padding-bottom: 50px;

src/components/home-page/navBar.js

@@ -4,11 +4,11 @@ import { NavLink, useNavigate } from "react-router-dom";
 
 const NAV_ITEMS = [
   { label: "Home", to: "/" },
+  { label: "Map", to: "/map" },
   { label: "Resources", to: "/resources" },
   { label: "Events", to: "/events" },
-  { label: "Map", to: "/map" },
   { label: "Timeline", to: "/timeline" },
-  { label: "References", to: "/documentation" }
+  { label: "References", to: "/documentation" },
 ];
 
 const MOBILE_ITEMS = NAV_ITEMS;
@@ -43,7 +43,15 @@ function Navigation() {
     <div className="center-header">
       <div className={`nav-bar-container${isCompact ? " compact" : ""}`}>
         <div className="brand-mark">
-          <div className="brand-text">GOOD <span><span className="O">O</span><span className="L">L</span><span className="D">D </span></span>KATY</div>
+          <div className="brand-text">
+            GOOD{" "}
+            <span>
+              <span className="O">O</span>
+              <span className="L">L</span>
+              <span className="D">D </span>
+            </span>
+            KATY
+          </div>
           <span className="brand-subtext">Resource Hub</span>
         </div>
 

src/components/timeline/timeline.css

@@ -78,6 +78,8 @@
 
   overflow: hidden;
   border-radius: 50%;
+
+	transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .masked-image {
@@ -87,21 +89,9 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-	transform: translateY(-400px) scale(1) translateX(10px);
-	object-position: top 50%;
-	opacity: 0.8;
-  animation: imageZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-@keyframes imageZoom {
-  0% {
-    transform: translateY(-400px) scale(0.8);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(-400px) scale(1);
-    opacity: 0.8;
-  }
+  object-position: top 50%;
+  opacity: 0.85;
+  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
 }
 
 .circular-timeline {

src/components/timeline/timeline.js

@@ -38,7 +38,7 @@ const timelineData = [
     description:
       "Rice farming declines and the local economy begins transitioning beyond agriculture.",
     fact: "It was during this time that Katy was officially incorporated as a city.",
-    image: `${process.env.PUBLIC_URL}/images/horses.jpg`,
+    image: `${process.env.PUBLIC_URL}/images/horses-real.jpg`,
   },
   {
     id: 3,
@@ -121,12 +121,22 @@ function Timeline() {
         </div>
       </div>
 
-      <div className="image-mask-container">
+      <div
+        className="image-mask-container"
+        style={{ transform: `rotate(${currentRotation * 0.6}deg)` }}
+      >
         <img
           src={timelineData[activeIndex].image}
-          alt="TSA logo"
+          alt=""
           className="masked-image"
           key={activeIndex}
+          style={{
+            transform: `
+      rotate(${-currentRotation * 0.6}deg)
+      scale(1.1)
+      translateY(-400px)
+    `,
+          }}
         />
       </div>