Skip to content

feat: Raycast-inspired UI/UX redesign - #3

Merged
anurag629 merged 2 commits into
devfrom
ui/raycast-redesign
Feb 27, 2026
Merged

feat: Raycast-inspired UI/UX redesign#3
anurag629 merged 2 commits into
devfrom
ui/raycast-redesign

Conversation

@anurag629

@anurag629 anurag629 commented Feb 27, 2026

Copy link
Copy Markdown
Member

Summary

  • Full visual overhaul across all pages inspired by Raycast's design language — crisp typography, generous whitespace, subtle gradients, soft glows, and micro-interactions
  • Enhanced design system foundation: layered shadows, glassmorphism, gradient variables, animation utilities, terminal chrome component
  • Redesigned homepage (hero glow, bento category grid, feature cards, vertical timeline, terminal API teaser, OSS banner), templates gallery (search, filter pills, card hover glow), editor (dot-grid canvas, refined panels), API docs (sidebar icons, terminal code blocks, copy buttons), 404 page, header (frosted glass), and footer (3-column grid)
  • Fixed thumbnail API cropping bug: templates now render at full 1200x630 and scale down via resvg instead of rendering at 600x315 viewport which cropped the design
  • Added Astro View Transitions for smooth page navigation
  • Added GitHub stars, visitor counter utilities, and .env.example

Test plan

  • npm run build passes with zero errors
  • npm run check (TypeScript) passes
  • npm run test passes
  • Visual check on desktop (1440px+): hero glow, bento grid, timeline, terminal chrome
  • Visual check on tablet (768px) and mobile (375px): layouts collapse gracefully
  • Template thumbnails show full design (not cropped top-left) on /templates and editor sidebar
  • All existing functionality works: template selection, editor, export, preview checker, API
  • View transitions: smooth cross-fade between pages, header persists

Redesign the entire site with a polished, premium feel inspired by Raycast:

- Design system: enhanced shadows, gradients, glassmorphism, animations
- Header: frosted glass, gradient border, nav hover pills
- Homepage: hero glow, equal-width bento category grid, feature cards,
  vertical timeline, terminal chrome API teaser, OSS banner
- Templates gallery: search bar, filter pills, card hover glow
- Editor: dot-grid canvas, refined panels, gradient export button
- API docs: sidebar icons, terminal chrome code blocks, copy buttons
- 404 page: SVG illustration, floating shapes, gradient text
- Footer: 3-column grid layout with gradient top border
- Layout: Astro View Transitions for smooth page navigation
- Fix thumbnail API rendering templates at 600x315 viewport (cropping)
  instead of 1200x630 with resvg scale-down (showing full template)
Add supporting libs for GitHub star count, Upstash Redis visitor
counter, and the /api/visitors endpoint. Include .env.example for
required environment variables.
@vercel

vercel Bot commented Feb 27, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
ogcops Ready Ready Preview, Comment Feb 27, 2026 9:45am

Request Review

@anurag629
anurag629 merged commit 6b0373e into dev Feb 27, 2026
3 checks passed
@anurag629
anurag629 deleted the ui/raycast-redesign branch February 27, 2026 09:46
anurag629 added a commit that referenced this pull request Feb 27, 2026
* ci: enforce dev → main PR flow (#2)

* docs: improve README hero image, add contributors section (#1)

Switch hero from blog-minimal-dark to github-readme-hero template with
brand accent color. Add contrib.rocks contributors grid. Condense
contributing section to avoid redundancy with CONTRIBUTING.md.

* ci: add workflow to restrict PRs targeting main to dev branch only

PRs targeting main from any branch other than dev will fail the
PR Target Check. This enforces the flow: feature branches → dev → main.

* ci: retrigger checks after base branch change

* ci: run CI on PRs targeting dev branch too

* feat: Raycast-inspired UI/UX redesign (#3)

* feat: Raycast-inspired UI/UX redesign across all pages

Redesign the entire site with a polished, premium feel inspired by Raycast:

- Design system: enhanced shadows, gradients, glassmorphism, animations
- Header: frosted glass, gradient border, nav hover pills
- Homepage: hero glow, equal-width bento category grid, feature cards,
  vertical timeline, terminal chrome API teaser, OSS banner
- Templates gallery: search bar, filter pills, card hover glow
- Editor: dot-grid canvas, refined panels, gradient export button
- API docs: sidebar icons, terminal chrome code blocks, copy buttons
- 404 page: SVG illustration, floating shapes, gradient text
- Footer: 3-column grid layout with gradient top border
- Layout: Astro View Transitions for smooth page navigation
- Fix thumbnail API rendering templates at 600x315 viewport (cropping)
  instead of 1200x630 with resvg scale-down (showing full template)

* feat: add GitHub stars and visitor counter utilities

Add supporting libs for GitHub star count, Upstash Redis visitor
counter, and the /api/visitors endpoint. Include .env.example for
required environment variables.
anurag629 added a commit that referenced this pull request Feb 27, 2026
* ci: enforce dev → main PR flow (#2)

* docs: improve README hero image, add contributors section (#1)

Switch hero from blog-minimal-dark to github-readme-hero template with
brand accent color. Add contrib.rocks contributors grid. Condense
contributing section to avoid redundancy with CONTRIBUTING.md.

* ci: add workflow to restrict PRs targeting main to dev branch only

PRs targeting main from any branch other than dev will fail the
PR Target Check. This enforces the flow: feature branches → dev → main.

* ci: retrigger checks after base branch change

* ci: run CI on PRs targeting dev branch too

* feat: Raycast-inspired UI/UX redesign (#3)

* feat: Raycast-inspired UI/UX redesign across all pages

Redesign the entire site with a polished, premium feel inspired by Raycast:

- Design system: enhanced shadows, gradients, glassmorphism, animations
- Header: frosted glass, gradient border, nav hover pills
- Homepage: hero glow, equal-width bento category grid, feature cards,
  vertical timeline, terminal chrome API teaser, OSS banner
- Templates gallery: search bar, filter pills, card hover glow
- Editor: dot-grid canvas, refined panels, gradient export button
- API docs: sidebar icons, terminal chrome code blocks, copy buttons
- 404 page: SVG illustration, floating shapes, gradient text
- Footer: 3-column grid layout with gradient top border
- Layout: Astro View Transitions for smooth page navigation
- Fix thumbnail API rendering templates at 600x315 viewport (cropping)
  instead of 1200x630 with resvg scale-down (showing full template)

* feat: add GitHub stars and visitor counter utilities

Add supporting libs for GitHub star count, Upstash Redis visitor
counter, and the /api/visitors endpoint. Include .env.example for
required environment variables.

* fix: add Content-Type header to visitor counter POST request (#8)

Vercel CSRF protection blocks POST requests without explicit
Content-Type: application/json, returning 403 Forbidden.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant