[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "leaflet": "1.9.4", "react-leaflet": "5.0.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]html:file="index.html" isEdit="true" isMerged="true" Boma Lathu - Informed Citizenry for Prosperity

About us

Charity activities are taken place around the world.

About Us

Boma Lathu

Your trusted source for clear and credible civic information.

Boma Lathu is Malawi's national civic education platform designed to empower citizens with accurate, accessible, and timely information about government processes, civic participation, and democratic governance.

We are committed to fostering informed citizenry through educational resources, transparent communication, and active community engagement across the nation.

[V0_FILE]jpg:file="public/images/hero-20background-20picture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hero%20background%20picture-giVt7aEVXeMcgfYJjpUQ5jiAB7akST.jpg" isMerged="true" [V0_FILE]png:file="public/images/boma-20lathu-20logo-202.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BOMA%20LATHU%20LOGO-%202-ijLvCCJWOGAFXBnP94wRXhHdnqUCbx.png" isMerged="true" [V0_FILE]typescriptreact:file="components/malawi-map.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" interface Hub { id: string name: string region: string status: "Verified" | "Active" lat: number lng: number participants?: number email?: string } interface MalawiBoundaryProps { hubs: Hub[] selectedHub: Hub | null onSelectHub: (hub: Hub) => void } declare global { interface Window { L: any } } export default function MalawiMap({ hubs, selectedHub, onSelectHub }: MalawiBoundaryProps) { const mapContainer = useRef(null) const map = useRef(null) const [mapLoaded, setMapLoaded] = useState(false) useEffect(() => { const link = document.createElement("link") link.rel = "stylesheet" link.href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" document.head.appendChild(link) const style = document.createElement("style") style.textContent = ` .leaflet-popup { z-index: 1000 !important; } .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } .leaflet-popup-tip { background-color: white; } ` document.head.appendChild(style) const script = document.createElement("script") script.src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" script.onload = () => { setMapLoaded(true) } document.body.appendChild(script) return () => { if (document.head.contains(link)) document.head.removeChild(link) if (document.head.contains(style)) document.head.removeChild(style) if (document.body.contains(script)) document.body.removeChild(script) } }, []) useEffect(() => { if (!mapLoaded || !mapContainer.current || map.current) return const L = window.L const malawi_center: [number, number] = [-13.25, 34.3] map.current = L.map(mapContainer.current, { center: malawi_center, zoom: 7, zoomControl: true, dragging: true, scrollWheelZoom: true, }) L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', maxZoom: 19, }).addTo(map.current) const createIcon = (color: string) => { return L.divIcon({ html: `

`, iconSize: [32, 32], className: "custom-icon", }) } const verifiedIcon = createIcon("#1e40af") const activeIcon = createIcon("#f59e0b") hubs.forEach((hub) => { const marker = L.marker([hub.lat, hub.lng], { icon: hub.status === "Verified" ? verifiedIcon : activeIcon, }).addTo(map.current) marker.on("click", () => { onSelectHub(hub) map.current.flyTo([hub.lat, hub.lng], 10, { duration: 1.5 }) marker.openPopup() }) marker.bindPopup(`

${hub.name}

${hub.region}

Status: ${hub.status}

${hub.participants ? `

Participants: ${hub.participants}

` : ""} ${hub.email ? `

Email: ${hub.email}

` : ""}

`) }) }, [mapLoaded, hubs, onSelectHub]) useEffect(() => { if (selectedHub && map.current && mapLoaded) { map.current.flyTo([selectedHub.lat, selectedHub.lng], 10, { duration: 1.5 }) } }, [selectedHub, mapLoaded]) return

} [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Roboto", sans-serif; --font-mono: "Roboto Mono", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Kb4LsW4mrpFfk2KhAkl8OfDCzjZWBV.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Roboto } from "next/font/google" import "./globals.css" const roboto = Roboto({ weight: ["400", "500", "700"], subsets: ["latin"] }) export const metadata: Metadata = { title: "Boma Lathu | Informed Citizenry for Prosperity", description: "Malawi's national civic education platform designed to empower citizens with knowledge, skills, and tools for informed decision-making and active participation in governance.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/interactive-map.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import dynamic from "next/dynamic" import { useState } from "react" interface Activity { name: string date: string location: string description: string } interface Hub { id: string name: string region: string status: "Verified" | "Active" lat: number lng: number participants?: number email?: string activities: Activity[] } const HUBS_DATA: Hub[] = [ { id: "mzuzu", name: "Mzuzu Hub", region: "Northern (Mzuzu)", status: "Active", lat: -11.465, lng: 34.18, participants: 420, email: "mzuzu@doce.gov.mw", activities: [ { name: "Northern Region Leadership Training", date: "November 30, 2024", location: "Mzuzu", description: "Training for civic leaders in the northern region.", }, ], }, { id: "blantyre", name: "Blantyre Hub", region: "Malawi", status: "Verified", lat: -15.7942, lng: 34.9241, participants: 380, email: "blantyre@doce.gov.mw", activities: [ { name: "Youth Civic Education", date: "December 8, 2024", location: "Blantyre", description: "Program targeting young citizens for civic awareness.", }, ], }, { id: "lilongwe", name: "Lilongwe Hub", region: "Lilongwe", status: "Verified", lat: -13.9626, lng: 33.7987, participants: 520, email: "lilongwe@doce.gov.mw", activities: [ { name: "Civic Engagement Workshop", date: "December 10, 2024", location: "Lilongwe", description: "Training session on informed citizenry and civic participation.", }, ], }, { id: "kasungu", name: "Kasungu Hub", region: "Malawi", status: "Active", lat: -13.0185, lng: 33.4821, participants: 290, email: "kasungu@doce.gov.mw", activities: [ { name: "Agricultural Civic Initiative", date: "December 1, 2024", location: "Kasungu", description: "Program linking agricultural development with civic participation.", }, ], }, { id: "zomba", name: "Zomba Hub", region: "Malawi", status: "Verified", lat: -15.3875, lng: 35.3244, participants: 410, email: "zomba@doce.gov.mw", activities: [ { name: "University Civic Engagement", date: "December 3, 2024", location: "Zomba", description: "Engaging university students in civic education and participation.", }, ], }, ] const MapComponent = dynamic(() => import("./malawi-map"), { ssr: false, loading: () => (

Loading map...

), }) export default function InteractiveMap() { const [selectedHub, setSelectedHub] = useState(HUBS_DATA[0]) return (

Explore Our Malawi Hubs

Click on any hub to view details and recent activities

{/* Map - 2/3 width on large screens */}

{/* Details Panel - 1/3 width on right side */}

{selectedHub ? ( <> {/* Header */}

{selectedHub.name}

{selectedHub.region}

{/* Content */}

{/* Status Badge */}

{selectedHub.status}

{/* Participants & Contact */}

Participants: {selectedHub.participants}+

Contact: {selectedHub.email}

{/* Recent Activities */}

Recent Activities

{selectedHub.activities.map((activity, idx) => (

{activity.name}

{activity.date}

{activity.location}

{activity.description}

))}

) : (

Select a hub to view details

)}

{/* Hub List for Selection */}

All Hubs ({HUBS_DATA.length})

{HUBS_DATA.map((hub) => ( ))}

{/* Legend */}

Verified Hub

Active Hub

) } [V0_FILE]jpg:file="public/images/new-20bbnnaa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/new%20bbnnaa-2UtXPA32guaxDYgkDnbu9e19YZV7Dk.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import Image from "next/image" import InteractiveMap from "@/components/interactive-map" const SocialIcon = ({ icon, href }: { icon: string; href: string }) => ( {icon === "facebook" && ( )} {icon === "twitter" && ( )} {icon === "instagram" && ( )} {icon === "linkedin" && ( )} ) export default function AboutPage() { const menuLinks = { Home: "https://boma.civiliaconsult.com/", About: "https://boma.civiliaconsult.com/about/", Programme: "https://boma.civiliaconsult.com/programme/", Resources: "https://boma.civiliaconsult.com/resources/", Hubs: "https://v0-about-us-page-gilt.vercel.app/", News: "https://boma.civiliaconsult.com/news/", Contact: "https://boma.civiliaconsult.com/contact/", } return (

{/* Top Green Header */}

{/* Email Section */}

info@bomalathu.org

{/* Social Icons and Search */}

{/* Navigation */} {/* Hero Section */}

Hubs

Bringing Civic Education to Every Community

{/* Content Section */}

{/* Footer */}

) } [V0_FILE]jpg:file="public/images/new-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/new%20-2-Vnjx5dH998sVZaJzk1xjL7Cy6EBziX.jpg"