Prices page Implementation

[zleypner]

🚀 Issue Summary

Implement the Transaction Tiers page featuring pricing plans and billing options. The page should use shadcn/ui components and follow the provided design mockup.

📝 Type of Issue

• 🐛 Bug
• ✨ Feature Request
• 📖 Documentation
• ⚡ Performance
• 🔒 Security
• ❔ Other

⚠️ Current Behavior

🔹 New page implementation needed for the transaction tiers pricing section.

✅ Expected Behavior

🏗️ Required shadcn/ui Components

1. 📦 Card
2. 🔘 Switch
3. 🏷️ Badge
4. 🎯 Button
5. ✍️ Typography
6. 📌 Container

🖥️ Page Content

🔝 Header Content

• 🏆 Main Title: "Transaction Tiers"
• 📄 Subtitle: "Choose the perfect plan for your transaction needs with our transparent fee structure."
• 🔄 Billing Toggle:
  • 📆 Monthly option
  • 📅 Yearly option (with "💰 Save 25%" badge)

💰 Pricing Plans Data

🟢 Basic Tier

• 💸 Rate: 0.5% per transaction
• 📌 Features:
  • ✔️ Up to $10k transactions
  • ✔️ Basic escrow service
  • ✔️ Standard security
  • ✔️ 24/7 support
• 🔹 Button: "⚡ Connect Wallet"

🔵 Pro Tier (Popular) ⭐

• 💸 Rate: 0.3% per transaction
• 📌 Features:
  • ✔️ Up to $100k transactions
  • ✔️ Advanced escrow options
  • ✔️ Multi-signature security
  • ✔️ Priority support
  • ✔️ Custom transaction rules
• 🏷️ Badge: "🔥 Popular"
• 🔹 Button: "⚡ Connect Wallet"

🏆 Enterprise Tier

• 💸 Rate: "Custom"
• 📌 Features:
  • ✔️ Unlimited transaction volume
  • ✔️ Custom escrow solutions
  • ✔️ Advanced security features
  • ✔️ Dedicated account manager
  • ✔️ API access
• 🔹 Button: "📞 Contact Sales"

🎨 Design Requirements

• 🌓 Dark theme
• 🔳 Glass-morphism effect on cards
• 🎨 Primary color: #4C6FFF
• ⚫ Background: Black
• 🪟 Card backgrounds: Semi-transparent (rgba(17, 19, 26, 0.7))
• ✔️ Blue checkmark icons for features
• 📱 Responsive layout (1/2/3 columns based on screen size)

📦 Required Assets

• ✔️ Checkmark icon (from Lucide icons)
• 🔄 Toggle switch component
• 🏷️ Popular badge component

🛠️ Additional Notes

• 🔹 Implement responsive design 📱
• 🔹 Add hover states for cards and buttons 🖱️
• 🔹 Ensure proper spacing between elements 📏
• 🔹 Add smooth transitions for toggle states 🎞️
• 🔹 Implement proper mobile layout 📱
• 🔹 Consider loading states ⏳
• 🔹 Add error handling for wallet connections ❌

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

If you apply to this issue with comments like:
"Can I get assigned?"
"Can I work on this?"

🙅‍♂️ You will not be assigned 🙅‍♀️

We value quality over speed. To be considered, explain in detail how you plan to resolve the issue. Thank you for understanding.

[Emmy123222]

I'd like to handle this task.

[SudiptaPaul-31]

May I be assigned to this issue?

[Godsmiracle001]

May I try my hand at this? High priority

[cridiv]

Let me try this one!

[olamide531]

My name is peace, I am a frontend developer with knowledge of react, and tailwind CSS, and I would like to take on this issue, can i be assigned this task. I will be sure to review all the and I will do a good job, could i be assigned this task?

[akintewe]

Hello good day i am akintewe and i am excited to work on the project .

I'm a full stack developer with 4+ years of experience building complex forms and e-commerce systems. I've previously developed inventory management systems for agricultural businesses and am well-versed in handling image processing and state management at scale. I would love to work on this issue, My ETA is 8 hours.

[davidedde]

I'm David a frontend developer, I will be able to build the price page implementation if assigned the issue.

