What happens before
"Merged"

<!-- BEFORE: broken path, no navigation href -->
<a>
  <img src="logo.png" alt="VehiGo">
</a>

<!-- AFTER: corrected relative path + home navigation -->
<a href="../../index.html">
  <img
    src="../../assets/images/logo.png"
    alt="VehiGo Logo"
    class="logo-img"
  >
</a>

# CrisisBoard 🚨

![Status](https://img.shields.io/badge/Status-Active-brightgreen)
![GSSoC](https://img.shields.io/badge/GSSoC'25-Participating-purple)
![React](https://img.shields.io/badge/React-18-blue)

## 🚀 Quick Setup

```bash
git clone https://github.com/YOUR_USERNAME/crisisboard.git
cd crisisboard && npm install
cp .env.example .env
npm run dev
```

## 🤝 Contributing (GSSoC'25 Guidelines)
# Branch naming
git checkout -b feat/issue-58-dashboard-btn

# Commit format
git commit -m "feat: add dashboard button to feedback page (#58)"

<!-- New: Dashboard button with TailwindCSS + inline SVG -->
<a
  href="dashboard.html"
  class="flex items-center gap-2 px-4 py-2
         rounded-lg bg-purple-600 hover:bg-purple-700
         text-white font-medium text-sm
         transition-all duration-200"
>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="16" height="16" fill="none"
       stroke="currentColor" stroke-width="2">
    <rect x="3" y="3" width="7" height="7"/>
    <rect x="14" y="3" width="7" height="7"/>
    <rect x="3" y="14" width="7" height="7"/>
    <rect x="14" y="14" width="7" height="7"/>
  </svg>
  Go to Dashboard
</a>

// BEFORE: no cleanup = memory leak on every page visit
const handleClick = () => { fetchData(); };
document.addEventListener('click', handleClick);
// ⚠️ Missing removeEventListener — listener never cleaned up

// Also: orphaned catch with no try block
} catch(err) {
  console.error(err); // ⚠️ What is this catching?
}

// AFTER: proper lifecycle + try-catch structure
const handleClick = () => {
  try {
    fetchData();
  } catch (err) {
    console.error('Click handler error:', err);
  }
};
document.addEventListener('click', handleClick);

window.addEventListener('beforeunload', () => {
  document.removeEventListener('click', handleClick);
});

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <nav className={`
      fixed top-0 w-full z-50 transition-all duration-300
      backdrop-blur-md bg-white/10 border-b border-white/10
    `}>
      {/* Mobile: Logo + Pink Hamburger only */}
      <div className="flex md:hidden items-center
              justify-between px-4 py-3">
        <Logo />
        <button
          onClick={() => setMenuOpen(!menuOpen)}
          className="text-pink-500 hover:text-pink-400"
        >
          <HamburgerIcon />
        </button>
      </div>
      {/* Desktop: Full nav with pink accents */}
      <div className="hidden md:flex items-center
              justify-between px-8 py-4">
        <Logo />
        <NavLinks accentColor="pink" />
      </div>
    </nav>
  );
};

const AboutUs = () => (
  <div className="about-page dark:bg-gray-900 bg-white
             transition-colors duration-300">

    {/* Mission & Vision */}
    <section className="mission-section py-16 px-6">
      <h2 className="text-3xl font-bold text-center mb-8">
        Our Mission
      </h2>
      <MissionVisionGrid />
    </section>

    {/* Tech Stack Used */}
    <TechStackSection technologies={techStack} />

    {/* Stay Connected — for contributors */}
    <section className="connect-section">
      <h2>Stay Connected</h2>
      <SocialLinks />
    </section>

  </div>
);
// Dark/Light mode toggle support via className conditionals
// Fully responsive — tested across mobile, tablet, desktop