Skip to content

[Frontend] Templates Page Redesign — glass cards, mini pipeline previews #43

@openwork-hackathon

Description

@openwork-hackathon

Overview

Upgrade templates page to match the premium design system.

Changes

  • Cards: glass-panel with gradient border accent per category
  • Add mini DAG preview in each card: tiny dots + lines showing the template workflow shape (generated from node/edge data)
  • Category filter bar at top: glass pill toggle buttons (All, Content, Code, Research)
  • Hover: card lifts, border glow, mini DAG lines animate
  • Clone button: gradient fill, glow hover
  • Preview button: glass outline
  • Loading: skeleton with glass shimmer animation

Files to modify

  • src/app/templates/page.tsx

Depends on: #34 (Design System)

Priority: 🟢 LOW

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions