methodlab/agari-landing-page

# AGARI - African Genomic Archive for Response & Insight A brochure website for AGARI, built with React (via esm.sh) and Tailwind CSS v3. ## Overview AGARI is a continental platform for archiving and sharing pathogen genomic information, enabling real-time surveillance to empower a swift response to disease threats across Africa. ## Tech Stack - **React 19.1.0** - Loaded via ESM from esm.sh - **Tailwind CSS v3** - Utility-first CSS framework - **No Build Tools Required** - Uses native ES modules and import maps ## Getting Started ### Prerequisites - Node.js and npm (for Tailwind CSS build process) - Python 3 (for local development server) or any other static file server ### Installation 1. Install dependencies: ```bash npm install ``` 2. Build Tailwind CSS: ```bash npm run build:css ``` Or watch for changes during development: ```bash npm run watch:css ``` 3. Start a local server: ```bash npm run serve ``` Or use any static file server of your choice. 4. Open your browser and navigate to `localhost` ## Project Structure ``` agari/ ├── index.html # Main HTML file with import maps ├── src/ │ ├── assets/ # Logos, illustrations, and other static media │ ├── components/ # Shared UI building blocks (Header, Footer, etc.) │ ├── guides/ # Guide content modules rendered on the site │ ├── pages/ # Top-level page components (Landing, Guides, Guide) │ ├── input.css # Tailwind CSS source file │ └── main.jsx # Entry point that bootstraps the app ├── output.css # Generated Tailwind CSS (created by build) ├── package.json # Dependencies and scripts ├── tailwind.config.js # Tailwind configuration ├── vite.config.js # Vite configuration ├── server.py # Simple development server helper └── README.md # This file ``` ## Design The design was created in Figma and imported using the Figma MCP. The website features: - Modern, clean design wit …