WD 38246/add new charms section

[abbiesims]

Done

• Implements new landing page as per design
• Uses new CharmCard for charms section
  • Uses placeholder charm cards for solutions section until solutioncard is implemented
• Updates search placeholder to display "Search Solutions and Charms"
  • n.b. search will be updated in another PR

How to QA

• Go to demo
• Confirm Solutions and Charms sections match the design
  • The solutions cards are not final - using charmcard as placeholder so just make sure the general section looks good
  • The SolutionCard will be implemented in another PR
• Make sure tabs / side nav works
• Search will not work yet - will be implemented in different PR

Testing

• This PR has tests

Issue / Card

Fixes WD-38246 and WD-38245

UX Approval

• This PR does require UX approval

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

🟡 Changes recommended

The current implementation introduces avoidable performance/packaging risks (unstable per-fetch IDs and duplicate @canonical/react-components versions via @canonical/store-components) that should be resolved before merge.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates Charmhub’s store landing experience by introducing a dedicated landing page with “Solutions” and “Charms” sections, updating the data shape to support the new CharmCard requirements, and adjusting search UI copy to match the new IA.

Changes:

• Added a new store landing page component (solutions + charms sections with side navigation) and wired it into the Packages page when no filters are applied.
• Extended backend store search fields and package parsing to provide additional CharmCard data (e.g., summary, last_updated, category display names), with corresponding test updates.
• Updated frontend types and tests to align with the CharmCard data shape and the new landing/placeholder UI.

File summaries

File	Description
package.json	Bumps @canonical/store-components to support new CharmCard usage.
yarn.lock	Lockfile updates for the dependency bump(s) and updated transitive tree.
webapp/config.py	Adds released-at field to search fields to support last_updated.
webapp/packages/logic.py	Extends card payload with summary, last_updated, and category display_name mapping.
tests/test_search.py	Updates expected fields query to include released-at.
tests/store/test_get_packages.py	Adds coverage for the new charm card data produced by parse_package_for_card.
static/js/src/store/types/index.ts	Updates store API typing to align with CharmCard data prop shape.
static/js/src/store/pages/Packages/Packages.tsx	Routes empty-query traffic to the new landing page and adjusts fetch behavior.
static/js/src/store/pages/Packages/__tests__/Packages.test.tsx	Updates/extends tests for landing vs filtered behavior.
static/js/src/store/components/SearchInput/SearchInput.tsx	Updates search placeholder copy.
static/js/src/store/components/LandingPage/LandingPage.tsx	New landing page UI: side nav + featured solutions/charms sections.
static/js/src/store/components/LandingPage/index.ts	Exports LandingPage component.
static/js/src/store/components/LandingPage/__tests__/LandingPage.test.tsx	Adds unit tests for landing page rendering and side-nav state updates.
static/js/src/store/components/Banner/__tests__/Banner.test.tsx	Updates expectations for the new placeholder text.
static/js/src/shared/types.ts	Extends shared charm typing to include new fields used by the UI.

Review details

Suppressed comments (1)

static/js/src/store/pages/Packages/Packages.tsx:26

• Generating a new uuid for each package on every fetch makes id (and React keys) unstable, causing unnecessary remounts and potential UI flicker; a stable id can be derived from the package data (e.g. ${type}:${name}).

    const packagesWithId = data.packages.map((item: string[]) => {
      return {
        ...item,
        id: uuidv4(),
      };

• Files reviewed: 14/15 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Demo

✅ Demo deployed: https://charmhub-io-pr2416.demos.canonical.com

[canonical-steverydz]

LGTM 👍

One suggestion in the code, but feel free to ignore it if you don't agree :)

[migueldivo]

Thanks for working on this. The cards and content on the landing page all look good to me with just 2 requests:

• I think the side nav should have a scroll-to animation as that's been done in other marketing pages (example 1, example 2)
• I missed a typo in the charm section description. In the following sentence You can use charms with Juju, Canonical open source orchestration engine for software operators., Canonical should be Canonical's

Other than that, everything LGTM, thanks Abbie!