Loyalty Rewards Program Page

Create a customer loyalty and rewards program page for an e-commerce brand called "Elevate Rewards" that lets members track points, unlock tiers, and redeem perks. The design should feel exclusive and motivating — like a premium club membership.

1. HEADER BANNER
- Full-width gradient banner (#7C3AED purple to #2563EB blue)
- Left side: "Welcome back, Sarah!" with member since date "Member since Jan 2024"
- Right side: Current points balance displayed large — "4,280 Points" with sparkle icon
- Below points: "You're 720 points away from Platinum!" with slim progress bar
- Mobile: stacked vertically, centered

2. TIER STATUS SECTION
- Horizontal tier progression bar showing 4 tiers:
  - Bronze (0–1,000 pts) — #CD7F32
  - Silver (1,001–3,000 pts) — #9CA3AF
  - Gold (3,001–6,000 pts) — #F59E0B
  - Platinum (6,001+ pts) — #7C3AED
- Current tier "Gold" highlighted with glow effect and checkmark
- Each tier shows its key perk underneath:
  - Bronze: "Earn 1pt per $1"
  - Silver: "5% birthday discount"
  - Gold: "Free shipping on all orders"
  - Platinum: "Early access + personal shopper"
- Active milestone marker on the bar at 4,280/6,000
- Card below: "Your Gold Benefits" — 4 icon cards showing active perks (free shipping, 2x point days, exclusive sales, priority support)

3. POINTS ACTIVITY LOG (table/list)
- Section title: "Points History"
- Filter tabs: All | Earned | Redeemed | Expired
- Table columns: Date, Description, Points (+/−), Balance
- Sample rows:
  - Mar 10, 2026 | "Purchase — Order #8834" | +240 | 4,280
  - Mar 5, 2026 | "Redeemed — $10 Store Credit" | −500 | 4,040
  - Feb 28, 2026 | "Bonus — Double Points Weekend" | +380 | 4,540
  - Feb 20, 2026 | "Purchase — Order #8791" | +160 | 4,160
  - Feb 14, 2026 | "Bonus — Valentine's Day Promo" | +200 | 4,000
- Earned points in green, redeemed/expired in red
- Pagination: "Showing 1–10 of 47 transactions"
- Mobile: card layout instead of table

4. REWARDS CATALOG (redemption grid)
- Section title: "Redeem Your Points"
- Filter bar: Category (All, Discounts, Products, Experiences) + Sort (Points: Low to High)
- 3-column card grid (2 on tablet, 1 on mobile):
  - "$5 Store Credit" — 250 pts — gift card icon — "Redeem" button
  - "$10 Store Credit" — 500 pts — gift card icon — "Redeem" button
  - "Free Express Shipping" — 300 pts — truck icon — "Redeem" button
  - "20% Off Next Order" — 800 pts — tag icon — "Redeem" button
  - "Exclusive Tote Bag" — 1,500 pts — bag icon — "Redeem" button (photo thumbnail)
  - "VIP Shopping Event Access" — 3,000 pts — star icon — "Redeem" button
- Cards: white background, 12px border-radius, soft shadow, hover lift
- Insufficient points: button grayed out with "Need X more pts"

5. EARN MORE POINTS (action cards)
- Section title: "Ways to Earn"
- 4 horizontal action cards:
  - "Shop & Earn" — "Earn 1 point for every $1 spent" — shopping bag icon — "Shop Now" link
  - "Refer a Friend" — "Give $10, get 500 points when they purchase" — users icon — "Share Link" button
  - "Write a Review" — "Earn 50 points per product review" — pencil icon — "Review Products" link
  - "Connect Social" — "Follow us on Instagram for 100 bonus points" — Instagram icon — "Connect" button
- Light purple background (#F5F3FF) for the section
- Cards: white, left icon, right CTA, border-left 4px accent color

6. REFERRAL TRACKER (mini section)
- Your unique referral link with copy button: "elevate.com/ref/sarah2024"
- Stats row: "12 friends invited" | "8 signed up" | "3,500 pts earned from referrals"
- Leaderboard teaser: "You're #14 on this month's referral leaderboard!"

7. UPCOMING PROMOTIONS
- Section title: "Don't Miss Out"
- 2 promo cards side by side:
  - "Triple Points Weekend" — Mar 22–24, 2026 — "Earn 3x points on all purchases" — countdown timer showing days/hours/minutes — purple gradient background
  - "Platinum Flash Sale" — Mar 28, 2026 — "Gold & Platinum members get 30% off sitewide" — gold accent border — "Set Reminder" button
- Mobile: stacked vertically

8. MEMBER DASHBOARD OVERVIEW
- Section title: "Your Rewards Snapshot"
- 4 quick-stat cards in a row (2x2 on mobile):
  - "Total Earned" — "12,450 pts" — trending-up icon — green accent — "+1,240 this month"
  - "Total Redeemed" — "8,170 pts" — gift icon — blue accent — "Last: $10 credit on Mar 5"
  - "Referral Bonus" — "3,500 pts" — users icon — purple accent — "8 successful referrals"
  - "Next Reward" — "220 pts away" — target icon — orange accent — "$5 Store Credit"
- Cards: white background, top colored border (4px), 12px border-radius, subtle shadow
- Each card shows a small sparkline chart of the past 6 months

9. GAMIFICATION & CHALLENGES
- Section title: "Challenges & Achievements"
- Subtitle: "Complete challenges to earn bonus points and unlock exclusive badges"
- Active Challenges (3 cards in a row, 1 on mobile):
  - "Weekend Warrior" — "Make 3 purchases this weekend" — 500 bonus pts — progress: 1/3 — shield icon — expires "Mar 16"
  - "Review Rockstar" — "Write 5 product reviews" — 300 bonus pts — progress: 3/5 — star icon — expires "Mar 31"
  - "Social Butterfly" — "Share 2 products on social media" — 200 bonus pts — progress: 0/2 — share icon — expires "Mar 25"
- Progress bars with animated fill, percentage label
- Badges Section below:
  - "Earned Badges" heading with count (6/15)
  - Grid of circular badge icons (earned ones full color, locked ones grayed with lock overlay):
    - "First Purchase" — shopping bag — earned
    - "Loyal Customer" — heart — earned (10+ purchases)
    - "Referral Pro" — megaphone — earned (5+ referrals)
    - "Review Maven" — pencil — earned (10+ reviews)
    - "Big Spender" — diamond — earned ($500+ lifetime)
    - "Early Bird" — sunrise — earned (purchased within 1hr of sale launch)
    - "Streak Master" — flame — locked (purchase 4 consecutive weeks)
    - "Social Star" — camera — locked (share 10 products)
    - "Birthday Club" — cake — locked (make birthday month purchase)
  - Hover on badge: tooltip showing name, description, and date earned

10. FAQ SECTION
- Section title: "Frequently Asked Questions"
- Accordion-style expandable questions (6 items):
  - "How do I earn points?" — "You earn 1 point for every $1 spent. Bonus points are available through referrals, reviews, social sharing, and seasonal promotions."
  - "Do my points expire?" — "Points expire 12 months after they are earned if there is no account activity. Any purchase or redemption resets the expiration clock."
  - "How do I move to the next tier?" — "Tiers are based on cumulative points earned within a calendar year. Once you reach the threshold, your tier upgrades automatically."
  - "Can I combine points with other discounts?" — "Yes! Points redemptions can be stacked with sale prices and promo codes. The only exception is the VIP Shopping Event discount."
  - "How does the referral program work?" — "Share your unique link. When a friend makes their first purchase, they get $10 off and you earn 500 bonus points. There's no limit on referrals."
  - "What happens if I return an item?" — "Points earned from the purchase will be deducted from your balance. If this brings your balance below zero, future earnings will offset the negative balance."
- Collapse/expand with smooth animation, chevron icon rotation
- Light background (#FAFAFA), cards with white background and 8px border-radius

11. FOOTER CTA
- Dark section (#1E1B4B)
- "Not a member yet?" — "Join Elevate Rewards for free and start earning points on every purchase"
- "Join Now — It's Free" CTA button (solid #7C3AED)
- Below: "Already have an account? Sign in to view your rewards"

Design: Premium, motivating loyalty experience. Primary: #7C3AED (purple), secondary: #2563EB (blue), accent: #F59E0B (gold for tier highlights). Background: white with alternating #F5F3FF (light purple) sections. Typography: Plus Jakarta Sans or DM Sans for headings, Inter for body. Cards with 12px border-radius and soft shadows. Progress bars with smooth gradient fills and animated transitions.

Responsive: Mobile-first. Tier bar becomes vertical stepper on mobile. Points table converts to card list. Rewards grid stacks to single column. Referral link has tap-to-copy. Sticky bottom bar on mobile with points balance and "Redeem" quick action.