Amazon Gift Card
A beautifully designed gift card component with realistic scratch-off effect, frosted glass styling, and interactive elements. Perfect for promotional campaigns, reward systems, and e-commerce applications.
Preview
Amazon $100 Gift Card
Click the button below to redeem your amazon gift code.
Grab this coupon code and remember to use it within 30 days, so you don't miss out!
Installation
You can add this component to your project using the CLI or by manually copying the code.
Basic Usage
After installation, import and use the component in your React application:
Component Structure
The Amazon Gift Card component consists of several key visual elements:
1. Card Container
- Rounded card with shadow and border
- Responsive padding and max-width constraints
- Dark mode compatible background colors
2. Decorative Punch Hole
- Top-centered punch hole detail for authenticity
- Custom clip-path for realistic shape
- Subtle border and background styling
3. Header Section
- Gift card title and description
- Centered layout with proper typography
- Responsive text sizing
4. Frosted Glass Section
- Backdrop-blur effect for modern appearance
- Contains gift card value and code input
- Subtle border and shadow effects
5. Scratch-Off Effect
- Interactive peeling sticker illusion
- Chevron pattern background
- 3D shadow effects for depth
- Angled clip-path for realistic peel
6. CTA Button
- Purple gradient with glow effect
- Hover state transitions
- Full-width responsive design
Customization
Gift Card Value
Modify the gift card amount and currency:
Brand Customization
Update the brand name and styling:
Color Scheme
Customize the purple theme colors:
Coupon Code Placeholder
Update the default coupon code format:
Advanced Features
Dynamic Gift Card Values
Create dynamic gift cards with different values:
Code Generation
Implement automatic coupon code generation:
Claim Functionality
Add claim handling with validation: