Replace “Add to Cart” with minimal “Shop Now →” button

[AnshAggarwal011]

User description

Summary

Replaces the old gradient “Add to Cart” button with a minimal “Shop Now →” style (Uiverse-inspired) while keeping all routing logic intact.

Changes

• Transparent button with uppercase text
• Animated underline on hover
• Arrow icon that slides on hover
• Keeps “Try Now” for project id === 4
• No logic changes to router.push()

Screenshots

(attach before/after if you can)

How I tested

• Ran npm run dev
• Verified hover animation, navigation for ids 1–4, and responsiveness

Closes #<issue_number>

---

PR Type

Enhancement

---

Description

• Replaced gradient "Add to Cart" button with minimal "Shop Now →" design

• Added animated underline and sliding arrow icon on hover

• Maintained "Try Now" label for AI Generator project (id === 4)

• Applied code formatting and structural improvements throughout file

• Preserved all routing logic and navigation functionality

---

Diagram Walkthrough

flowchart LR
  OldButton["Gradient Add to Cart Button"] -- "Replace with" --> NewButton["Minimal Shop Now Button"]
  NewButton -- "Features" --> Underline["Animated Underline"]
  NewButton -- "Features" --> Arrow["Sliding Arrow Icon"]
  NewButton -- "Conditional" --> TryNow["Try Now for AI Generator"]
  NewButton -- "Preserves" --> Routing["Router.push Logic"]

Loading

File Walkthrough

Relevant files

Enhancement

page.tsx Button redesign with hover animations and formatting          src/app/dashboard/page.tsx Replaced old gradient "Add to Cart" button with new minimal "Shop Now →" design featuring transparent background, uppercase text, and animated underline Added SVG arrow icon with hover slide animation using group-hover:translate-x-1 class Maintained conditional "Try Now" label for project id === 4 (AI Generator) Applied consistent code formatting (double quotes, proper indentation, trailing commas) Restructured JSX for improved readability with proper line breaks and formatting +256/-203

---

[vercel]

