New header links, and community page banner

src/frontend/src/components/Header/index.tsx

@@ -1,25 +1,64 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Logo from "../Logo";
+import { forEach } from "lodash";
 
 export default class Header extends React.Component {
+  // 1. Initialize state to track if menu is open
+  state = {
+    isOpen: false,
+  };
+
+  toggleMenu = () => {
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+
   public render() {
+    const { isOpen } = this.state;
+
     return (
-      <div className="bg-white shadow">
+      <div 
+        className="header-wrapper bg-white shadow"
+        style={{ position: "sticky", zIndex: "1000000", top: "0px", backgroundColor: "rgba(255,255,255)" }}
+      >
         <nav 
-          className="mw8 relative center flex flex-wrap justify-between pa3"
+          id="nav-nav"
+          className="relative flex flex-wrap justify-between items-center pa3 center"
+          style={{ maxWidth: "90vw" }}
           aria-label="Primary"
         >
-          <div className="logo mb4 mb0-ns">
+          <div className="logo">
             <Link to="/" aria-label="Home">
               <Logo />
             </Link>
           </div>
-          <div className="mt5 mt2-ns">
-            <Link
-              to="/manual"
-              className="link hover-blue f5 fw6 pv2 ph0 ph3-ns mr4-ns"
-            >
+
+          {/* 2. Hamburger Button - Only visible via CSS on small screens */}
+          <button 
+            className="hamburger-btn pointer bg-transparent bn"
+            onClick={this.toggleMenu}
+            aria-label="Toggle navigation"
+          >
+            <div className={`bar ${isOpen ? "open" : ""}`}></div>
+            <div className={`bar ${isOpen ? "open" : ""}`}></div>
+            <div className={`bar ${isOpen ? "open" : ""}`}></div>
+          </button>
+
+          {/* 3. Navigation Items - Class toggled based on state */}
+          <div id="nav-items" className={`nav-links ${isOpen ? "is-open" : ""}`}>
+            <Link className="link hover-blue f5 fw6 pv2 ph3-ns mr4-ns" to="/about" onClick={this.toggleMenu}>
+              About Us
+            </Link>
+            <Link className="link hover-blue f5 fw6 pv2 ph3-ns mr4-ns" to="/partner-interest" onClick={this.toggleMenu}>
+              Hey Partner
+            </Link>
+            <Link className="link hover-blue f5 fw6 pv2 ph3-ns mr4-ns" to="/faq" onClick={this.toggleMenu}>
+              Common Myths
+            </Link>
+            <Link className="link hover-blue f5 fw6 pv2 ph3-ns mr4-ns" to="/community" onClick={this.toggleMenu}>
+              Community Board
+            </Link>
+            <Link className="link hover-blue f5 fw6 pv2 ph3-ns mr4-ns" to="/manual" onClick={this.toggleMenu}>
               Manual
             </Link>
             {/* 
@@ -32,12 +71,71 @@ export default class Header extends React.Component {
             */}
             <Link
               to="/record-search"
-              className="absolute top-1 right-1 static-ns bg-blue white bg-animate hover-bg-dark-blue f5 fw6 br2 pv2 ph3"
+              className="search-link f5 fw6 pv2 ph3 blue br2 hover-bg-dark-blue hover-white"
+              onClick={this.toggleMenu}
             >
               Search
             </Link>
           </div>
         </nav>
+
+        <style>{`
+          /* Desktop Default */
+          .hamburger-btn { display: none; }
+          .nav-links { display: flex; align-items: center; }
+
+          /* Mobile Logic (< 1000px) */
+          @media (max-width: 1000px) {
+            .hamburger-btn {
+              display: block;
+              z-index: 1001;
+            }
+
+            /* Hamburger Lines */
+            .bar {
+              width: 25px;
+              height: 3px;
+              background-color: #333;
+              margin: 5px 0;
+              transition: 0.4s;
+            }
+
+            /* Animate to "X" when open */
+            .bar.open:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
+            .bar.open:nth-child(2) { opacity: 0; }
+            .bar.open:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
+
+            /* Dropdown Menu Styling */
+            .nav-links {
+              display: none; /* Hidden by default */
+              flex-direction: column;
+              // width: 100%;
+              background: white;
+              position: absolute;
+              top: 100%;
+              left: -43px;
+              padding: 20px;
+              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            }
+
+            .nav-links.is-open {
+              display: flex; /* Show when clicked */
+            }
+
+            .nav-links a {
+              margin-bottom: 15px;
+              width: 100%;
+              text-align: left;
+              padding-left: 50px;
+            }
+
+            .search-link {
+              position: static !important; /* Remove the absolute positioning from your original code on mobile */
+              margin-top: 10px;
+              margin-right: 1.75rem;
+            }
+          }
+        `}</style>
       </div>
     );
   }

src/frontend/src/components/Landing/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PartnerTable from "../PartnerTable";
 import { Link } from "react-router-dom";
+import SVG from "../common/SVG";
 
 class Landing extends React.Component {
   componentDidMount() {
@@ -44,6 +45,33 @@ class Landing extends React.Component {
                 </p>
               </div>
             </div>
+              <div className="flex justify-center items-center w-100 shadow white pv4 ph4"
+              style={{flexDirection: "column", backgroundColor: "#d5e8fb", borderTop: "1px solid azure", paddingTop: "28px", paddingBottom: "28px"}}>
+                <div className="flex"
+                style={{width: "645px", maxWidth: "80vw", position: "relative", left: "-20px"}}>
+                  <SVG
+                    name="oregonMap2"
+                    className="mr3"
+                    style={{ width: "110px", height: "80px", minWidth: "110px", minHeight: "80px" }}
+                    viewBox="0 0 110 80"
+                  />
+                  <p className="fw6 ml3"
+                  style={{marginTop: "13px", marginLeft: "10px"}}>
+
+                    <a
+                      href="/community"
+                      style={{fontSize: "20px", color: "rgb(12,73,166)", fontWeight: "475"}}
+                    >
+                      <span style={{color: "#001b44", fontWeight: "900", marginRight: "1px"}}>NEW</span> Visit the Community Board for insights into best practices by County<span className="fas fa-arrow-right lh-solid"
+                      style={{paddingLeft: "14px", fontSize:"16px", fontWeight: "900"}}></span>
+                    </a>
+                  </p>
+                </div>
+            </div>
+            <div style={{width: "100vw", backgroundColor: "navy", height: "4px", marginTop: "0px", marginBottom: "0px"}}>
+                <span
+                style={{height:"4px", width: "60vw", background: "#357edd"}}></span>
+            </div>
 
             <div className="bg-navy pv6">
               <div className="mw7 center">
@@ -59,7 +87,7 @@ class Landing extends React.Component {
                 <PartnerTable />
                 <span className="db w4 center bb bw2 b--blue mb3"></span>
                 <p className="tc fw7 white mw7 mh4">
-                  Over 20,000 analyses delivered as of July 2024
+                  Over 27,000 analyses delivered as of January 2026
                 </p>
               </div>
             </div>

src/frontend/src/components/common/SVG/OregonMap2.tsx

@@ -0,0 +1,12 @@
+export default function OregonMap2() {
+  return (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.56 78.42L1.88 68.04l4.68-15.85L8.58 27.7 12.48.82h7.3l6.14 3 1.59 8.74 8.81 1.77 7.86-1.77 7.85 1.77 3.78-3.54h8.03l4.98-2.23 7.44-1.8h25.76l6.56 5.8-3.77 12.87-5.72 11.1 4.19 3.09-1.26 6.43v32.37H6.56z"
+        fill="#1847a5ff"
+      />
+    </>
+  );
+}

src/frontend/src/components/common/SVG/index.tsx

@@ -1,14 +1,15 @@
 import { ReactNode } from "react";
 import Logo from "./Logo";
 import OregonMap from "./OregonMap";
+import OregonMap2 from "./OregonMap2";
 import WhoWeAreLogos from "./WhoWeAreLogos";
 import OeciLogo from "./OeciLogo";
 
-type Keys = "logo" | "oregonMap" | "whoWeAreLogos" | "oeciLogo";
-
+type Keys = "logo" | "oregonMap" | "oregonMap2" | "whoWeAreLogos" | "oeciLogo";
 const nameDetailsMap: { [key in Keys]: ReactNode } = {
   logo: <Logo />,
   oregonMap: <OregonMap />,
+  oregonMap2: <OregonMap2 />,
   whoWeAreLogos: <WhoWeAreLogos />,
   oeciLogo: <OeciLogo />,
 };