Burndown List (Frontend & Design Components)

1. Landing Page

- [x] Design hero section layout with high-quality visuals (satellite/drones/wildfire imagery)
- [x] Write short mission statement and problem summary
- [ ] Implement the hero section in React (or preferred framework)
- [x] Add animations for smooth scrolling and visual transitions
- [ ] Implement CTA buttons ("Explore Models", "View Dashboard", "Learn More")
- [ ] Ensure responsiveness for mobile and tablet devices

2. How It Works / Technology Page

- [x] Design page layout with structured content sections
- [x] Create icons or simple illustrations for each AI technology (ML, RL, CV, GNNs)
- [x] Design data flow diagrams or interactive flowcharts
- [ ] Implement frontend UI with animations for diagrams
- [ ] Optimize content readability (typography, spacing)

3. Live Dashboard / Simulation

- [x] Design interactive map layout (Mapbox, Leaflet.js, or Google Maps)
- [x] Choose visual representation for layers (heatmaps, markers, polygons)
- [x] Implement frontend map UI with toggles for different data layers
- [ ] Fetch and display live or simulated wildfire data from APIs
- [ ] Ensure smooth performance and real-time updates
- [ ] Add loading states and error handling for API failures

4. Research or Case Study Page

- [x] Design clean layout for research papers, AI model breakdowns, and case studies
- [x] Choose visual formats for performance results (charts, tables)
- [ ] Implement interactive charts (D3.js, Chart.js)
- [ ] Add technical blog post sections with Markdown rendering
- [ ] Optimize for easy reading and navigation

5. Team / About Page

- [x] Design team section with profile cards (images, bios, affiliations)
- [x] Define color scheme and layout for credibility-focused design
- [ ] Implement frontend profile section
- [ ] Optimize for mobile (stacked cards, collapsible content)

6. Contact / Collaboration Page

- [ ] Design simple contact form with name, email, message fields
- [ ] Plan CAPTCHA/spam protection
- [ ] Implement working contact form with backend integration
- [ ] Add GitHub and social media links
- [ ] Ensure accessibility and mobile responsiveness

Detailed Website Design Document

Project Name

Pyre

1. Overview

This website showcases AI-driven wildfire prediction and mitigation solutions, including real-time wildfire modeling, case studies, and research collaborations.

Core Objectives:

  • Educate users on how AI enhances wildfire response

  • Provide real-time/simulated wildfire prediction tools

  • Enable collaboration with researchers, agencies, and open-source developers

2. Information Architecture & Navigation

Navigation Bar

  • Home (Landing Page)

  • How It Works / Technology

  • Live Dashboard

  • Research / Case Studies

  • Team / About

  • Contact / Collaboration

Footer

  • Quick links to GitHub, social media, and research partnerships

  • Copyright & legal disclaimers

3. Design System & UI Components

Typography & Colors

  • Font: Poppins or Inter (clean, modern sans-serif)

  • Primary Color: Deep Orange (#E65100) (wildfire theme)

  • Secondary Color: Dark Blue (#1E3A5F) (earth, tech feel)

  • Background: Light Gray (#F4F4F4)

UI Components

Component | Description -- | -- Hero Section | Large background image/video, short mission statement, CTA buttons Card Components | Used for technology breakdowns, research highlights Interactive Map | Displays real-time wildfire data, predictions, drone coverage Contact Form | Simple form with validation & spam protection Accordion / Collapsible Sections | For technical deep dives in "How It Works" Interactive Charts | Model accuracy, wildfire trends (D3.js, Chart.js)

6. Future Enhancements

  • AI-powered wildfire alerts (push notifications)

  • Open-source contribution page