📦 EqualifyEverything / equalify-reflow-docs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52import { useState } from 'react';
import { Layout } from './components/Layout';
import { Hero } from './components/Hero';
import { Partners } from './components/Partners';
import { Projects } from './components/Projects';
import { MicroGrants } from './components/MicroGrants';
import { PartnershipSolicitation } from './components/PartnershipSolicitation';
import { Team } from './components/Team';
import { About } from './components/About';

import { NewsletterSignup } from './components/NewsletterSignup';
import { StickyNav } from './components/StickyNav';

function App() {
  const [selectedProject, setSelectedProject] = useState<string>('all');

  const scrollToMicroGrants = (projectId?: string) => {
    if (projectId) {
      setSelectedProject(projectId);
    }

    // Try to find the heading first for better accessibility
    const heading = document.getElementById('open-micro-grants-heading');
    if (heading) {
      heading.scrollIntoView({ behavior: 'smooth' });
      heading.focus({ preventScroll: true });
    } else {
      // Fallback to section container
      const microGrantsSection = document.getElementById('micro-grants-section');
      if (microGrantsSection) {
        microGrantsSection.scrollIntoView({ behavior: 'smooth' });
      }
    }
  };

  return (
    <Layout>
      <Hero />
      <StickyNav />
      <div id="about-section" tabIndex={-1} className="scroll-mt-24"><About /></div>
      <div id="projects-section" tabIndex={-1} className="scroll-mt-24"><Projects onScrollToMicroGrants={scrollToMicroGrants} /></div>
      <div id="micro-grants-section" tabIndex={-1} className="scroll-mt-24"><MicroGrants selectedProject={selectedProject} onSelectProject={setSelectedProject} /></div>
      <div id="partners-section" tabIndex={-1} className="scroll-mt-24"><Partners /></div>
      <div id="team-section" tabIndex={-1} className="scroll-mt-24"><Team /></div>
      <div id="newsletter-section" tabIndex={-1} className="scroll-mt-24"><NewsletterSignup /></div>
      <div id="partnership-section" tabIndex={-1} className="scroll-mt-24"><PartnershipSolicitation /></div>
    </Layout>
  );
}

export default App;