docs: polish ESPHome Starter Kit spotlight card

[bharvey88]

Summary

• Replaces the top green "Are you looking for the starter kit guide?" pill with a small Spotlight eyebrow label so the card has one inner button (the green CTA) instead of two.
• Rewords the AI-tinged subhead ("Build, learn, automate. A real product you'll keep using in your home.") to "Build your first smart sensor from scratch."
• Bumps the image to 280x212 with rounded corners and vertically centers it inside the card.
• Tightens card padding (28/32 -> 24/28) and adjusts the text gutter so the new image fits cleanly.

Test plan

• Preview locally with mkdocs serve and confirm the card renders cleanly on desktop
• Confirm the mobile media query still stacks the image below the text under 700px

Summary by CodeRabbit

Documentation

• Updated homepage with refined visual styling and improved content layout for the ESPHome Starter Kit spotlight section. The featured spotlight card now displays enhanced design with clearer messaging, updated guidance copy, and improved visual hierarchy to help users discover and easily access important starter kit documentation, guides, and resources.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eeb07bf5-ddc2-434e-84a2-0d4c239bbe05

📥 Commits

Reviewing files that changed from the base of the PR and between b387f8f and 84b387c.

📒 Files selected for processing (1)

• docs/index.md

---

Walkthrough

This PR updates the homepage documentation (docs/index.md) by introducing a new CSS class for the spotlight card image and refactoring the "ESPHome Starter Kit" spotlight card markup. The image styling is centralized into a CSS rule, the card badge text changes from a question to "Spotlight," and the overall card layout is refreshed with adjusted inline styles.

Changes

Homepage Spotlight Card Redesign

Layer / File(s)	Summary
CSS styling for spotlight card image docs/index.md	New .apollo-esk-img CSS class defines absolute positioning, fixed size (160×160), border radius, and object-fit behavior for the spotlight card image.
Spotlight card markup and content update docs/index.md	Spotlight card is redesigned with badge text changed to "Spotlight," copy updated, card/text inline styles adjusted, and image element switched to use the new .apollo-esk-img CSS class instead of inline positioning.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• ApolloAutomation/docs#820: Adds new "Learn the Basics" documentation pages and navigation for the ESPHome Starter Kit area, complementing this PR's homepage spotlight card redesign.

Poem

🐰 A spotlight gleams on the kit so bright,
New CSS rules make images just right,
The card is refreshed with a badge and new voice,
Centered and styled—oh, what a choice! ✨

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs-spotlight-card-polish

---

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 and usage tips.}