Non-Profit Discount Component Demo

Showcasing all variants of the reusable NonProfitDiscount component for consistent placement across non-profit and education pages.

5 Variants Responsive Design Consistent Branding

1. Hero Variant (Large, Prominent)

Use this variant at the top of non-profit pages for maximum visibility and impact.

<NonProfitDiscount variant="hero" />
🎓 SPECIAL OFFER ⚡ LIFETIME DISCOUNT 🏛️ NON-PROFIT

50% OFF for Non-Profits & Education

Get premium QR code features at half price with our lifetime discount for verified non-profit organizations, schools, universities, museums, and cultural institutions.

Instant verification process - no waiting

50% discount applies to all plans forever

Includes all features: analytics, custom domains, white-label

2. Section Variant (Medium, Balanced)

Perfect for dedicated discount sections within page content.

<NonProfitDiscount variant="section" />
🎓 SPECIAL OFFER ⚡ LIFETIME DISCOUNT 🏛️ NON-PROFIT

50% OFF for Non-Profits & Education

Get premium QR code features at half price with our lifetime discount for verified non-profit organizations, schools, universities, museums, and cultural institutions.

Instant verification process - no waiting

50% discount applies to all plans forever

Includes all features: analytics, custom domains, white-label

3. Inline Variant (Compact, Subtle)

Ideal for smaller content areas or when you want to maintain page flow.

<NonProfitDiscount variant="inline" />
🎓 SPECIAL OFFER ⚡ LIFETIME DISCOUNT 🏛️ NON-PROFIT

50% OFF for Non-Profits & Education

Get premium QR code features at half price with our lifetime discount for verified non-profit organizations, schools, universities, museums, and cultural institutions.

Instant verification process - no waiting

50% discount applies to all plans forever

Includes all features: analytics, custom domains, white-label

4. Footer Variant (Full-width, Bottom)

Great for full-width banners at the bottom of pages.

<NonProfitDiscount variant="footer" />
🎓 SPECIAL OFFER ⚡ LIFETIME DISCOUNT 🏛️ NON-PROFIT

50% OFF for Non-Profits & Education

Get premium QR code features at half price with our lifetime discount for verified non-profit organizations, schools, universities, museums, and cultural institutions.

Instant verification process - no waiting

50% discount applies to all plans forever

Includes all features: analytics, custom domains, white-label

5. Banner Variant (Compact, Header)

Perfect for header placement - compact, horizontal design that doesn't interfere with page flow.

<NonProfitDiscount variant="banner" />
🎓 SPECIAL OFFER ⚡ 50% OFF

50% OFF for Non-Profits & Education

Implementation Guide

Basic Usage

import NonProfitDiscount from "../components/NonProfitDiscount.astro";

<NonProfitDiscount />

With Variant

<NonProfitDiscount variant="hero" />
<NonProfitDiscount variant="section" />
<NonProfitDiscount variant="inline" />
<NonProfitDiscount variant="footer" />
<NonProfitDiscount variant="banner" />

Key Features

  • 5 Variants: hero, section, inline, footer, banner for different placement needs
  • Responsive Design: Mobile-first approach with adaptive layouts
  • Direct Verification Link: Links to https://non-profit-verification.qrtrac.com/
  • Consistent Branding: Purple gradient with yellow accents matching QRTRAC design
  • Accessibility: Proper ARIA labels and keyboard navigation
  • Performance: Lightweight with minimal dependencies

Recommended Placement

Non-Profit Pages

  • Hero: Main non-profit page (/qr-code-generator-for-non-profits/)
  • Section: Industry-specific pages (museums, churches, etc.)
  • Inline: Content-heavy pages with multiple sections
  • Footer: All non-profit pages for consistent bottom messaging

Education Pages

  • Hero: University and education main pages
  • Section: Museum and library specific pages
  • Inline: Feature comparison sections
  • Footer: All education-focused pages