Add anchor IDs to brand page sections for shareable navigation links

[Copilot]

Overview

Implemented anchor IDs for all sections on the brand page to enable direct linking and sharing of specific sections. Users can now navigate to and share links like https://layer5.io/company/brand#meshery to point directly to a specific brand section.

Changes Made

1. Added Unique IDs to All Sections

Each <div className="section"> element now has a unique, SEO-friendly id attribute:

• brand-guide - Brand Guide section
• layer5 - Layer5 section
• social-backgrounds - Layer5 Social Backgrounds section
• meshery - Meshery section
• meshsync - MeshSync section
• meshery-operator - Meshery Operator section
• image-hub - Image Hub section
• smp - Cloud Native Performance section
• meshmark - MeshMark section
• service-mesh-patterns - Cloud Native Patterns section
• nighthawk - NightHawk section
• meshmate - MeshMate section
• meshmaster - MeshMaster section
• kanvas - Kanvas section
• catalog - Catalog section
• five - Five (mascot) section

2. Enhanced Navigation Function

Updated the scrollTo function to:

• Accept a sectionId parameter
• Update the browser URL hash using window.history.pushState() when navigating to sections
• Maintain the existing smooth scrolling animation

3. Hash Navigation on Page Load

Added a useEffect hook that:

• Checks for a hash in the URL when the page loads
• Automatically scrolls to the corresponding section if a valid hash is present
• Enables direct navigation via URLs like /company/brand#kanvas

User Benefits

✅ Navigation menu items now update the URL - Click any section in the navigation menu and the URL automatically updates with the corresponding hash

✅ Shareable section links - Copy and share direct links to specific brand sections (e.g., https://layer5.io/company/brand#meshery)

✅ Direct navigation - Visit URLs with hash anchors to jump directly to specific sections

✅ Preserved smooth scrolling - The existing smooth scroll animation continues to work seamlessly

Screenshot

The screenshot shows the brand page with the URL hash #meshery after clicking the Meshery navigation link, demonstrating that users can now copy and share this URL to link directly to the Meshery brand section.

Testing

• ✅ Verified all 16 sections have proper IDs
• ✅ Tested clicking navigation items - URL hash updates correctly
• ✅ Tested direct navigation with hash - page loads and scrolls to correct section
• ✅ Confirmed smooth scrolling animation is preserved
• ✅ Development build runs successfully without errors

Fixes the issue where brand page sections couldn't be directly linked or shared.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/756035/chrome-linux.zip
  • Triggering command: node install.js (http block)
• unpkg.com
  • Triggering command: node scripts/postinstall.js (dns block)
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/layer5/layer5/.cache/tmp-4170-p5ypN39rVOA6 (dns block)
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/layer5/layer5/.cache/tmp-4670-ZDP1pnXG1l7R (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

On index.js, Ensure that each <div className="section" ref=""> section in this page (https://layer5.io/company/brand) has an id with anchor that can be copied and pasted. Ensure that each time a user clicks on a link in the page's menu that the section id is used during navigation.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.