Cherry Blossom Variant

Soft Pink Cherry Blossom Design

The Cherry Blossom variant features a gentle pink color palette, rounded corners, and a floral accent. Perfect for elegant, friendly, and visually appealing payment pages.

Live Preview

Installation

Generate the Cherry Blossom component:

bash
npx devfund@latest cherry-blossom

This creates components/devfund/CherryBlossomPaymentQR.tsx

Basic Usage

tsx
import CherryBlossomPaymentQR from '@/components/devfund/CherryBlossomPaymentQR';

export default function SupportPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#FFF0F5]">
      <CherryBlossomPaymentQR username="yourname" />
    </div>
  );
}

Props

typescript
interface CherryBlossomPaymentQRProps {
  username: string;  // Required: The username to fetch payment data for
}

States

Default State

Shows a pink button with floral accent:

[🌸 Support {DisplayName}]  (pink button)

Loading State

While fetching user data with spinner:

[⏳ Loading...]  (pink button, spinner)

Success State

Modal opens with cherry blossom styling showing:

Pink badge with "🌸 {username}"
QR code in pink container
UPI ID below with copy button
"Scan with any UPI app" instruction
"Pay directly via UPI" link

Error State

Error state with red/pink styling:

[⚠️ Error]  (red/pink button)

Best Practices

Use with Soft Pink Backgrounds

The Cherry Blossom variant looks best on light pink or floral backgrounds:

tsx
<div className="min-h-screen bg-[#FFF0F5]">
  <CherryBlossomPaymentQR username="yourname" />
</div>

Use with White or Light Colors

Also works on white backgrounds:

tsx
<div className="min-h-screen bg-white">
  <CherryBlossomPaymentQR username="yourname" />
</div>

Customization

Change Pink Accent

Edit the pink color values for a different shade:

tsx
// Softer pink
className="bg-[#FFD1DC] border-[#FFB6C1]"

// Deeper pink
className="bg-[#FFB6C1] border-[#C2185B]"

Change Button Style

tsx
// Rounded full button
className="rounded-full px-6 py-3"

// Add floral emoji
🌸

Change Border Style

tsx
// Thicker border
className="border-4 border-[#FFB6C1]"

// Remove border
className="border-0"

Advanced Usage

With Hero Section

tsx
import CherryBlossomPaymentQR from '@/components/devfund/CherryBlossomPaymentQR';

export default function HeroPage() {
  return (
    <section className="relative min-h-screen overflow-hidden">
      {/* Soft pink animated background */}
      <div className="absolute inset-0 bg-linear-to-br from-[#FFF0F5] via-[#FFB6C1] to-[#FFD1DC] animate-pulse opacity-90" />
      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen">
        <h1 className="text-5xl font-bold text-[#8B0045] mb-4 text-center">
          Support My Work
        </h1>
        <p className="text-xl text-[#C2185B] mb-12 max-w-md text-center">
          Help me continue building amazing projects
        </p>
        <CherryBlossomPaymentQR username="yourname" />
      </div>
    </section>
  );
}

With Backdrop Image

tsx
export default function FancySupportPage() {
  return (
    <div
      className="min-h-screen flex items-center justify-center"
      style={{
        backgroundImage: 'url(/cherry-blossom-bg.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <CherryBlossomPaymentQR username="yourname" />
    </div>
  );
}

Multiple Components

tsx
export default function TeamSupportPage({ team }: { team: string[] }) {
  return (
    <div className="min-h-screen bg-[#FFF0F5] py-20">
      <h1 className="text-4xl font-bold text-[#8B0045] text-center mb-16">
        Support Our Team
      </h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto px-4">
        {team.map((member) => (
          <CherryBlossomPaymentQR key={member} username={member} />
        ))}
      </div>
    </div>
  );
}

Accessibility

The Cherry Blossom variant includes:

✅ ARIA labels for buttons and modals
✅ Keyboard navigation (Escape to close)
✅ Focus management with visible focus rings
✅ Screen reader support
✅ Sufficient color contrast (pink/white text on light backgrounds)

Performance

The cherry blossom effects are optimized:

🚀 Uses CSS for smooth transitions
🚀 Minimal repaints and reflows
🚀 Smooth 60fps animations on modern devices

Browser Support

✅ Chrome/Edge 76+
✅ Firefox 103+
✅ Safari 13+
✅ Mobile browsers (iOS Safari 13+, Chrome Mobile)

Design Inspiration

The Cherry Blossom variant is inspired by:

Japanese cherry blossom festivals
Soft, friendly UI design
Modern floral themes

Troubleshooting

Pink accent not visible

Ensure:

Background is not too dark
Use recommended pink color codes

Text not readable on background

The Cherry Blossom variant uses pink and white text. If your background is too light:

tsx
// Edit the text color in the component
className="text-[#8B0045]"  // from text-gray-700

Performance issues on mobile

If experiencing lag:

Reduce border thickness
Remove or reduce animations
Test on actual mobile device