Opaline Nonprofit Comparison
A soft, holographic-inspired comparison block designed for nonprofit donation tier selection.
Features
- Three donation tiers — Supporter, Champion, and Visionary cards with escalating features
- Animated rainbow border — Recommended tier has a CSS gradient border animation cycling through pink→cyan→lavender
- Feature comparison table — Full tabular grid below cards with check/x indicators and alternating row colors
- Iridescent accents — Gradient text, gradient badges, and gradient CTA buttons
- Blurred glow effects — Large blurred gradient circles as background decorations
- Impact metrics bar — Quick stats showing lives changed, countries reached, program efficiency
- Light/dark mode — Soft white (#fefefe) light / deep slate (#0e1117) dark
Dependencies
lucide-vue-next — Check, X, Heart, Globe, Users, Sparkles icons@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separator
Customization
- Tiers: Update
tiers array with your organization's actual donation levels, pricing, and features
- Features: Modify the feature keys to match your nonprofit's benefit structure
- Colors: Adjust the pink→cyan→lavender gradient palette to match your brand
- Impact metrics: Replace
impactMetrics with your organization's real impact numbers
