Ocean Frutiger Variant

Glossy Ocean Wave Modal

The Ocean Frutiger variant features a glossy, animated ocean wave design inspired by Frutiger aesthetics. It includes a modern modal, animated shine effects, and a blue-themed call-to-action button. Perfect for creative portfolios and visually rich use cases.

Live Preview

Installation

Generate the Ocean Frutiger component:

bash
npx devfund@latest ocean-frutiger

This creates components/devfund/OceanFrutigerPaymentQR.tsx

Basic Usage

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

export default function SupportPage() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <OceanFrutigerPaymentQR username="yourname" />
    </div>
  );
}

Props

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

States

Default State

Shows a glossy blue button with text "💙 Support {DisplayName}":

[💙 Support Zaid Rakhange]

Loading State

While fetching user data:

[⏳ Loading...]

Success State

Modal opens showing:

User display name
"Scan to pay" subtitle
QR code in ocean-themed background
UPI ID below QR code
Copy and pay buttons
"Scan with any UPI app" instruction

Error State

If something goes wrong:

[⚠️ Error loading user]

Customization

Change Button Color

Edit the OceanFrutigerPaymentQR.tsx file and modify the button className:

tsx
// Change from blue to purple
className="frutiger-ocean-button bg-linear-to-b from-purple-600 to-blue-400 ..."

Change Button Text

Modify the button text in the return statement:

tsx
<button ...>
  💙 Contribute to {userData.displayName}
</button>

Change Modal Width

Edit the modal div className:

tsx
// Change from max-w-sm to max-w-lg or max-w-xl
className="ocean-modal rounded-3xl p-6 max-w-lg w-full relative"

Change QR Code Size

Modify the QR code container:

tsx
<div className="ocean-qr-container rounded-2xl p-4 mb-4">
  <img
    src={userData.qrCodeUrl}
    alt={`QR code for ${userData.displayName}`}
    className="w-96 h-96"  // Changed from w-full h-auto
  />
</div>

Advanced Usage

With Custom Styling

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

export default function BlogPost() {
  return (
    <section className="bg-linear-to-b from-white to-blue-50 py-16">
      <div className="max-w-2xl mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-4">
          Support This Project
        </h2>
        <p className="text-center text-gray-600 mb-12">
          Your support helps me continue building and maintaining open-source tools.
        </p>
        <div className="flex justify-center">
          <OceanFrutigerPaymentQR username="yourname" />
        </div>
      </div>
    </section>
  );
}

Conditional Rendering

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

export default function ProfilePage({ showSupport }: { showSupport: boolean }) {
  return (
    <div>
      <h1>My Profile</h1>
      {showSupport && (
        <div className="mt-12 pt-12 border-t">
          <OceanFrutigerPaymentQR username="yourname" />
        </div>
      )}
    </div>
  );
}

Accessibility

The Ocean Frutiger variant includes:

✅ ARIA labels for buttons and modals
✅ Keyboard navigation (Escape to close modal)
✅ Focus management
✅ Screen reader support
✅ Semantic HTML

TypeScript

Full TypeScript support with exported types:

typescript
import OceanFrutigerPaymentQR from '@/components/devfund/OceanFrutigerPaymentQR';

interface OceanFrutigerPaymentQRProps {
  username: string;
}

interface UserData {
  displayName: string;
  upiId: string;
  qrCodeUrl: string;
}

Browser Support

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ Mobile browsers (iOS Safari, Chrome Mobile)

Common Issues

Modal not closing

Ensure the close button click handler is not being prevented:

tsx
onClick={() => setIsOpen(false)}

QR code not displaying

Check that:

User profile exists in Devfund database
QR code was generated for the profile
The image URL is valid

Styles looking different

Make sure Tailwind CSS is properly configured and imported in your globals.css.