From 548ea7c49189371271231fe6c46aae9ba8790fe9 Mon Sep 17 00:00:00 2001 From: Deeman Date: Thu, 26 Feb 2026 15:11:52 +0100 Subject: [PATCH] feat: supplier page value-first restructure + CRO elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../public/templates/suppliers.html | 286 ++++++++++-------- .../suppliers/partials/signup_step_1.html | 10 + 2 files changed, 163 insertions(+), 133 deletions(-) diff --git a/web/src/padelnomics/public/templates/suppliers.html b/web/src/padelnomics/public/templates/suppliers.html index 27ebacd..0bd5acc 100644 --- a/web/src/padelnomics/public/templates/suppliers.html +++ b/web/src/padelnomics/public/templates/suppliers.html @@ -44,38 +44,35 @@ margin-top: 1.5rem; font-weight: 500; } - /* How it works */ - .sup-steps { - display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; - max-width: 800px; margin: 0 auto; + /* Why section */ + .sup-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } + .sup-why-card { + 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-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; } + .sup-why-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; } + .sup-why-card p { font-size: 0.8125rem; color: #64748B; } - /* Credit explainer */ - .credit-explainer { - background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; - padding: 1.5rem; max-width: 600px; margin: 2rem auto 0; + /* Lead-back guarantee */ + .sup-guarantee { + background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%); + 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; } - .credit-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } - .credit-tier { - text-align: center; padding: 0.75rem; background: white; - border: 1px solid #E2E8F0; border-radius: 10px; + .sup-guarantee__icon { + font-size: 2.5rem; margin-bottom: 0.5rem; display: block; line-height: 1; + } + .sup-guarantee h2 { + 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 */ .sup-lead-preview { @@ -100,14 +97,39 @@ .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; } - /* Why section */ - .sup-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } - .sup-why-card { - border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem; - text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); + /* How it works */ + .sup-steps { + display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; + max-width: 800px; margin: 0 auto; } - .sup-why-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; } - .sup-why-card p { font-size: 0.8125rem; color: #64748B; } + .sup-step { text-align: center; } + .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 */ 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 .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 */ .boost-grid { @@ -198,25 +237,6 @@ 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 */ .sup-faq { max-width: 640px; margin: 0 auto; } .sup-faq details { border-bottom: 1px solid #E2E8F0; padding: 1rem 0; } @@ -240,7 +260,6 @@ .sup-stats { grid-template-columns: repeat(2, 1fr); } .sup-steps, .sup-why, .sup-problem-grid, .sup-proof-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } - .credit-tiers { grid-template-columns: 1fr; } .lead-preview-grid { grid-template-columns: 1fr; } .sup-hero h1 { font-size: 1.75rem; } } @@ -254,7 +273,7 @@

{{ t.sup_hero_h1a }}
{{ t.sup_hero_h1b }}

{{ t.sup_hero_sub }}

- {{ t.sup_hero_cta }} + {{ t.sup_hero_cta }}

{{ t.sup_hero_trust_pre }} {{ total_countries }} {{ t.sup_hero_trust_post }}

@@ -304,54 +323,40 @@ - +
-

{{ t.sup_how_h2 }}

-

{{ t.sup_how_sub }}

-
-
-
1
-

{{ t.sup_how_step1_h3 }}

-

{{ t.sup_how_step1_p }}

+

{{ t.sup_why_h2 }}

+

{{ t.sup_why_sub }}

+
+
+

{{ t.sup_why_card1_h3 }}

+

{{ t.sup_why_card1_p }}

-
-
2
-

{{ t.sup_how_step2_h3 }}

-

{{ t.sup_how_step2_p }}

+
+

{{ t.sup_why_card2_h3 }}

+

{{ t.sup_why_card2_p }}

-
-
3
-

{{ t.sup_how_step3_h3 }}

-

{{ t.sup_how_step3_p }}

+
+

{{ t.sup_why_card3_h3 }}

+

{{ t.sup_why_card3_p }}

+
- -
-

{{ t.sup_credits_h3 }}

-

- {{ t.sup_credits_sub }} -

-
-
-
{{ t.sup_credits_hot }}
-
35
-
{{ t.sup_credits_hot_label }}
-
-
-
{{ t.sup_credits_warm }}
-
20
-
{{ t.sup_credits_warm_label }}
-
-
-
{{ t.sup_credits_cool }}
-
8
-
{{ t.sup_credits_cool_label }}
-
-
+ +
+
+ 🛡️ +

{{ t.sup_guarantee_h2 }}

+

{{ t.sup_guarantee_p }}

+ {{ t.sup_guarantee_badge }}
+
- + +
+

{{ t.sup_leads_section_h2 }}

+

{{ t.sup_leads_section_sub }}

{{ t.sup_leads_heading }}

{% if preview_leads %} @@ -376,7 +381,7 @@

{{ t.sup_leads_unlock_pre }} - {{ t.sup_leads_unlock_cta }} + {{ t.sup_leads_unlock_cta }}

{% else %}
@@ -418,22 +423,41 @@
- +
-

{{ t.sup_why_h2 }}

-

{{ t.sup_why_sub }}

-
-
-

{{ t.sup_why_card1_h3 }}

-

{{ t.sup_why_card1_p }}

+

{{ t.sup_how_h2 }}

+

{{ t.sup_how_sub }}

+
+
+
1
+

{{ t.sup_how_step1_h3 }}

+

{{ t.sup_how_step1_p }}

-
-

{{ t.sup_why_card2_h3 }}

-

{{ t.sup_why_card2_p }}

+
+
2
+

{{ t.sup_how_step2_h3 }}

+

{{ t.sup_how_step2_p }}

-
-

{{ t.sup_why_card3_h3 }}

-

{{ t.sup_why_card3_p }}

+
+
3
+

{{ t.sup_how_step3_h3 }}

+

{{ t.sup_how_step3_p }}

+
+
+
+ + +
+

{{ t.sup_proof_h2 }}

+

{{ calc_requests }}+ {{ t.sup_proof_stat1 }} · {{ total_suppliers }}+ {{ t.sup_proof_stat2 }} · {{ total_countries }} {{ t.sup_proof_stat3 }}

+
+
+
“{{ t.sup_proof_q1 }}”
+ {{ t.sup_proof_cite1 }} +
+
+
“{{ t.sup_proof_q2 }}”
+ {{ t.sup_proof_cite2 }}
@@ -453,15 +477,14 @@
- +

{{ t.sup_basic_name }}

-
€39 /mo
+
{{ t.sup_basic_free_label }}
-
€29 /mo
- {{ t.sup_yearly_note_basic }} +
{{ t.sup_basic_free_label }}
{{ t.sup_basic_dir }}
    @@ -473,6 +496,7 @@
  • {{ t.sup_basic_f6 }}
{{ t.sup_basic_cta }} +

{{ t.sup_pricing_eur_note }}

@@ -496,6 +520,7 @@
  • {{ t.sup_growth_f6 }}
    • {{ t.sup_growth_cta }} +

    {{ t.sup_pricing_eur_note }}

    @@ -518,9 +543,20 @@
  • {{ t.sup_pro_f6 }}
    • {{ t.sup_pro_cta }} +

    {{ t.sup_pricing_eur_note }}

    + +
    +

    {{ t.sup_roi_line }}

    +
    + + +
    +

    {{ t.sup_credits_only_pre }} {{ t.sup_credits_only_cta }} {{ t.sup_credits_only_post }}

    +
    +

    {{ t.sup_boosts_h3 }}

    {{ t.sup_boosts_sub }}

    @@ -543,7 +579,7 @@
    {{ t.sup_boost_color }} - €19/mo + €59/mo
    @@ -566,7 +602,7 @@ {{ t.sup_cmp_row1 }} - €1,799/yr + €1,799/yr (yearly plan) €10,000+/event €5,000+/yr* €600/yr @@ -612,22 +648,6 @@

    {{ t.sup_cmp_footnote }}

    - -
    -

    {{ t.sup_proof_h2 }}

    -

    {{ calc_requests }}+ {{ t.sup_proof_stat1 }} · {{ total_suppliers }}+ {{ t.sup_proof_stat2 }} · {{ total_countries }} {{ t.sup_proof_stat3 }}

    -
    -
    -
    “{{ t.sup_proof_q1 }}”
    - {{ t.sup_proof_cite1 }} -
    -
    -
    “{{ t.sup_proof_q2 }}”
    - {{ t.sup_proof_cite2 }} -
    -
    -
    -

    {{ t.sup_faq_h2 }}

    @@ -679,7 +699,7 @@

    {{ t.sup_cta_h2 }}

    {{ t.sup_cta_p }}

    - {{ t.sup_hero_cta }} + {{ t.sup_cta_btn }}
    diff --git a/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html b/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html index 8afd96c..cd48e4d 100644 --- a/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html +++ b/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html @@ -64,12 +64,22 @@ {% if key == 'supplier_growth' %}
    {{ t.sup_step1_popular }}
    {% endif %}

    {{ plan.name }}

    + {% if plan.yearly_price == 0 %} +
    {{ t.sup_basic_free_label }}
    +
    {{ t.sup_step1_free_forever }}
    + {% else %}
    €{{ plan.yearly_monthly_equivalent }} /mo
    {{ t.sup_step1_billed_yearly | tformat(price=plan.yearly_price) }}
    + {% endif %}
    + {% if plan.monthly_price == 0 %} +
    {{ t.sup_basic_free_label }}
    +
    {{ t.sup_step1_free_forever }}
    + {% else %}
    €{{ plan.monthly_price }} /mo
    {{ t.sup_step1_billed_monthly }}
    + {% endif %}
      {% for key in plan.feature_keys %}