shadcn.io is not affiliated with official shadcn/ui
Partner Programme Footer Block for Svelte
A footer for a partner programme: the pitch with an Apply Shine Button, three partner types as cells (Referral, Reseller, Technology) each saying what you get and the commission, then the wordmark and two link groups.
Installation
Overview
A partner-programme footer for Svelte with Ark UI. The first row holds the wordmark with one sentence, the pitch ("Partner with Wexmoor") with an Apply Shine Button, and, at the end, two link groups (Programme and Company) in a nav labelled Footer. Under it, three cells, one per partner type (Referral, Reseller, Technology), each with a heading, one line, and a small list that says what the partner gets and what the commission is. The cells are drawn with hairlines that run a little past their corners, set apart by a wide gap. A legal band closes the page. On a phone everything stacks. The terms are made up, and the block has no JavaScript of its own.
FAQ
How do I change the partner types and the terms?
Edit the TYPES array at the top of the file: each type has a name, a line, what the partner gets and the commission. Three cells fill the grid from lg; a fourth type needs lg:grid-cols-4. Percentages sit in a bdi so they read the right way round in right-to-left text.
Why do the cells have a wide gap?
Each cell draws its own lines, and they run a little past the corners. The gap between cells keeps those overshoots from touching their neighbours, and the grid is inset from the page rails for the same reason.
Where does the Apply button go?
It is a Shine Button rendered as a link, so point its href at your application page. It is the footer's only primary action; the cells are information, not links.
How do screen readers move through it?
The cells are a list; each has an h3 for the type and a description list pairing "You get" and "Commission" with their values. The link groups sit in a nav labelled Footer, each group a small h2 over a list.