@AnshAggarwal011 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Clickjacking/rapid clicks Description: The button relies solely on client-side navigation without disabling during routing, which could allow rapid repeated clicks leading to multiple router.push calls and potential unintended duplicate requests or navigation races. page.tsx [239-269] Referred Code onClick={() => { if (project.id === 1) { router.push("/form?noOfPage=10&totalAmount=100"); } else if (project.id === 2) { router.push("/form?noOfPage=24&totalAmount=250"); } else if (project.id === 3) { router.push("/form?noOfPage=8&totalAmount=50"); } else if (project.id === 4) { router.push("/ai-generator"); } }} className="relative flex items-center gap-3 py-2 text-white uppercase tracking-[0.15em] bg-transparent border-0 cursor-pointer group" > <span>{project.id === 4 ? "Try Now" : "Shop Now"}</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" ... (clipped 10 lines)
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Decouple navigation logic from UI Move the hardcoded navigation logic from the onClick handler into the featuredProjects data array. This involves adding a url property to each project object and simplifying the click handler to call router.push(project.url). Examples: src/app/dashboard/page.tsx [239-249] onClick={() => { if (project.id === 1) { router.push("/form?noOfPage=10&totalAmount=100"); } else if (project.id === 2) { router.push("/form?noOfPage=24&totalAmount=250"); } else if (project.id === 3) { router.push("/form?noOfPage=8&totalAmount=50"); } else if (project.id === 4) { router.push("/ai-generator"); } ... (clipped 1 lines) Solution Walkthrough: Before: const featuredProjects = [ { id: 1, ... }, { id: 2, ... }, ... ]; ... <button onClick={() => { if (project.id === 1) { router.push("/form?noOfPage=10&totalAmount=100"); } else if (project.id === 2) { router.push("/form?noOfPage=24&totalAmount=250"); } else if (project.id === 4) { router.push("/ai-generator"); } }} > ... </button> After: const featuredProjects = [ { id: 1, url: "/form?noOfPage=10&totalAmount=100", ... }, { id: 2, url: "/form?noOfPage=24&totalAmount=250", ... }, { id: 4, url: "/ai-generator", ... }, ... ]; ... <button onClick={() => router.push(project.url)} > ... </button> Suggestion importance[1-10]: 8 __ Why: This is a strong architectural suggestion that correctly identifies hardcoded navigation logic, which tightly couples the UI and business logic, and proposes a scalable solution that significantly improves maintainability.	Medium
General	Refactor hardcoded navigation logic into a separate function Refactor the onClick handler's navigation logic into a separate getProjectPath function to improve maintainability and use dynamic project data for URL parameters. src/app/dashboard/page.tsx [238-269] +const getProjectPath = (project: (typeof featuredProjects)[0]) => { + switch (project.id) { + case 1: + return `/form?noOfPage=10&totalAmount=${project.price}`; + case 2: + return `/form?noOfPage=24&totalAmount=${project.price}`; + case 3: + return `/form?noOfPage=8&totalAmount=${project.price}`; + case 4: + return "/ai-generator"; + default: + return "/"; + } +}; +... <button - onClick={() => { - if (project.id === 1) { - router.push("/form?noOfPage=10&totalAmount=100"); - } else if (project.id === 2) { - router.push("/form?noOfPage=24&totalAmount=250"); - } else if (project.id === 3) { - router.push("/form?noOfPage=8&totalAmount=50"); - } else if (project.id === 4) { - router.push("/ai-generator"); - } - }} + onClick={() => router.push(getProjectPath(project))} className="relative flex items-center gap-3 py-2 text-white uppercase tracking-[0.15em] bg-transparent border-0 cursor-pointer group" > <span>{project.id === 4 ? "Try Now" : "Shop Now"}</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" > <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3" /> </svg> <span className="absolute bottom-0 left-0 w-full h-[1px] bg-white origin-right scale-x-0 transition-transform duration-300 group-hover:origin-left group-hover:scale-x-100"></span> </button> [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that extracting the complex routing logic into a dedicated function improves code structure, readability, and maintainability, making it a valuable refactoring.	Medium
	Improve button accessibility and semantics Add type="button" to the button to prevent unintended form submissions and add aria-hidden="true" to the decorative SVG icon to improve screen reader accessibility. src/app/dashboard/page.tsx [238-269] <button + type="button" onClick={() => { if (project.id === 1) { router.push("/form?noOfPage=10&totalAmount=100"); } else if (project.id === 2) { router.push("/form?noOfPage=24&totalAmount=250"); } else if (project.id === 3) { router.push("/form?noOfPage=8&totalAmount=50"); } else if (project.id === 4) { router.push("/ai-generator"); } }} className="relative flex items-center gap-3 py-2 text-white uppercase tracking-[0.15em] bg-transparent border-0 cursor-pointer group" > <span>{project.id === 4 ? "Try Now" : "Shop Now"}</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" + aria-hidden="true" > <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3" /> </svg> <span className="absolute bottom-0 left-0 w-full h-[1px] bg-white origin-right scale-x-0 transition-transform duration-300 group-hover:origin-left group-hover:scale-x-100"></span> </button> Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion improves accessibility and semantic correctness by adding aria-hidden to a decorative icon and type="button" for safer behavior, which are valuable best practices.	Low
Update

[kris70lesgo]

@AnshAggarwal011 send me a video of button working

[AnshAggarwal011]

@kris70lesgo PLEASE CHECK ON BELOW LINK :
https://drive.google.com/file/d/1BTrTG4DmAdKZyDQbT-aM7e6021UCoUuk/view?usp=sharing

[kris70lesgo]

@AnshAggarwal011 nice work can u resolve the conflicts and rebase the pr ur branch is 15 commits behind

[AnshAggarwal011]

@kris70lesgo Conflicts resolved, branch updated with latest main. Ready for review ✅

[kris70lesgo]

@AnshAggarwal011 nice work