[lucidfort]

I would love to work on this project. I've designed and built a neat and sleek pricing sections in my previous projects and my deep knowledge in tailwindcss will make the development process easier and faster

[Stepcu]

Request for Issue Assignment: "Implement Transaction Tiers Page"

🔍 Why Assign Me?

With over three years of front-end experience and as a member of Dojo Coding, I excel in creating responsive and visually appealing UI components. I'm skilled in using shadcn/ui and ensuring design consistency.

🔧 How I Will Solve It

Setup:

Use shadcn/ui components: Card, Switch, Badge, Button, Typography, Container.
Design:

Implement dark theme with glass-morphism effect.
Use primary color #4C6FFF and semi-transparent card backgrounds.
Functionality:

Add billing toggle for monthly/yearly options.
Implement pricing plans: Basic, Pro, Enterprise.
Responsive Design:

Ensure layout adapts to 1/2/3 columns based on screen size.
Testing:

Validate hover states, transitions, and mobile layout.
🚀 Next Steps

I'm ready to implement the Transaction Tiers page. Please assign this issue to me. Thank you!

[armandocodecr]

📬 Issue Submission: Implement Transaction Tiers Page

Hey @zleypner ,

I’d love to take on the Transaction Tiers page implementation, ensuring a clean, responsive, and visually appealing design using shadcn/ui components. Below is my detailed plan for this issue:

🛠️ Proposed Implementation

Page Structure & Components

•	Header Content:
•	Title: "Transaction Tiers"
•	Subtitle: "Choose the perfect plan for your transaction needs with our transparent fee structure."
•	Billing Toggle: Monthly & Yearly option (with "💰 Save 25%" badge).
•	Pricing Plans Section:
•	Basic Tier:
•	💸 Rate: 0.5% per transaction
•	✅ Features: Basic escrow service, up to $10k transactions, 24/7 support
•	⚡ Button: "Connect Wallet"
•	Pro Tier (Popular) ⭐:
•	💸 Rate: 0.3% per transaction
•	✅ Features: Advanced escrow, multi-signature security, priority support
•	🔥 Badge: "Popular"
•	⚡ Button: "Connect Wallet"
•	Enterprise Tier:
•	💸 Rate: "Custom"
•	✅ Features: Unlimited transactions, dedicated account manager, API access
•	📞 Button: "Contact Sales"

Styling & UI Enhancements

•	Dark Theme: Fully integrated using shadcn/ui components.
•	Glass-morphism Cards:
•	Background: rgba(17, 19, 26, 0.7) for transparency.
•	Hover Effects: Smooth transitions for better UX.
•	Primary Color: #4C6FFF.
•	Icons & Components:
•	✅ Checkmark icons from Lucide for features.
•	🏷️ Popular Badge for Pro Tier.
•	🔄 Toggle Component for Monthly/Yearly billing.

Responsiveness & Accessibility

•	Adaptive Layout:
•	1 column (Mobile)
•	2 columns (Tablet)
•	3 columns (Desktop).
•	Error Handling:
•	Handle wallet connection failures with proper messaging.
•	Loading States: Ensure smooth transitions and skeleton loaders where needed.

✅ Acceptance Criteria

• ✅ Implemented using shadcn/ui components.
• ✅ Fully responsive with glass-morphism design.
• ✅ Includes hover effects, smooth transitions, and proper spacing.
• ✅ Error handling for wallet connections.
• ✅ Git Guidelines and Atomic Commits followed.

⏳ Timeline

I estimate completing this task in 4 days, ensuring full responsiveness and proper component integration.

Looking forward to your feedback and approval! 🚀 care of this issue?

[Haroldwonder]

Let me handle this issue!

[ShantelPeters]

I will love to give this a go.

[EDOHWARES]

May I handle this ?

I'm a fullstack developer with experience in building scalable and user oriented web applications.
If assigned this issue, will submit my first PR within 48hrs.
From the description, the issue involves Implementing the Transaction Tiers page featuring pricing plans and billing options using shadcn/ui components.

[BravarDev]

HI, I would like to contribute to this project, I have experience in front end and I think I can finish this page in 2 or 3 days.