catcup

package.json

@@ -28,8 +28,6 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
     ]
   },
   "browserslist": {

src/components/documentation/Documentation.js

@@ -217,11 +217,11 @@ function Documentation() {
             </li>
             <li>
               <a
-                href="https://commons.wikimedia.org/wiki/File:Richmond_TX_George_Library.JPGhttps://en.wikipedia.org/wiki/File:City_of_katy_logo.png"
+                href="https://www.freepik.com/photos/aerial-suburbs?utm_medium=organic&utm_source=yandexsmartcamerag"
                 target="_blank"
                 rel="noreferrer"
               >
-                City of Katy Logo (Wikimedia Commons)
+                Suburban Overview (freepik)
               </a>
             </li>
             <li>
@@ -235,11 +235,21 @@ function Documentation() {
             </li>
             <li>
               <a
-                href="https://communityimpact.com/houston/katy/government/2020/02/25/new-mural-to-be-painted-on-katy-water-tank/#&gid=1&pid=1"
+                href="https://wanbridge.com/educate/moving-to-pearland-tx/?utm_medium=organic&utm_source=yandexsmartcamera"
                 target="_blank"
                 rel="noreferrer"
               >
-                Katy Water tower (Community Impact)
+                Sky High image of Pearland Texas(wanbridge)
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="https://www.cityofkaty.com/about/city-history"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Information over Katy History (City of Katy)
               </a>
             </li>
           </ul>

src/components/home-page/navBar.js

@@ -7,22 +7,14 @@ const NAV_ITEMS = [
   { label: "Resources", to: "/resources" },
   { label: "Events", to: "/events" },
   { label: "Map", to: "/map" },
-  { label: "Timeline", to: "/timeline" }
+  { label: "Timeline", to: "/timeline" },
+  { label: "References", to: "/documentation" }
 ];
 
-const MORE_ITEMS = [
-  { label: "References", to: "/documentation" },
-  { label: "Resources", to: "/resources" },
-  { label: "Events", to: "/events" }
-];
-
-const MOBILE_ITEMS = Array.from(
-  new Map([...NAV_ITEMS, ...MORE_ITEMS].map((item) => [item.to, item])).values()
-);
+const MOBILE_ITEMS = NAV_ITEMS;
 
 function Navigation() {
   const navigate = useNavigate();
-  const [dropdownValue, setDropdownValue] = useState("");
   const [mobileValue, setMobileValue] = useState("");
   const [isCompact, setIsCompact] = useState(false);
 
@@ -39,14 +31,6 @@ function Navigation() {
     };
   }, []);
 
-  const select = (event) => {
-    const path = event.target.value;
-    if (path) {
-      navigate(path);
-      setDropdownValue("");
-    }
-  };
-
   const selectMobile = (event) => {
     const path = event.target.value;
     if (path) {
@@ -97,24 +81,7 @@ function Navigation() {
           </select>
         </div>
 
-        <div className="nav-actions">
-          <div className="more-dropdown">
-            <select
-              className="header-link"
-              onChange={select}
-              value={dropdownValue}
-            >
-              <option value="" disabled>
-                More
-              </option>
-              {MORE_ITEMS.map(item => (
-                <option key={item.to} value={item.to}>
-                  {item.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
+        <div className="nav-actions" />
       </div>
     </div>
   );

src/components/resources/ResourcesList.js

@@ -90,7 +90,7 @@ export default function ResourcesList() {
                         >
                             <div className={`info-card ${href ? "clickable" : ""}`}>
                                 <div className="top-row">
-                                    <div style={{ fontWeight: 700 }}>{r.name}</div>
+                                    <div className="resource-name">{r.name}</div>
                                     <div className="muted">{r.category}</div>
                                 </div>
 

src/components/styles/pages.css

@@ -130,20 +130,20 @@
 }
 
 .info-card {
-  border: 1.5px solid var(--border-muted);
+  border: 2px solid black;
   border-radius: 0;
   padding: 14px 16px;
   background: rgba(255, 255, 255, 0.65);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
   transition:
     transform 0.15s ease,
     box-shadow 0.2s ease,
     border-color 0.2s ease,
     background-color 0.2s ease;
   display: flex;
   flex-direction: column;
+  border-radius: 4px;
   gap: 8px;
-
+  box-shadow: 3px 3px rgba(0, 0, 0, 0.44);
 }
 
 .info-card.clickable {
@@ -152,9 +152,7 @@
 
 .info-card:hover {
   transform: translateY(-2px);
-  background: var(--accent-soft);
-  border-color: var(--accent);
-  box-shadow: 0 14px 28px rgba(196, 62, 92, 0.18);
+  box-shadow: 3px 3px rgb(0,0,0, 1);
 }
 
 .info-card .pill-row {
@@ -169,6 +167,8 @@
   border: 1px solid #ccc;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.03);
+  font-family: "DIN Condensed Web";
+  font-size: 18px;
 }
 
 .info-card .top-row,
@@ -181,6 +181,7 @@
 
 .info-card .muted {
   opacity: 0.8;
+  font-family: 'DIN Condensed Web';
 }
 
 .page-cta-row {

src/components/timeline/timeline.css

@@ -30,10 +30,16 @@
 }
 
 .content-title {
-  font-family: "DIN Condensed Web";
+  font-family: "Yearbook Solid W01";
   font-size: 3rem;
-  color: #bc6c25; 
-  margin-top: 5px; 
+  letter-spacing: 2px;
+  color: black; 
+  margin-top: 0px; 
+  background-color: #bc6c25;
+  padding: 5px 0px 5px 0px;
+  border: 2px solid black;
+  box-shadow: 3px 3px rgba(0,0,0,.2);
+  border-radius: 6px;
   width: 600px;  
   margin-left: 50%; 
   transform: translateX(-50%);
@@ -81,8 +87,8 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-	transform: translateY(-400px) scale(1);
-	object-position: center 50%;
+	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);
 }
@@ -193,6 +199,12 @@
   .year-image {
     margin-top: 320px;
   }
+  .image-mask-container{
+    width: 1200px;
+    height: 1200px;
+    top: 240px;
+    margin-left: -600px;
+  }
 }
 
 @media (max-width: 900px) {
@@ -211,6 +223,13 @@
     height: 120px;
     margin-top: 350px;
   }
+
+  .image-mask-container{
+    width: 900px;
+    height: 900px;
+    top: 220px;
+    margin-left: -450px;
+  }
 }
 
 @media (max-width: 600px) {

src/components/timeline/timeline.js

@@ -56,7 +56,7 @@ const timelineData = [
     description:
       "Rapid population growth leads to major expansion and master-planned communities.",
     fact: "During this time Katy grew from around 8000 people to over 11000. Katy saw a 3000 person increase!",
-    image: `${process.env.PUBLIC_URL}/images/katy-hero.jpg`,
+    image: `${process.env.PUBLIC_URL}/images/katy-view.jpg`,
   },
   {
     id: 5,
@@ -65,7 +65,7 @@ const timelineData = [
     description:
       "Katy continues to grow with new neighborhoods, businesses, and community services.",
     fact: "In 1919 KISD was found with only 1 school, and it now registers over 85,000 students and over 40 schools",
-    image: `${process.env.PUBLIC_URL}/images/Katy-Tower.jpg`,
+    image: `${process.env.PUBLIC_URL}/images/2nd-katy-stock.jpg`,
   },
 ];
 

src/components/timeline/timelineApp.css

@@ -2,4 +2,72 @@
   border: 1px solid #606c38;
   width: 100%;
   justify-self: center;
+}
+
+.timeline-header{
+  background-color: #606c38;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 50px;
+  padding-top: 0px;
+
+}
+
+.timeline-header span{
+  font-size: 27px;
+
+  background-color: #bc6c25;
+  border-radius: 3px;
+  border: 2px solid black;
+  padding: 5px 10px 5px 10px;
+  margin-top: 5px;
+  box-shadow: 2px 2px rgba(0,0,0, .5);
+}
+
+.timeline-div{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.timeline-header p{
+  text-align: center;
+  margin-bottom: 0px;
+  line-height: 120px;
+  font-family: "DIN Condensed Web";
+  margin-top: 0px;
+  font-size: 150px;
+}
+
+
+
+.timeline-header .line{
+  height: 0px;
+  border-top: 4px solid black;
+  display: flex;
+  justify-content: space-around;
+  width: 85%;
+}
+
+.timeline-header .dot{
+
+  width: 24px;
+  height: 24px;
+  background-color: black;
+  border: 4px solid #606c38; 
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  z-index: 2;
+  box-shadow: 0 0 0 1px black;
+  margin-top: -18px; 
+  color: black;
+  text-align: center;
+  cursor: pointer;
+}
+
+.timeline-header .dot:hover {
+  transform: scale(1.2);
 }

src/components/timeline/timelineApp.js

@@ -4,6 +4,22 @@ import Timeline from './timeline';
 function TimelineApp() {
   return (
     <>
+      <div class="timeline-header">
+        <div className='timeline-div'>
+          <p>LEARN ABOUT KATY </p><br/>
+          <span>
+            Over a century of History and development
+          </span>
+        </div>
+        <div class="line">
+          <div class="dot">
+          </div>
+          <div class="dot">
+          </div>
+          <div class="dot">
+          </div>
+        </div>
+      </div>
       <Timeline />
       <div className="line"></div>
     </>