<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bogol - Collect, Reconcile, Remit for SMEs</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { font-family: Arial, sans-serif; background-color: #f8f9fa; }
.navbar { background-color: #006400; } /* Dark green from logo */
.hero { background-color: #daa520; color: #006400; padding: 100px 0; text-align: center; } /* Gold from logo */
.section { padding: 60px 0; }
.feature-card { border: 1px solid #006400; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.btn-primary { background-color: #006400; border-color: #006400; }
.btn-primary:hover { background-color: #004d00; }
footer { background-color: #006400; color: white; padding: 20px 0; text-align: center; }
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png" alt="Bogol Logo" width="150"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#demo">Demo</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Bogol: Empowering Kenya's SMEs</h1>
<p>Collect payments, reconcile inventory, and remit to your bank—all from your mobile.</p>
<a href="https://bogol-trade-sync.lovable.app/" class="btn btn-lg btn-primary">Try the MVP</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="section bg-light">
<div class="container">
<h2>About Bogol</h2>
<p>Bogol is a mobile-first app designed for informal traders and SMEs in Kenya. In a market with 16.7 million informal workers, we simplify operations: Collect via M-Pesa, Reconcile sales with inventory, and Remit funds to banks seamlessly.</p>
<p>Founded in 2025, our MVP is live—built to drive financial inclusion.</p>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section">
<div class="container">
<h2>Key Features</h2>
<div class="row">
<div class="col-md-4">
<div class="feature-card">
<h3>Collect</h3>
<p>Prompt customers for payments via QR or STK Push. Integrate with M-Pesa for instant collection.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>Reconcile</h3>
<p>Auto-match sales to inventory. Get real-time stock alerts to avoid discrepancies.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>Remit</h3>
<p>Transfer funds directly to your bank account daily or weekly, with low fees.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section id="demo" class="section bg-light">
<div class="container">
<h2>See Bogol in Action</h2>
<p>Check out our MVP prototype and pitch deck for investors.</p>
<a href="https://bogol-trade-sync.lovable.app/" class="btn btn-primary me-2">Launch MVP</a>
<a href="[Link to your Pitch Deck PDF or Google Slides]" class="btn btn-outline-primary">View Pitch Deck</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<h2>Contact Us</h2>
<form action="https://formspree.io/f/your-form-id" method="POST"> <!-- Replace with your Formspree ID -->
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2025 Bogol. All rights reserved. | <a href="#" style="color: white;">Privacy Policy</a></p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>