Replace placeholder images with contextual annotation demo scenes

[Copilot]

Homepage hero section used generic placeholder SVGs that failed to communicate the purpose of each annotation tool. Replaced with 5 purpose-built demonstration scenes.

Changes

New Demo Assets (apps/web/public/)

• demo-cars.svg - Highway traffic for bounding box demo (Box Tool)
• demo-people.svg - Urban pedestrians for polygon annotation (Polygon Tool)
• demo-nature.svg - Park scene for segmentation masks (Brush Tool)
• demo-warehouse.svg - Industrial setting for AI detection (AI Assist)
• demo-layers.svg - Mixed scene with layer UI overlay (Layer Manager)

Component Updates (HeroSection.tsx)

const labelingTools = [
  {
    name: "Box Tool",
-   image: "/dog.jpg",
+   image: "/demo-cars.svg",
    description: "Create bounding boxes around objects for quick labeling",
  },
  // ... 4 more tools with contextual images
]

Accessibility

• Added role="img" with aria-labelledby to all SVGs
• Included <title> and <desc> elements for screen readers

Before/After

Before: Generic placeholder showing image icon

After: Contextual scenes matching annotation use cases

All assets are SVG for resolution independence. Each scene demonstrates realistic annotation scenarios for its corresponding tool.

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:

• fonts.googleapis.com
  • Triggering command: next-server (v15.2.4) (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

---

This section details on the original issue you should resolve

<issue_title>Finding good image to replace the home page and tweek some animation that AI generate it</issue_title>
<issue_description>this UI is was generated by AI . if some want that can find the image that good for putting on the homepage with reasonable with the annotation application. just want idea !

example like this one:
it not the actual screen like that but kind of image that looking good for it

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Finding good image to replace the home page and tweek some animation that AI generate it #192

---

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vailabel	Ready	Preview	Comment	Nov 2, 2025 5:28pm
vailabel-studio	Ready	Preview	Comment	Nov 2, 2025 5:28pm