shadcn.io is not affiliated with official shadcn/ui
Rewards Ladder Footer Block for Vue
A footer for a meal-kit service with a referral rewards ladder: three rungs (invite 1, 3 and 5) each with its reward, a meter toward the next one and the visitor's code with a Copy button.
Installation
Overview
A footer for Vue with Ark UI that turns word of mouth into a ladder. Behind a split divider, the start half holds the wordmark, one sentence and two link groups in a nav labelled Footer. The end half is the ladder: a title, a meter and "2 of 3 invited" toward the next reward, three rungs drawn with the catalog's Steps (invite 1, 3 and 5, each with its reward; the rung reached shows a check, the others their number) and the visitor's code in a small read-only field with a Copy button. The Copy button really writes the code to the clipboard and tells screen readers it did. The number of invites is example data held in one constant. A legal band closes the page. On a phone the halves stack.
FAQ
How do I change the rungs and the invite count?
Edit RUNGS (how many friends each rung needs, and its reward), INVITED (the friends invited so far) and CODE at the top of the file. The meter, the "2 of 3 invited" line, which rung is the next and the steps' state are all worked out from those. Fetch INVITED and CODE from your account when the footer renders.
What does the Copy button do?
It writes the code to the clipboard, swaps its icon for a check for three seconds and says "Referral code copied" through a polite status. If the browser refuses (a page not served over HTTPS), the icon becomes a cross and the status says it could not copy. The code field is read-only and selects itself when focused, so it can also be copied by hand.
How does the ladder read to a screen reader?
It is a list named Rewards ladder. Each rung reads its title ("Invite 3 friends") and its reward, preceded by where it stands: Reached, Next reward or Locked. The meter is named through the progress bar's translations.
Where do I share an invite link?
This footer is about the ladder and the code. A link to share is a different job; use one of the invite blocks for it, and keep this one's code as the thing a friend types at checkout.