Update website content for vertex, beacon and ai platform

[OchiengPaul442]

Status of maturity (all need to be checked before merging):

• I've tested this locally
• I consider this code done

Screenshots (optional)

Summary by CodeRabbit

• New Features
  • Updated product pages with refreshed hero text, calls to action, and section content for Beacon, Vertex, and the AI Platform.
  • Added clearer product messaging and updated quick links/content to better highlight data sharing, reporting, and site monitoring capabilities.
• UX Improvements
  • Simplified several product pages by showing only the most relevant sections.
  • Improved page layouts so optional content now appears only when needed.

[coderabbitai]

Warning

Review limit reached

@OchiengPaul442, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 43 minutes and 21 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3488e117-064d-4031-9af4-7f0f5813cd1d

📥 Commits

Reviewing files that changed from the base of the PR and between 1d8087e and 7a556fd.

📒 Files selected for processing (2)

• src/website/src/views/products/ProductMarketingPage.tsx
• src/website/src/views/products/VertexPage.tsx

📝 Walkthrough

Walkthrough

Marketing copy, SEO metadata, and nav descriptions are updated for the Beacon, Vertex, and AIPlatform product pages. ProductMarketingPage props hero.actions, primarySection, and audiences are made optional with matching conditional render guards, and the CTA grid alignment shifts to items-center.

Changes

Product Pages Content & Layout

Layer / File(s)	Summary
ProductMarketingPage optional props and conditional rendering src/website/src/views/products/ProductMarketingPage.tsx	hero.actions, primarySection, and audiences made optional; intro.description widened to React.ReactNode; conditional render guards added for each optional section; CTA grid alignment changed to items-center.
BeaconPage content rewrite src/website/src/views/products/BeaconPage.tsx	Hero copy and image updated, intro rewritten, primarySection reframed as "Operational visibility," capabilities items replaced (adding FiDownload/FiWifi), secondary section and CTA copy refreshed, quick-links descriptions updated.
VertexPage content rewrite src/website/src/views/products/VertexPage.tsx	Hero, intro, and capabilities copy replaced; icon set updated (FiHeart added, FiCloudLightning removed); secondarySection text replaced; audiences prop removed.
AIPlatformPage content trim src/website/src/views/products/AIPlatformPage.tsx	Hero eyebrow field removed; audiences section block deleted so the page flows directly from secondarySection to ctaSection.
SEO metadata and nav description updates src/website/src/lib/metadata.ts, src/website/src/lib/navItems.ts	METADATA_CONFIGS entries for beacon and vertex updated with new titles, descriptions, keywords, and beacon image asset; Vertex nav item description updated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• airqo-platform/AirQo-frontend#3629: Directly introduces the same ProductMarketingPage, BeaconPage, VertexPage, AIPlatformPage, METADATA_CONFIGS, and NAV_ITEMS structures that this PR modifies.

Suggested reviewers

• Baalmart
• Codebmk

Poem

🌬️ New words for Beacon, fresh copy for Vertex too,
Audiences optional, the hero got a clue,
items-center aligned, the CTA stands tall,
A little less eyebrow — no eyebrow at all.
The air quality story, rewritten with care. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main website content updates for Vertex, Beacon, and the AI Platform.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch web-update

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

New azure website changes available for preview here

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/website/src/lib/metadata.ts (1)

531-545: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider aligning the Vertex image alt text with its open-data-sharing positioning.

The new title and description frame Vertex as an "Open Air Quality Data Sharing Platform," but the image alt text still reads "deployment workflow shown on a laptop in a field operations setting." If bring-device.webp actually shows the platform/dashboard, updating the alt to something like "AirQo Vertex open data sharing platform interface" would better match the refreshed messaging.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/website/src/lib/metadata.ts` around lines 531 - 545, The Vertex metadata
entry has alt text that no longer matches the updated “Open Air Quality Data
Sharing Platform” positioning. Update the image alt in the vertex object within
metadata.ts to describe the actual platform/dashboard content shown by
bring-device.webp, using the vertex metadata symbol so it stays aligned with the
new title and description.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/website/src/views/products/ProductMarketingPage.tsx`:
- Around line 107-110: The `intro.description` prop in `ProductMarketingPage`
was widened to accept `ReactNode`, but `ProductMarketingPage` still renders it
inside the `motion.p` wrapper, which breaks when `BeaconPage` and `VertexPage`
pass fragments with `<p>` children. Update the intro rendering in
`ProductMarketingPage` to use a block-level container instead of `motion.p` for
`intro.description`, and keep the existing `intro` prop shape aligned with the
new usage.

---

Nitpick comments:
In `@src/website/src/lib/metadata.ts`:
- Around line 531-545: The Vertex metadata entry has alt text that no longer
matches the updated “Open Air Quality Data Sharing Platform” positioning. Update
the image alt in the vertex object within metadata.ts to describe the actual
platform/dashboard content shown by bring-device.webp, using the vertex metadata
symbol so it stays aligned with the new title and description.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fdc6deb8-d240-4da2-a5d6-3945fd4c1cbc

📥 Commits

Reviewing files that changed from the base of the PR and between 8f7cc33 and 1d8087e.

⛔ Files ignored due to path filters (1)

• src/website/public/assets/images/products/beacon/beacon-dashboard-showcase.png is excluded by !**/*.png

📒 Files selected for processing (11)

• src/website/public/assets/images/products/beacon/beacon-dashboard-showcase.webp
• src/website/public/assets/images/products/beacon/beacon-home.webp
• src/website/public/assets/images/products/vertex/bring-device.webp
• src/website/public/assets/images/products/vertex/person.webp
• src/website/public/assets/images/products/vertex/vertex-dashboard-showcase.webp
• src/website/src/lib/metadata.ts
• src/website/src/lib/navItems.ts
• src/website/src/views/products/AIPlatformPage.tsx
• src/website/src/views/products/BeaconPage.tsx
• src/website/src/views/products/ProductMarketingPage.tsx
• src/website/src/views/products/VertexPage.tsx

💤 Files with no reviewable changes (1)

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

[github-actions]

New azure website changes available for preview here