Skip to content

feat: add support buttons to homepage OSS section#16

Merged
anurag629 merged 6 commits intocodercops:devfrom
anurag629:dev
Mar 5, 2026
Merged

feat: add support buttons to homepage OSS section#16
anurag629 merged 6 commits intocodercops:devfrom
anurag629:dev

Conversation

@anurag629
Copy link
Member

@anurag629 anurag629 commented Mar 5, 2026

Summary

  • Added Buy Me a Coffee and PayPal support buttons to the Open Source banner section on the homepage
  • Styled as ghost buttons (btn-ghost) to keep them subtle and non-intrusive compared to the primary "Star on GitHub" CTA
  • Both open in new tabs with appropriate icons (coffee cup and credit card SVGs)
  • Mobile-friendly — the existing .oss-ctas container already stacks vertically on small screens

Closes #7

Test plan

  • Verify buttons render correctly on desktop
  • Verify buttons stack properly on mobile (<768px)
  • Verify Buy Me a Coffee link opens correctly
  • Verify PayPal link opens correctly
  • Run npm run build — passes

…w pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor
- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor
…ails

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.
Add Buy Me a Coffee and PayPal buttons in the Open Source banner
section to allow users to support the project financially.

Closes codercops#7
@vercel
Copy link

vercel bot commented Mar 5, 2026

@anurag629 is attempting to deploy a commit to the CODERCOPS Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Mar 5, 2026

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

Project Deployment Actions Updated (UTC)
ogcops Ready Ready Preview, Comment Mar 5, 2026 10:13am

Request Review

…inks

- Split hero layout: text+CTAs on left, floating OG card stack on right (desktop)
- Three fanned mockup cards showcasing different template styles (blog, launch, portfolio)
- Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation
- Subtle support line below CTAs with Buy Me a Coffee and PayPal links
- Branded support buttons (BMC yellow, PayPal blue) in OSS banner section
- Mobile: centered text-only layout, cards hidden

Closes codercops#7
@anurag629 anurag629 merged commit 48a37f2 into codercops:dev Mar 5, 2026
1 of 2 checks passed
anurag629 added a commit that referenced this pull request Mar 5, 2026
* chore: rename main branch references to production (#10)

Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.

* Add Feedback link to footer (#11)

* fix: comprehensive mobile UI/UX improvements (#13)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

* release: v1.1.0 — Mobile UI/UX improvements (#14) (#15)

* chore: rename main branch references to production (#10)

Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.

* Add Feedback link to footer (#11)

* fix: comprehensive mobile UI/UX improvements (#13)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>

* feat: add support buttons to homepage OSS section (#16)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

* feat: add support buttons to homepage OSS section

Add Buy Me a Coffee and PayPal buttons in the Open Source banner
section to allow users to support the project financially.

Closes #7

* feat: redesign hero with split layout, OG card mockups, and support links

- Split hero layout: text+CTAs on left, floating OG card stack on right (desktop)
- Three fanned mockup cards showcasing different template styles (blog, launch, portfolio)
- Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation
- Subtle support line below CTAs with Buy Me a Coffee and PayPal links
- Branded support buttons (BMC yellow, PayPal blue) in OSS banner section
- Mobile: centered text-only layout, cards hidden

Closes #7

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
anurag629 added a commit that referenced this pull request Mar 5, 2026
* release: v1.1.0 — Mobile UI/UX improvements (#14)

* chore: rename main branch references to production (#10)

Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.

* Add Feedback link to footer (#11)

* fix: comprehensive mobile UI/UX improvements (#13)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>

* release: v1.2.0 — Hero redesign & support buttons (#17)

* chore: rename main branch references to production (#10)

Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.

* Add Feedback link to footer (#11)

* fix: comprehensive mobile UI/UX improvements (#13)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

* release: v1.1.0 — Mobile UI/UX improvements (#14) (#15)

* chore: rename main branch references to production (#10)

Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.

* Add Feedback link to footer (#11)

* fix: comprehensive mobile UI/UX improvements (#13)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>

* feat: add support buttons to homepage OSS section (#16)

* fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor

* fix: improve create page customize & export tabs for mobile devices

- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor

* docs: update CLAUDE.md with enhanced guidance and template system details

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.

* feat: add support buttons to homepage OSS section

Add Buy Me a Coffee and PayPal buttons in the Open Source banner
section to allow users to support the project financially.

Closes #7

* feat: redesign hero with split layout, OG card mockups, and support links

- Split hero layout: text+CTAs on left, floating OG card stack on right (desktop)
- Three fanned mockup cards showcasing different template styles (blog, launch, portfolio)
- Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation
- Subtle support line below CTAs with Buy Me a Coffee and PayPal links
- Branded support buttons (BMC yellow, PayPal blue) in OSS banner section
- Mobile: centered text-only layout, cards hidden

Closes #7

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>

---------

Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
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.

Add support button on the homepage

1 participant