deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: supplier page value-first restructure + CRO elements

Browse Source 
- Reorder sections: why → guarantee → lead preview → social proof → pricing
- Change hero/final CTA links to signup URL (not #pricing)
- Add lead-back guarantee section (shield, green accent)
- Add static ROI line (dark callout, grounded in research)
- Add credits-only callout below pricing grid
- Basic tier shows "Free" / "Free forever" instead of €0
- Card color boost shows €59/mo (was €19)
- Comparison table shows €1,799/yr with "(yearly plan)" annotation
- Remove credit mechanics explainer from How It Works (simpler)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-26 15:11:52 +01:00
parent 82567b53ff
commit 548ea7c491
2 changed files with 163 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
web/src/padelnomics/public/templates/suppliers.html
View File

@@ -44,38 +44,35 @@
margin-top: 1.5rem; font-weight: 500; margin-top: 1.5rem; font-weight: 500;
} }
/* How it works */ /* Why section */
.sup-steps { .sup-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; .sup-why-card {
max-width: 800px; margin: 0 auto; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem;
text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.sup-step { text-align: center; } .sup-why-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.sup-step__num { .sup-why-card p { font-size: 0.8125rem; color: #64748B; }
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%;
background: #EFF6FF; color: #1D4ED8; font-weight: 700; font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.sup-step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.sup-step p { font-size: 0.8125rem; color: #64748B; }
/* Credit explainer */ /* Lead-back guarantee */
.credit-explainer { .sup-guarantee {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
padding: 1.5rem; max-width: 600px; margin: 2rem auto 0; border: 2px solid #16A34A; border-radius: 20px; padding: 2rem;
max-width: 680px; margin: 0 auto; text-align: center;
} }
.credit-explainer h3 { font-size: 1rem; margin-bottom: 1rem; text-align: center; } .sup-guarantee__icon {
.credit-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } font-size: 2.5rem; margin-bottom: 0.5rem; display: block; line-height: 1;
.credit-tier { }
text-align: center; padding: 0.75rem; background: white; .sup-guarantee h2 {
border: 1px solid #E2E8F0; border-radius: 10px; font-size: 1.375rem; color: #14532D; margin-bottom: 0.5rem; text-align: center;
}
.sup-guarantee p {
color: #166534; font-size: 0.9375rem; line-height: 1.65; max-width: 520px; margin: 0 auto;
}
.sup-guarantee__badge {
display: inline-block; background: #16A34A; color: white; font-size: 0.6875rem;
font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-top: 1rem;
text-transform: uppercase; letter-spacing: 0.04em;
} }
.credit-tier .tier-heat { font-weight: 700; font-size: 0.875rem; margin-bottom: 4px; }
.credit-tier .tier-cost { font-size: 1.25rem; font-weight: 800; color: #1D4ED8; }
.credit-tier .tier-label { font-size: 0.6875rem; color: #64748B; }
.heat-hot { color: #DC2626; }
.heat-warm { color: #D97706; }
.heat-cool { color: #3B82F6; }
/* Lead preview */ /* Lead preview */
.sup-lead-preview { .sup-lead-preview {
@@ -100,14 +97,39 @@
.lead-preview-card dd { color: #1E293B; font-weight: 500; margin: 0; } .lead-preview-card dd { color: #1E293B; font-weight: 500; margin: 0; }
.lead-preview-card .lp-blur { color: transparent; text-shadow: 0 0 8px rgba(30,41,59,0.5); user-select: none; } .lead-preview-card .lp-blur { color: transparent; text-shadow: 0 0 8px rgba(30,41,59,0.5); user-select: none; }
/* Why section */ /* How it works */
.sup-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .sup-steps {
.sup-why-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem; max-width: 800px; margin: 0 auto;
text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
} }
.sup-why-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; } .sup-step { text-align: center; }
.sup-why-card p { font-size: 0.8125rem; color: #64748B; } .sup-step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%;
background: #EFF6FF; color: #1D4ED8; font-weight: 700; font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.sup-step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.sup-step p { font-size: 0.8125rem; color: #64748B; }
/* Social proof */
.sup-proof-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
max-width: 720px; margin: 0 auto;
}
.sup-proof-card {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px;
padding: 1.75rem; text-align: left; position: relative;
}
.sup-proof-card::before {
content: "\201C"; font-size: 4rem; color: #DBEAFE; line-height: 1;
position: absolute; top: 1rem; left: 1.25rem; font-family: Georgia, serif;
}
.sup-proof-card blockquote {
font-size: 0.9375rem; color: #334155; font-style: italic;
line-height: 1.6; margin: 1.5rem 0 0.75rem; padding: 0;
}
.sup-proof-card cite { font-size: 0.8125rem; color: #94A3B8; font-style: normal; }
/* Billing toggle — CSS-only via radio sibling trick */ /* Billing toggle — CSS-only via radio sibling trick */
input[name="billing"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } input[name="billing"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
@@ -167,6 +189,23 @@
} }
.pricing-card li::before { content: "\2713"; color: #16A34A; font-weight: 700; flex-shrink: 0; } .pricing-card li::before { content: "\2713"; color: #16A34A; font-weight: 700; flex-shrink: 0; }
.pricing-card .btn, .pricing-card .btn-outline { width: 100%; text-align: center; margin-top: auto; } .pricing-card .btn, .pricing-card .btn-outline { width: 100%; text-align: center; margin-top: auto; }
.pricing-card__eur-note { font-size: 0.6875rem; color: #94A3B8; text-align: center; margin-top: 0.5rem; }
/* ROI callout */
.sup-roi {
background: #0F172A; border-radius: 14px; padding: 1.25rem 2rem;
text-align: center; max-width: 720px; margin: 1.75rem auto 0;
}
.sup-roi p { color: #E2E8F0; font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.5; }
.sup-roi strong { color: #34D399; }
/* Credits-only callout */
.sup-credits-only {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
padding: 1.25rem 1.5rem; text-align: center; max-width: 640px; margin: 1.5rem auto 0;
}
.sup-credits-only p { font-size: 0.875rem; color: #475569; margin: 0; }
.sup-credits-only a { color: #1D4ED8; font-weight: 600; }
/* Boosts */ /* Boosts */
.boost-grid { .boost-grid {
@@ -198,25 +237,6 @@
margin: 0.75rem auto 0; max-width: 560px; margin: 0.75rem auto 0; max-width: 560px;
} }
/* Social proof */
.sup-proof-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
max-width: 720px; margin: 0 auto;
}
.sup-proof-card {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px;
padding: 1.75rem; text-align: left; position: relative;
}
.sup-proof-card::before {
content: "\201C"; font-size: 4rem; color: #DBEAFE; line-height: 1;
position: absolute; top: 1rem; left: 1.25rem; font-family: Georgia, serif;
}
.sup-proof-card blockquote {
font-size: 0.9375rem; color: #334155; font-style: italic;
line-height: 1.6; margin: 1.5rem 0 0.75rem; padding: 0;
}
.sup-proof-card cite { font-size: 0.8125rem; color: #94A3B8; font-style: normal; }
/* FAQ */ /* FAQ */
.sup-faq { max-width: 640px; margin: 0 auto; } .sup-faq { max-width: 640px; margin: 0 auto; }
.sup-faq details { border-bottom: 1px solid #E2E8F0; padding: 1rem 0; } .sup-faq details { border-bottom: 1px solid #E2E8F0; padding: 1rem 0; }
@@ -240,7 +260,6 @@
.sup-stats { grid-template-columns: repeat(2, 1fr); } .sup-stats { grid-template-columns: repeat(2, 1fr); }
.sup-steps, .sup-why, .sup-problem-grid, .sup-proof-grid { grid-template-columns: 1fr; } .sup-steps, .sup-why, .sup-problem-grid, .sup-proof-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; }
.credit-tiers { grid-template-columns: 1fr; }
.lead-preview-grid { grid-template-columns: 1fr; } .lead-preview-grid { grid-template-columns: 1fr; }
.sup-hero h1 { font-size: 1.75rem; } .sup-hero h1 { font-size: 1.75rem; }
} }
@@ -254,7 +273,7 @@
<div class="sup-hero"> <div class="sup-hero">
<h1>{{ t.sup_hero_h1a }}<br>{{ t.sup_hero_h1b }}</h1> <h1>{{ t.sup_hero_h1a }}<br>{{ t.sup_hero_h1b }}</h1>
<p>{{ t.sup_hero_sub }}</p> <p>{{ t.sup_hero_sub }}</p>
<a href="#pricing" class="btn">{{ t.sup_hero_cta }}</a> <a href="{{ url_for('suppliers.signup') }}" class="btn">{{ t.sup_hero_cta }}</a>
<p class="sup-hero__proof">{{ t.sup_hero_trust_pre }} {{ total_countries }} {{ t.sup_hero_trust_post }}</p> <p class="sup-hero__proof">{{ t.sup_hero_trust_pre }} {{ total_countries }} {{ t.sup_hero_trust_post }}</p>
</div> </div>
@@ -304,54 +323,40 @@
</div> </div>
</section> </section>
<!-- How it works --> <!-- Why Padelnomics — moved above lead preview -->
<section class="sup-section"> <section class="sup-section">
<h2>{{ t.sup_how_h2 }}</h2> <h2>{{ t.sup_why_h2 }}</h2>
<p class="sub">{{ t.sup_how_sub }}</p> <p class="sub">{{ t.sup_why_sub }}</p>
<div class="sup-steps"> <div class="sup-why">
<div class="sup-step"> <div class="sup-why-card">
<div class="sup-step__num">1</div> <h3>{{ t.sup_why_card1_h3 }}</h3>
<h3>{{ t.sup_how_step1_h3 }}</h3> <p>{{ t.sup_why_card1_p }}</p>
<p>{{ t.sup_how_step1_p }}</p>
</div> </div>
<div class="sup-step"> <div class="sup-why-card">
<div class="sup-step__num">2</div> <h3>{{ t.sup_why_card2_h3 }}</h3>
<h3>{{ t.sup_how_step2_h3 }}</h3> <p>{{ t.sup_why_card2_p }}</p>
<p>{{ t.sup_how_step2_p }}</p>
</div> </div>
<div class="sup-step"> <div class="sup-why-card">
<div class="sup-step__num">3</div> <h3>{{ t.sup_why_card3_h3 }}</h3>
<h3>{{ t.sup_how_step3_h3 }}</h3> <p>{{ t.sup_why_card3_p }}</p>
<p>{{ t.sup_how_step3_p }}</p>
</div> </div>
</div> </div>
</section>
<!-- Credit explainer --> <!-- Lead-Back Guarantee -->
<div class="credit-explainer"> <section class="sup-section">
<h3>{{ t.sup_credits_h3 }}</h3> <div class="sup-guarantee">
<p style="text-align:center;font-size:0.8125rem;color:#64748B;margin-bottom:1rem"> <span class="sup-guarantee__icon">&#x1F6E1;&#xFE0F;</span>
{{ t.sup_credits_sub }} <h2>{{ t.sup_guarantee_h2 }}</h2>
</p> <p>{{ t.sup_guarantee_p }}</p>
<div class="credit-tiers"> <span class="sup-guarantee__badge">{{ t.sup_guarantee_badge }}</span>
<div class="credit-tier">
<div class="tier-heat heat-hot">{{ t.sup_credits_hot }}</div>
<div class="tier-cost">35</div>
<div class="tier-label">{{ t.sup_credits_hot_label }}</div>
</div>
<div class="credit-tier">
<div class="tier-heat heat-warm">{{ t.sup_credits_warm }}</div>
<div class="tier-cost">20</div>
<div class="tier-label">{{ t.sup_credits_warm_label }}</div>
</div>
<div class="credit-tier">
<div class="tier-heat heat-cool">{{ t.sup_credits_cool }}</div>
<div class="tier-cost">8</div>
<div class="tier-label">{{ t.sup_credits_cool_label }}</div>
</div>
</div>
</div> </div>
</section>
<!-- Live lead preview --> <!-- Live lead preview -->
<section class="sup-section">
<h2>{{ t.sup_leads_section_h2 }}</h2>
<p class="sub">{{ t.sup_leads_section_sub }}</p>
<div class="sup-lead-preview"> <div class="sup-lead-preview">
<h4>{{ t.sup_leads_heading }}</h4> <h4>{{ t.sup_leads_heading }}</h4>
{% if preview_leads %} {% if preview_leads %}
@@ -376,7 +381,7 @@
</div> </div>
<p style="text-align:center;margin-top:1rem;font-size:0.8125rem;color:#64748B"> <p style="text-align:center;margin-top:1rem;font-size:0.8125rem;color:#64748B">
{{ t.sup_leads_unlock_pre }} {{ t.sup_leads_unlock_pre }}
<a href="#pricing" style="color:#1D4ED8;font-weight:600">{{ t.sup_leads_unlock_cta }}</a> <a href="{{ url_for('suppliers.signup') }}" style="color:#1D4ED8;font-weight:600">{{ t.sup_leads_unlock_cta }}</a>
</p> </p>
{% else %} {% else %}
<div class="lead-preview-grid"> <div class="lead-preview-grid">
@@ -418,22 +423,41 @@
</div> </div>
</section> </section>
<!-- Why Padelnomics --> <!-- How it works -->
<section class="sup-section"> <section class="sup-section">
<h2>{{ t.sup_why_h2 }}</h2> <h2>{{ t.sup_how_h2 }}</h2>
<p class="sub">{{ t.sup_why_sub }}</p> <p class="sub">{{ t.sup_how_sub }}</p>
<div class="sup-why"> <div class="sup-steps">
<div class="sup-why-card"> <div class="sup-step">
<h3>{{ t.sup_why_card1_h3 }}</h3> <div class="sup-step__num">1</div>
<p>{{ t.sup_why_card1_p }}</p> <h3>{{ t.sup_how_step1_h3 }}</h3>
<p>{{ t.sup_how_step1_p }}</p>
</div> </div>
<div class="sup-why-card"> <div class="sup-step">
<h3>{{ t.sup_why_card2_h3 }}</h3> <div class="sup-step__num">2</div>
<p>{{ t.sup_why_card2_p }}</p> <h3>{{ t.sup_how_step2_h3 }}</h3>
<p>{{ t.sup_how_step2_p }}</p>
</div> </div>
<div class="sup-why-card"> <div class="sup-step">
<h3>{{ t.sup_why_card3_h3 }}</h3> <div class="sup-step__num">3</div>
<p>{{ t.sup_why_card3_p }}</p> <h3>{{ t.sup_how_step3_h3 }}</h3>
<p>{{ t.sup_how_step3_p }}</p>
</div>
</div>
</section>
<!-- Social proof — moved before pricing -->
<section class="sup-section">
<h2>{{ t.sup_proof_h2 }}</h2>
<p class="sub">{{ calc_requests }}+ {{ t.sup_proof_stat1 }} &middot; {{ total_suppliers }}+ {{ t.sup_proof_stat2 }} &middot; {{ total_countries }} {{ t.sup_proof_stat3 }}</p>
<div class="sup-proof-grid">
<div class="sup-proof-card">
<blockquote>&ldquo;{{ t.sup_proof_q1 }}&rdquo;</blockquote>
<cite>{{ t.sup_proof_cite1 }}</cite>
</div>
<div class="sup-proof-card">
<blockquote>&ldquo;{{ t.sup_proof_q2 }}&rdquo;</blockquote>
<cite>{{ t.sup_proof_cite2 }}</cite>
</div> </div>
</div> </div>
</section> </section>
@@ -453,15 +477,14 @@
</div> </div>
<div class="pricing-grid"> <div class="pricing-grid">
<!-- Basic --> <!-- Basic — Free -->
<div class="pricing-card"> <div class="pricing-card">
<h3>{{ t.sup_basic_name }}</h3> <h3>{{ t.sup_basic_name }}</h3>
<div class="price-monthly"> <div class="price-monthly">
<div class="price">&euro;39 <span>/mo</span></div> <div class="price">{{ t.sup_basic_free_label }}</div>
</div> </div>
<div class="price-yearly"> <div class="price-yearly">
<div class="price">&euro;29 <span>/mo</span></div> <div class="price">{{ t.sup_basic_free_label }}</div>
<span class="yearly-note">{{ t.sup_yearly_note_basic }}</span>
</div> </div>
<div class="credits-inc credits-inc--muted">{{ t.sup_basic_dir }}</div> <div class="credits-inc credits-inc--muted">{{ t.sup_basic_dir }}</div>
<ul> <ul>
@@ -473,6 +496,7 @@
<li>{{ t.sup_basic_f6 }}</li> <li>{{ t.sup_basic_f6 }}</li>
</ul> </ul>
<a href="{{ url_for('suppliers.signup') }}?plan=supplier_basic" class="btn-outline" style="display:block;text-align:center">{{ t.sup_basic_cta }}</a> <a href="{{ url_for('suppliers.signup') }}?plan=supplier_basic" class="btn-outline" style="display:block;text-align:center">{{ t.sup_basic_cta }}</a>
<p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
</div> </div>
<!-- Growth --> <!-- Growth -->
@@ -496,6 +520,7 @@
<li>{{ t.sup_growth_f6 }}</li> <li>{{ t.sup_growth_f6 }}</li>
</ul> </ul>
<a href="{{ url_for('suppliers.signup') }}?plan=supplier_growth" class="btn" style="display:block;text-align:center">{{ t.sup_growth_cta }}</a> <a href="{{ url_for('suppliers.signup') }}?plan=supplier_growth" class="btn" style="display:block;text-align:center">{{ t.sup_growth_cta }}</a>
<p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
</div> </div>
<!-- Pro --> <!-- Pro -->
@@ -518,9 +543,20 @@
<li>{{ t.sup_pro_f6 }}</li> <li>{{ t.sup_pro_f6 }}</li>
</ul> </ul>
<a href="{{ url_for('suppliers.signup') }}?plan=supplier_pro" class="btn-outline" style="display:block;text-align:center">{{ t.sup_pro_cta }}</a> <a href="{{ url_for('suppliers.signup') }}?plan=supplier_pro" class="btn-outline" style="display:block;text-align:center">{{ t.sup_pro_cta }}</a>
<p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
</div> </div>
</div> </div>
<!-- Static ROI line -->
<div class="sup-roi">
<p>{{ t.sup_roi_line }}</p>
</div>
<!-- Credits-only callout -->
<div class="sup-credits-only">
<p>{{ t.sup_credits_only_pre }} <a href="{{ url_for('suppliers.signup') }}?plan=supplier_basic#credits">{{ t.sup_credits_only_cta }}</a> {{ t.sup_credits_only_post }}</p>
</div>
<!-- Boost add-ons --> <!-- Boost add-ons -->
<h3 style="text-align:center;font-size:1rem;margin-top:2rem;margin-bottom:0.25rem">{{ t.sup_boosts_h3 }}</h3> <h3 style="text-align:center;font-size:1rem;margin-top:2rem;margin-bottom:0.25rem">{{ t.sup_boosts_h3 }}</h3>
<p style="text-align:center;color:#64748B;font-size:0.8125rem;margin-bottom:1rem">{{ t.sup_boosts_sub }}</p> <p style="text-align:center;color:#64748B;font-size:0.8125rem;margin-bottom:1rem">{{ t.sup_boosts_sub }}</p>
@@ -543,7 +579,7 @@
</div> </div>
<div class="boost-card"> <div class="boost-card">
<strong>{{ t.sup_boost_color }}</strong> <strong>{{ t.sup_boost_color }}</strong>
<span class="boost-price">&euro;19/mo</span> <span class="boost-price">&euro;59/mo</span>
</div> </div>
</div> </div>
</section> </section>
@@ -566,7 +602,7 @@
<tbody> <tbody>
<tr> <tr>
<td>{{ t.sup_cmp_row1 }}</td> <td>{{ t.sup_cmp_row1 }}</td>
<td class="col-us">&euro;1,799/yr</td> <td class="col-us">&euro;1,799/yr <small style="font-weight:400;font-size:0.6875rem">(yearly plan)</small></td>
<td>&euro;10,000+/event</td> <td>&euro;10,000+/event</td>
<td>&euro;5,000+/yr*</td> <td>&euro;5,000+/yr*</td>
<td>&euro;600/yr</td> <td>&euro;600/yr</td>
@@ -612,22 +648,6 @@
<p class="comparison-footnote">{{ t.sup_cmp_footnote }}</p> <p class="comparison-footnote">{{ t.sup_cmp_footnote }}</p>
</section> </section>
<!-- Social proof -->
<section class="sup-section">
<h2>{{ t.sup_proof_h2 }}</h2>
<p class="sub">{{ calc_requests }}+ {{ t.sup_proof_stat1 }} &middot; {{ total_suppliers }}+ {{ t.sup_proof_stat2 }} &middot; {{ total_countries }} {{ t.sup_proof_stat3 }}</p>
<div class="sup-proof-grid">
<div class="sup-proof-card">
<blockquote>&ldquo;{{ t.sup_proof_q1 }}&rdquo;</blockquote>
<cite>{{ t.sup_proof_cite1 }}</cite>
</div>
<div class="sup-proof-card">
<blockquote>&ldquo;{{ t.sup_proof_q2 }}&rdquo;</blockquote>
<cite>{{ t.sup_proof_cite2 }}</cite>
</div>
</div>
</section>
<!-- FAQ --> <!-- FAQ -->
<section class="sup-section"> <section class="sup-section">
<h2>{{ t.sup_faq_h2 }}</h2> <h2>{{ t.sup_faq_h2 }}</h2>
@@ -679,7 +699,7 @@
<section class="sup-cta"> <section class="sup-cta">
<h2>{{ t.sup_cta_h2 }}</h2> <h2>{{ t.sup_cta_h2 }}</h2>
<p>{{ t.sup_cta_p }}</p> <p>{{ t.sup_cta_p }}</p>
<a href="#pricing" class="btn">{{ t.sup_hero_cta }}</a> <a href="{{ url_for('suppliers.signup') }}" class="btn">{{ t.sup_cta_btn }}</a>
</section> </section>
</main> </main>

10
web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html
View File

@@ -64,12 +64,22 @@
{% if key == 'supplier_growth' %}<div class="s-plan-card__popular">{{ t.sup_step1_popular }}</div>{% endif %} {% if key == 'supplier_growth' %}<div class="s-plan-card__popular">{{ t.sup_step1_popular }}</div>{% endif %}
<h3>{{ plan.name }}</h3> <h3>{{ plan.name }}</h3>
<div class="price-yearly"> <div class="price-yearly">
{% if plan.yearly_price == 0 %}
<div class="price">{{ t.sup_basic_free_label }}</div>
<div style="font-size:0.6875rem;color:#16A34A;margin-top:2px">{{ t.sup_step1_free_forever }}</div>
{% else %}
<div class="price">&euro;{{ plan.yearly_monthly_equivalent }} <span>/mo</span></div> <div class="price">&euro;{{ plan.yearly_monthly_equivalent }} <span>/mo</span></div>
<div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_yearly | tformat(price=plan.yearly_price) }}</div> <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_yearly | tformat(price=plan.yearly_price) }}</div>
{% endif %}
</div> </div>
<div class="price-monthly"> <div class="price-monthly">
{% if plan.monthly_price == 0 %}
<div class="price">{{ t.sup_basic_free_label }}</div>
<div style="font-size:0.6875rem;color:#16A34A;margin-top:2px">{{ t.sup_step1_free_forever }}</div>
{% else %}
<div class="price">&euro;{{ plan.monthly_price }} <span>/mo</span></div> <div class="price">&euro;{{ plan.monthly_price }} <span>/mo</span></div>
<div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_monthly }}</div> <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_monthly }}</div>
{% endif %}
</div> </div>
<ul> <ul>
{% for key in plan.feature_keys %} {% for key in plan.feature_keys %}