Initial Draft for the Vertex, Beacon and AirQo AI platform visibility design

src/website/src/app/(main)/products/ai-platform/page.tsx

@@ -0,0 +1,19 @@
+import {
+  generateMetadata as createMetadata,
+  generateViewport,
+  METADATA_CONFIGS,
+} from '@/lib/metadata';
+import AIPlatformPage from '@/views/products/AIPlatformPage';
+
+export const metadata = createMetadata(METADATA_CONFIGS.aiPlatform);
+export const viewport = generateViewport();
+
+const page = () => {
+  return (
+    <div>
+      <AIPlatformPage />
+    </div>
+  );
+};
+
+export default page;

src/website/src/app/(main)/products/beacon/page.tsx

@@ -0,0 +1,19 @@
+import {
+  generateMetadata as createMetadata,
+  generateViewport,
+  METADATA_CONFIGS,
+} from '@/lib/metadata';
+import BeaconPage from '@/views/products/BeaconPage';
+
+export const metadata = createMetadata(METADATA_CONFIGS.beacon);
+export const viewport = generateViewport();
+
+const page = () => {
+  return (
+    <div>
+      <BeaconPage />
+    </div>
+  );
+};
+
+export default page;

src/website/src/app/(main)/products/vertex/page.tsx

@@ -0,0 +1,19 @@
+import {
+  generateMetadata as createMetadata,
+  generateViewport,
+  METADATA_CONFIGS,
+} from '@/lib/metadata';
+import VertexPage from '@/views/products/VertexPage';
+
+export const metadata = createMetadata(METADATA_CONFIGS.vertex);
+export const viewport = generateViewport();
+
+const page = () => {
+  return (
+    <div>
+      <VertexPage />
+    </div>
+  );
+};
+
+export default page;

src/website/src/app/sitemap.ts

@@ -474,6 +474,13 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     },
     { path: '/about-us', changeFrequency: 'monthly', priority: 0.8 },
     { path: '/products/monitor', changeFrequency: 'monthly', priority: 0.9 },
+    { path: '/products/vertex', changeFrequency: 'monthly', priority: 0.9 },
+    { path: '/products/beacon', changeFrequency: 'monthly', priority: 0.9 },
+    {
+      path: '/products/ai-platform',
+      changeFrequency: 'monthly',
+      priority: 0.9,
+    },
     { path: '/products/analytics', changeFrequency: 'monthly', priority: 0.9 },
     { path: '/products/api', changeFrequency: 'monthly', priority: 0.9 },
     { path: '/products/mobile-app', changeFrequency: 'monthly', priority: 0.9 },

src/website/src/components/layouts/Footer.tsx

@@ -115,6 +115,30 @@ const Footer = () => {
                   AirQalibrate
                 </Link>
               </li>
+              <li>
+                <Link
+                  href="/products/vertex"
+                  className="text-gray-600 hover:underline"
+                >
+                  Vertex
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/products/beacon"
+                  className="text-gray-600 hover:underline"
+                >
+                  Beacon
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/products/ai-platform"
+                  className="text-gray-600 hover:underline"
+                >
+                  AirQo AI Platform
+                </Link>
+              </li>
             </ul>
           </div>
 

src/website/src/lib/metadata.ts

@@ -513,6 +513,54 @@ export const METADATA_CONFIGS = {
       type: 'image/png',
     },
   },
