Value Proposition

Statement of the benefit the product/service provides.

html

<div class="vprop vprop--left">
  <span class="vprop__icon" style="background:#A8E6C1;" aria-hidden="true">&#10003;</span>
  <h3 class="vprop__headline">Close deals in days, not quarters</h3>
  <p class="vprop__explanation">Automated follow-ups mean nothing falls through the cracks.</p>
</div>
<style>
.vprop { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 340px; }
.vprop--center { text-align: center; margin: 0 auto; }
.vprop__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #241430; font-weight: 700; margin-bottom: 12px; }
.vprop__headline { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.vprop__explanation { margin: 0; color: #241430cc; font-size: 14px; }
</style>

tailwind

<div class="vprop-tw vprop-tw--left font-sans text-[#241430] max-w-[340px]">
  <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-[#241430] font-bold mb-3" style="background:#A8E6C1;" aria-hidden="true">&#10003;</span>
  <h3 class="m-0 mb-2 text-xl font-bold">Close deals in days, not quarters</h3>
  <p class="m-0 text-sm text-[#241430]/80">Automated follow-ups mean nothing falls through the cracks.</p>
</div>
<style>
.vprop-tw--center { text-align: center; margin: 0 auto; }
</style>

react

export function ValueProposition({
  headline = "Close deals in days, not quarters",
  explanation = "Automated follow-ups mean nothing falls through the cracks.",
  align = "left",
  accent = "#A8E6C1",
  showIcon = true,
}) {
  const centered = align === "center";
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 340,
      textAlign: align, margin: centered ? "0 auto" : 0 }}>
      {showIcon && (
        <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 32, height: 32, borderRadius: "50%", color: "#241430", fontWeight: 700, marginBottom: 12, background: accent }}>&#10003;</span>
      )}
      <h3 style={{ margin: "0 0 8px", fontSize: 20, fontWeight: 700 }}>{headline}</h3>
      <p style={{ margin: 0, color: "#241430cc", fontSize: 14 }}>{explanation}</p>
    </div>
  );
}