feat: add reusable Button component with variant support

[ryzen-xp]

📝 feat: Create reusable Button component with variant support

🛠️ Issue

• Closes Create Button component #285

📖 Description

• Implemented a highly reusable, type-safe, and interactive Button component at frontend/components/ui/button.tsx.
• Defined style properties to support the three required variations: primary (emerald/mint green fill), ghost (border outline with transparent background), and danger (soft red tinted background).
• Configured dynamic responsiveness, dark mode variables compatibility, and smooth micro-interactions.

✅ Changes made

• Created component at frontend/components/ui/button.tsx conforming exactly to the requested props:
  • label: string (rendered text)
  • variant: 'primary' | 'ghost' | 'danger'
  • disabled?: boolean (handles opacity and interactive safety)
  • onClick: () => void
• Aesthetic and UX enhancements:
  • Leveraged class-variance-authority (cva) and clsx / tailwind-merge for robust custom class combination.
  • Capsule-shaped layout (rounded-full) matching the design specifications.
  • Micro-interactions added: tactile shrink transition on click (active:scale-97), smooth opacity transitions for hover actions, and focus ring outlines for improved accessibility.

🖼️ Media (screenshots/videos)

📜 Additional Notes

• Verified that the production build completes successfully via pnpm build.
• Ran the linter (pnpm lint) to guarantee the file contains zero warnings or format errors.

[diegoTech14]

Hello sir, it looks nice but I need you to add a default padding value, specifically ps-5 pe-5 pt-2 pb-2 and add image evidences with this change. Then I can merge it.

[diegoTech14]

@ryzen-xp hello sir, any updates on this? If we don't get updates on this to tomorrow morning we'll reassign it.