+  beacon: {
+    title:
+      'AirQo Beacon | Device Health and Collocation Management for Air Quality Networks',
+    description:
+      'Monitor device health, collocation performance, uptime, MTBF, MTTR, and operational reliability across air quality sensor networks with AirQo Beacon.',
+    keywords:
+      'AirQo Beacon, device health monitoring, air quality network operations, sensor uptime monitoring, collocation management, MTBF, MTTR, maintenance dashboard, sensor network reliability, air quality device performance',
+    url: '/products/beacon',
+    image: {
+      url: '/assets/images/products/beacon/beacon-device-render.webp',
+      alt: 'AirQo Beacon device render mounted under a solar panel',
+      width: 1536,
+      height: 1024,
+      type: 'image/webp',
+    },
+  },
+  vertex: {
+    title:
+      'AirQo Vertex | Open Device Deployment and Public Air Quality Data Sharing',
+    description:
+      'Add air quality monitors, track maintenance, and share sensor data publicly through AirQo. Vertex supports devices from any manufacturer and helps teams join an open monitoring network.',
+    keywords:
+      'AirQo Vertex, device deployment platform, public air quality data sharing, open sensor network, multi-manufacturer support, sensor onboarding, air quality device maintenance, air monitoring data sharing',
+    url: '/products/vertex',
+    image: {
+      url: '/assets/images/products/vertex/bring-device.webp',
+      alt: 'AirQo Vertex deployment workflow shown on a laptop in a field operations setting',
+      width: 1672,
+      height: 941,
+      type: 'image/webp',
+    },
+  },
+  aiPlatform: {
+    title:
+      'AirQo AI Platform | Forecasting, Site Selection, Categorization, and Reporting',
+    description:
+      'Use AirQo AI to forecast PM2.5, optimize monitor placement, categorize sites, automate air quality reports, and turn environmental data into decision-ready insight.',
+    keywords:
+      'AirQo AI Platform, air quality forecasting, environmental intelligence platform, sensor site selection, air quality reports, site categorization, spatial analysis, PM2.5 forecasting, AI for air quality',
+    url: '/products/ai-platform',
+    image: {
+      url: '/assets/images/products/ai-platform/hero.webp',
+      alt: 'AirQo AI platform shown on a laptop with locate planning and monitoring site selection',
+      width: 1448,
+      height: 1086,
+      type: 'image/webp',
+    },
+  },
   airqoDevCon: {
     title:
       'AirQo DevCon 2026 | Free Student Developer Conference at Makerere University',

src/website/src/lib/navItems.ts

@@ -14,6 +14,21 @@ export const NAV_ITEMS: NavMenuSection = {
       description: 'Built in Africa for African cities',
       href: '/products/monitor',
     },
+    {
+      title: 'Vertex',
+      description: 'Add devices and share air quality data publicly',
+      href: '/products/vertex',
+    },
+    {
+      title: 'Beacon',
+      description: 'Monitor device health and collocation performance',
+      href: '/products/beacon',
+    },
+    {
+      title: 'AirQo AI Platform',
+      description: 'Forecast, locate, categorize, and automate reporting',
+      href: '/products/ai-platform',
+    },
     {
       title: 'Analytics Dashboard',
       description: 'Air quality analytics for African cities',

src/website/src/views/products/AIPlatformPage.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import {
+  FiBarChart2,
+  FiCompass,
+  FiCpu,
+  FiFileText,
+  FiGrid,
+  FiTrendingUp,
+} from 'react-icons/fi';
+
+import ProductMarketingPage from './ProductMarketingPage';
+
+const aiTheme = {
+  accentTextClassName: 'text-blue-700',
+  heroBackgroundClassName: 'bg-[#EDF3FF]',
+  capabilitiesBackgroundClassName: 'bg-slate-50',
+  audiencesBackgroundClassName: 'bg-[#EEF6FF] border border-blue-100',
+  ctaBackgroundClassName: 'bg-gradient-to-br from-white via-blue-50 to-cyan-50',
+  quickLinksCardClassName: 'bg-white',
+} as const;
+
+const AIPlatformPage = () => {
+  return (
+    <ProductMarketingPage
+      theme={aiTheme}
+      hero={{
+        breadcrumb: 'Our Products > AirQo AI Platform',
+        eyebrow: 'Forecasting, Site Selection, Categorization, and Reporting',
+        title: 'Turn air quality data into environmental intelligence.',
+        description:
+          'AirQo AI Platform combines forecasting, site recommendation, categorization, reporting, and spatial analysis in one workspace so teams can move from raw observations to clearer environmental decisions.',
+        image: {
+          src: '/assets/images/products/ai-platform/hero.webp',
+          alt: 'AirQo AI Locate workspace showing an analysis boundary, recommended monitoring sites, and planning insights',
+        },
+      }}
+      intro={{
+        title: (
+          <>
+            One platform for{' '}
+            <span className={aiTheme.accentTextClassName}>forecasting</span>,
+            planning, and reporting
+          </>
+        ),
+        description:
+          'The AirQo AI Platform helps organizations move from monitoring data to action-ready insight. It is built for planning, interpretation, and decision support across public health, research, and urban environmental management.',
+      }}
+      primarySection={{
+        eyebrow: 'Environmental intelligence',
+        title:
+          'A real workspace for forecasting, siting, categorization, and report generation',
+        description: [
+          'The platform combines forecast cards, monitoring summaries, site recommendation, categorization, and reports in one interface so teams can work from a shared analytical view.',
+          'That makes it useful for organizations that need more than data access alone and want clearer reasoning about what to do next.',
+        ],
+        image: {
+          src: '/assets/images/products/ai-platform/ai-platform-forecast-showcase.webp',
+          alt: 'AirQo AI map with a selected monitoring node and forecast details for the chosen location',
+        },
+        cardBackgroundClassName: 'bg-[#EDF5FF]',
+        action: {
+          label: 'Open AirQo AI',
+          href: 'https://ai.airqo.net',
+          variant: 'secondary',
+        },
+      }}
+      capabilities={{
+        title: (
+          <>
+            What the{' '}
+            <span className={aiTheme.accentTextClassName}>AI Platform</span>{' '}
+            helps you do
+          </>
+        ),
+        description:
+          'AirQo AI brings forecasting, site selection, categorization, and reporting into one workspace.',
+        items: [
+          {
+            title: 'Air quality forecasting',
+            description:
+              'Generate daily and hourly PM2.5 forecasts using machine learning models.',
+            Icon: FiTrendingUp,
+          },
+          {
+            title: 'AI-powered site deployment',
+            description:
+              'Use LOCATE to recommend monitoring sites based on environmental and geospatial factors.',
+            Icon: FiCompass,
+          },
+          {
+            title: 'Site categorization',
+            description:
+              'Classify monitoring locations using surrounding land-use and environmental characteristics.',
+            Icon: FiGrid,
+          },
+          {
+            title: 'Automated reporting',
+            description:
+              'Produce summaries and reports without rebuilding the same analytical narrative manually.',
+            Icon: FiFileText,
+          },
+          {
+            title: 'Spatial analysis tools',
+            description:
+              'Investigate hotspots, clustering, and distribution patterns across monitored areas.',
+            Icon: FiBarChart2,
+          },
+          {
+            title: 'Decision support',
+            description:
+              'Support policymakers, practitioners, and researchers with more actionable environmental insight.',
+            Icon: FiCpu,
+          },
+        ],
+      }}
+      secondarySection={{
+        eyebrow: 'Planning and interpretation',
+        title:
+          'Use AI to choose where to act and communicate why those choices matter',
+        description: [
+          'By combining site recommendation, categorization, spatial analysis, and reporting, the platform creates a stronger bridge between environmental data science and applied monitoring strategy.',
+          'This is what makes it useful beyond prediction alone: it helps teams turn information into planning logic and decision support.',
+        ],
+        image: {
+          src: '/assets/images/products/ai-platform/ai-platform-locate-showcase.webp',
+          alt: 'AirQo AI Locate map with boundary planning, recommended sites, and priority monitoring locations',
+        },
+        cardBackgroundClassName: 'bg-[#FFF7E8]',
+        reverse: true,
+        action: {
+          label: 'Explore Locate',
+          href: 'https://ai.airqo.net/locate',
+          variant: 'secondary',
+        },
+      }}
+      audiences={{
+        title: (
+          <>
+            Built for teams that need faster, better environmental{' '}
+            <span className={aiTheme.accentTextClassName}>decisions</span>
+          </>
+        ),
+        description:
+          'The AI Platform is positioned for analytical and planning work across public, research, and environmental management contexts.',
+        items: [
+          'Government agencies',
+          'City authorities and urban planners',
+          'Environmental researchers',
+          'Public health organizations',
+          'Monitoring teams',
+          'Environmental consultants',
+        ],
+      }}
+      ctaSection={{
+        eyebrow: 'AirQo AI Platform',
+        title: (
+          <>
+            Use AI to forecast, place, classify, and explain air quality with
+            more <span className={aiTheme.accentTextClassName}>confidence</span>
+          </>
+        ),
+        description:
+          'Open AirQo AI to explore the map, run Locate, categorize sites, and access reporting workflows built for environmental intelligence.',
+        actions: [
+          {
+            label: 'Open the Platform',
+            href: 'https://ai.airqo.net',
+          },
+          {
+            label: 'View Reports',
+            href: 'https://ai.airqo.net/reports',
+            variant: 'secondary',
+          },
+        ],
+        quickLinks: [
+          {
+            title: 'Map',
+            description:
+              'Explore the monitoring surface and air quality intelligence layer.',
+            href: 'https://ai.airqo.net/map',
+          },
+          {
+            title: 'Categorize',
+            description:
+              'Interpret sites through environmental characteristics and surrounding context.',
+            href: 'https://ai.airqo.net/categorize',
+          },
+          {
+            title: 'Reports',
+            description:
+              'Access summaries and reporting outputs for decision support and communication.',
+            href: 'https://ai.airqo.net/reports',
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export default AIPlatformPage;