Skip to content

Commit 0a0997b

Browse files
authored
Affiliate page improvements (#2564)
1 parent 3ef1903 commit 0a0997b

5 files changed

Lines changed: 22 additions & 41 deletions

File tree

_includes/pricing/calculator.sass

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -809,6 +809,9 @@ $bg-white: #fff
809809
display: flex
810810
align-items: center
811811
gap: 6px
812+
.strikethrough-text
813+
text-decoration: line-through
814+
color: #9E9E9E
812815
.tooltip
813816
position: relative
814817
&:hover

_includes/pricing/tbmq-payg-calculator.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ <h3>Calculation summary</h3>
394394
<div class="results-total">
395395
<span>Total</span>
396396
<span class="total-value">
397-
${formatCurrency(totalPrice)}/month
397+
${formatCurrency(totalPrice)} ${isInitialState ? `<span class="strikethrough-text">${formatCurrency(plan.basePrice)}</span>` : ''}/month
398398
<span class="tooltip">${infoIcon}<span class="tooltip-text">${tooltipText}</span></span>
399399
</span>
400400
</div>

images/affiliate/faq-arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

partners/affiliate.sass

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,8 @@ $affiliate-card-shadow: -4px 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px rgb
168168
align-items: center
169169
gap: 12px
170170
padding: 13.4px
171-
background: rgba(255, 255, 255, 0.9)
171+
background: rgba(255, 255, 255, 0.8)
172+
backdrop-filter: blur(4px)
172173
-webkit-backdrop-filter: blur(8px)
173174
border: 1px solid rgba(255, 255, 255, 0.32)
174175
border-radius: 16px
@@ -309,7 +310,7 @@ $affiliate-card-shadow: -4px 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px rgb
309310
color: $affiliate-text-secondary
310311
font-weight: 500
311312
.profit-display
312-
background: #F4F8FE
313+
background: $affiliate-bg
313314
border: 1px solid rgba(42, 125, 236, 0.24)
314315
border-radius: 16px
315316
padding: 40px
@@ -371,14 +372,11 @@ $affiliate-card-shadow: -4px 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px rgb
371372
.audience-card
372373
flex: 1
373374
background: white
374-
border: 1px solid rgba(42, 125, 236, 0.16)
375375
border-radius: 24px
376376
padding: 40px
377377
display: flex
378378
flex-direction: column
379-
transition: box-shadow 0.3s ease
380-
&:hover
381-
box-shadow: 0 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px 0 rgba(37, 51, 69, 0.08)
379+
box-shadow: $affiliate-card-shadow
382380
.audience-icon
383381
width: 56px
384382
height: 56px
@@ -510,7 +508,6 @@ $affiliate-card-shadow: -4px 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px rgb
510508
color: $affiliate-text-primary
511509
.faq-arrow
512510
flex-shrink: 0
513-
color: $affiliate-text-disabled
514511
transition: transform 0.3s ease
515512
&[aria-expanded="true"] .faq-arrow
516513
transform: rotate(180deg)
@@ -526,7 +523,7 @@ $affiliate-card-shadow: -4px 15px 50px -20px rgba(37, 51, 69, 0.15), 0 0 8px rgb
526523
color: $affiliate-text-secondary
527524
padding-bottom: 20px
528525
.faq-item.active .faq-answer
529-
max-height: 200px
526+
max-height: 500px
530527
opacity: 1
531528
transition: max-height 0.3s ease-in, opacity 0.3s ease-in
532529

partners/affiliate/index.html

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
---
66

77
<section id="hero">
8-
<div class="plus-pattern-bg"></div>
98
<div class="affiliate-main">
109
<div class="hero-content">
1110
<div class="hero-text">
@@ -72,7 +71,6 @@ <h1>Empower the IoT community and <span class="blue-text">monetize your expertis
7271
</section>
7372

7473
<section id="calculator">
75-
<div class="plus-pattern-bg"></div>
7674
<div class="affiliate-main">
7775
<div class="calculator-card">
7876
<div class="calculator-header">
@@ -199,9 +197,7 @@ <h2>Frequently asked questions</h2>
199197
<div class="faq-item">
200198
<button class="faq-question" aria-expanded="false">
201199
<span>Who can become a ThingsBoard affiliate?</span>
202-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
203-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
204-
</svg>
200+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
205201
</button>
206202
<div class="faq-answer">
207203
<p>We welcome anyone with a relevant audience or professional network in the IoT space. This includes tech bloggers, YouTubers, IoT consultants, system integrators, and hardware manufacturers. If you create content or provide solutions that help businesses connect and manage their devices, you are a perfect fit for our program.</p>
@@ -210,9 +206,7 @@ <h2>Frequently asked questions</h2>
210206
<div class="faq-item">
211207
<button class="faq-question" aria-expanded="false">
212208
<span>How is the commission calculated?</span>
213-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
214-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
215-
</svg>
209+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
216210
</button>
217211
<div class="faq-answer">
218212
<p>Commission is calculated as a percentage of the actual payment made by the customer. You receive:<br><b>30%</b> for Public Cloud and Self-managed subscriptions(recurring for 12 months);<br><b>15%</b> for Private Cloud subscriptions (recurring for 12 months);<br><b>10%</b> for Perpetual Licenses and Enterprise contracts (one-time). Earnings are credited to your FirstPromoter account immediately after the client's payment is confirmed.<br><br> <i>Example: For a client referred to the "Pilot" plan on the Public Cloud, you will receive a commission of $44.70 per month. This equates to a total annual commission of $536.40 from a single client.</i></p>
@@ -221,9 +215,7 @@ <h2>Frequently asked questions</h2>
221215
<div class="faq-item">
222216
<button class="faq-question" aria-expanded="false">
223217
<span>Can I earn rewards for referring free users?</span>
224-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
225-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
226-
</svg>
218+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
227219
</button>
228220
<div class="faq-answer">
229221
<p>Yes! We value community growth. You can earn a $100 bonus for every 100 verified users who sign up for our Public Cloud Free Subscription plan through your unique affiliate link. This allows you to monetize your reach even if your audience isn't ready for a paid plan yet.</p>
@@ -232,9 +224,7 @@ <h2>Frequently asked questions</h2>
232224
<div class="faq-item">
233225
<button class="faq-question" aria-expanded="false">
234226
<span>What is the payout schedule?</span>
235-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
236-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
237-
</svg>
227+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
238228
</button>
239229
<div class="faq-answer">
240230
<p>Commissions are paid monthly. We pay out all earned commissions once a month, regardless of the amount, ensuring you receive your rewards consistently.</p>
@@ -243,9 +233,7 @@ <h2>Frequently asked questions</h2>
243233
<div class="faq-item">
244234
<button class="faq-question" aria-expanded="false">
245235
<span>How does tracking and attribution work technically?</span>
246-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
247-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
248-
</svg>
236+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
249237
</button>
250238
<div class="faq-answer">
251239
<p>When a user clicks your link, your Promoter ID is automatically linked to their profile as soon as they sign up for our Cloud/License Portal or submit a "Contact Us" request. We use FirstPromoter to accurately track commissions and process payouts via PayPal or Wise. Most importantly, we protect your leads with a first-touch attribution model: the partner who originally introduced the user earns the commission, not the one whose link was clicked last before the purchase.</p>
@@ -254,9 +242,7 @@ <h2>Frequently asked questions</h2>
254242
<div class="faq-item">
255243
<button class="faq-question" aria-expanded="false">
256244
<span>What is the recommended roadmap for success?</span>
257-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
258-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
259-
</svg>
245+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
260246
</button>
261247
<div class="faq-answer">
262248
<p>1. Join: Sign up to get your unique affiliate link.<br>2. Learn: Download the 'Playbook' from our Partner Toolkit to master the value proposition.<br>3. Create: Publish a tutorial, case study, or comparison article featuring ThingsBoard.<br>4. Distribute: Share it with your audience on LinkedIn, YouTube, or your blog.<br>5. Earn: Track your clicks in FirstPromoter and receive monthly payouts.</p>
@@ -265,9 +251,7 @@ <h2>Frequently asked questions</h2>
265251
<div class="faq-item">
266252
<button class="faq-question" aria-expanded="false">
267253
<span>What are the key program concepts I should know?</span>
268-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
269-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
270-
</svg>
254+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
271255
</button>
272256
<div class="faq-answer">
273257
<p><b>First-Touch Attribution:</b> You get the credit if you are the first to refer a user, protecting your leads regardless of future clicks.<br>
@@ -278,9 +262,7 @@ <h2>Frequently asked questions</h2>
278262
<div class="faq-item">
279263
<button class="faq-question" aria-expanded="false">
280264
<span>What marketing methods are prohibited?</span>
281-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
282-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
283-
</svg>
265+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
284266
</button>
285267
<div class="faq-answer">
286268
<p>To protect our brand, we prohibit 'Brand Bidding' (running ads on keywords like 'ThingsBoard') and unsolicited spam. We highly encourage organic content, case studies, and direct consulting.</p>
@@ -289,9 +271,7 @@ <h2>Frequently asked questions</h2>
289271
<div class="faq-item">
290272
<button class="faq-question" aria-expanded="false">
291273
<span>What is the difference between the subscription plans?</span>
292-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
293-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
294-
</svg>
274+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
295275
</button>
296276
<div class="faq-answer">
297277
<p><a href="/products/paas/">Public Cloud</a> is a ready-to-use SaaS solution hosted by us. <a href="/products/thingsboard-pe/">Self-managed (Professional Edition)</a> allows customers to install the platform on their own servers or cloud for full control. <a href="/pricing/?product=thingsboard-private-cloud">Private Cloud</a> is a dedicated instance managed by our team for high-load enterprise projects. <a href="/pricing/?product=thingsboard-pe&solution=pe-perpetual">Perpetual Licenses</a> are a one-time purchase option for self-hosted deployments.</p>
@@ -300,9 +280,7 @@ <h2>Frequently asked questions</h2>
300280
<div class="faq-item">
301281
<button class="faq-question" aria-expanded="false">
302282
<span>I have more questions. Who should I contact?</span>
303-
<svg class="faq-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
304-
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
305-
</svg>
283+
<img src="/images/affiliate/faq-arrow.svg" class="faq-arrow" alt="" width="24" height="24">
306284
</button>
307285
<div class="faq-answer">
308286
<p>If you have specific questions or need assistance, please contact our partner team directly at <a href="mailto:affiliates@thingsboard.io">affiliates@thingsboard.io</a>. We are here to help you succeed!</p>

0 commit comments

Comments
 (0)