feat: add inline pricing section with launch offer (first 100 at €47)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { Faq } from "~/modules/marketing/home/faq";
|
|||||||
import { Hero } from "~/modules/marketing/home/hero";
|
import { Hero } from "~/modules/marketing/home/hero";
|
||||||
import { HowItWorks } from "~/modules/marketing/home/how-it-works";
|
import { HowItWorks } from "~/modules/marketing/home/how-it-works";
|
||||||
import { HowToRead } from "~/modules/marketing/home/how-to-read";
|
import { HowToRead } from "~/modules/marketing/home/how-to-read";
|
||||||
|
import { Pricing } from "~/modules/marketing/home/pricing";
|
||||||
import { ReportPreview } from "~/modules/marketing/home/report-preview";
|
import { ReportPreview } from "~/modules/marketing/home/report-preview";
|
||||||
import { ReviewEvidence } from "~/modules/marketing/home/review-evidence";
|
import { ReviewEvidence } from "~/modules/marketing/home/review-evidence";
|
||||||
import { Testimonials } from "~/modules/marketing/home/testimonials";
|
import { Testimonials } from "~/modules/marketing/home/testimonials";
|
||||||
@@ -16,6 +17,7 @@ const HomePage = () => {
|
|||||||
<HowToRead />
|
<HowToRead />
|
||||||
<ReviewEvidence />
|
<ReviewEvidence />
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
|
<Pricing />
|
||||||
<Faq />
|
<Faq />
|
||||||
<Banner />
|
<Banner />
|
||||||
</>
|
</>
|
||||||
|
|||||||
119
apps/web/src/modules/marketing/home/pricing.tsx
Normal file
119
apps/web/src/modules/marketing/home/pricing.tsx
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTranslation } from "@turbostarter/i18n";
|
||||||
|
import { cn } from "@turbostarter/ui";
|
||||||
|
import { buttonVariants } from "@turbostarter/ui-web/button";
|
||||||
|
|
||||||
|
import { pathsConfig } from "~/config/paths";
|
||||||
|
import { TurboLink } from "~/modules/common/turbo-link";
|
||||||
|
import {
|
||||||
|
Section,
|
||||||
|
SectionBadge,
|
||||||
|
SectionDescription,
|
||||||
|
SectionHeader,
|
||||||
|
SectionTitle,
|
||||||
|
} from "~/modules/marketing/layout/section";
|
||||||
|
|
||||||
|
const INCLUDED = [
|
||||||
|
"pricing.includes.score",
|
||||||
|
"pricing.includes.domains",
|
||||||
|
"pricing.includes.themes",
|
||||||
|
"pricing.includes.issues",
|
||||||
|
"pricing.includes.actions",
|
||||||
|
"pricing.includes.trends",
|
||||||
|
"pricing.includes.evidence",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const Pricing = () => {
|
||||||
|
const { t } = useTranslation("marketing");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Section id="pricing">
|
||||||
|
<SectionHeader>
|
||||||
|
<SectionBadge>{t("pricing.label")}</SectionBadge>
|
||||||
|
<SectionTitle>{t("pricing.title")}</SectionTitle>
|
||||||
|
<SectionDescription>{t("pricing.description")}</SectionDescription>
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
|
{/* Anchor comparison */}
|
||||||
|
<p className="text-muted-foreground -mt-4 text-center text-sm">
|
||||||
|
{t("pricing.anchor")}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Pricing card */}
|
||||||
|
<div className="relative w-full max-w-md">
|
||||||
|
{/* Launch badge */}
|
||||||
|
<div className="absolute -top-4 left-1/2 z-10 -translate-x-1/2">
|
||||||
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500 px-4 py-1.5 text-xs font-bold text-white shadow-md">
|
||||||
|
{t("pricing.launchBadge")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-background relative overflow-hidden rounded-2xl border-2 border-amber-500/40 p-8 pt-10 shadow-lg">
|
||||||
|
{/* Price */}
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<div className="flex items-baseline gap-2">
|
||||||
|
<span className="text-muted-foreground text-2xl line-through">
|
||||||
|
€97
|
||||||
|
</span>
|
||||||
|
<span className="text-foreground text-6xl font-bold tracking-tight">
|
||||||
|
€47
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
{t("pricing.oneTime")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<div className="my-6 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
|
||||||
|
|
||||||
|
{/* What's included */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-foreground mb-3 text-sm font-semibold">
|
||||||
|
{t("pricing.includesTitle")}
|
||||||
|
</p>
|
||||||
|
<ul className="flex flex-col gap-2.5">
|
||||||
|
{INCLUDED.map((key) => (
|
||||||
|
<li key={key} className="flex items-start gap-2.5">
|
||||||
|
<svg
|
||||||
|
className="mt-0.5 size-4 shrink-0 text-green-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2.5}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M5 13l4 4L19 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
{t(key as any)}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<TurboLink
|
||||||
|
href={pathsConfig.auth.login}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ size: "lg" }),
|
||||||
|
"w-full text-base font-semibold",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t("pricing.cta")}
|
||||||
|
</TurboLink>
|
||||||
|
|
||||||
|
{/* Trust line */}
|
||||||
|
<p className="text-muted-foreground mt-4 text-center text-xs">
|
||||||
|
{t("pricing.trust")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -18,8 +18,8 @@ const links = [
|
|||||||
href: "/#how-it-works",
|
href: "/#how-it-works",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "billing:pricing.label",
|
label: "marketing:pricing.navLabel",
|
||||||
href: pathsConfig.marketing.pricing,
|
href: "/#pricing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "marketing:contact.label",
|
label: "marketing:contact.label",
|
||||||
|
|||||||
@@ -181,6 +181,27 @@
|
|||||||
"description": "Your reviews contain hidden patterns. Our AI highlights every positive, negative, and mixed mention — so you see exactly what customers are telling you between the lines.",
|
"description": "Your reviews contain hidden patterns. Our AI highlights every positive, negative, and mixed mention — so you see exactly what customers are telling you between the lines.",
|
||||||
"cta": "See what's hiding in your reviews"
|
"cta": "See what's hiding in your reviews"
|
||||||
},
|
},
|
||||||
|
"pricing": {
|
||||||
|
"navLabel": "Pricing",
|
||||||
|
"label": "Launch Offer",
|
||||||
|
"title": "One report. Everything you need.",
|
||||||
|
"description": "A complete Reputation Blueprint for your business — delivered in 24 hours.",
|
||||||
|
"anchor": "Marketing consultants charge €2,000+ for this analysis.",
|
||||||
|
"launchBadge": "First 100 reports — launch price",
|
||||||
|
"oneTime": "One-time purchase. No subscription.",
|
||||||
|
"includesTitle": "Your Blueprint includes:",
|
||||||
|
"includes": {
|
||||||
|
"score": "Reputation Score (0–100) with 5-pillar breakdown",
|
||||||
|
"domains": "6 experience domains scored and benchmarked",
|
||||||
|
"themes": "Theme matrix — every topic your customers mention",
|
||||||
|
"issues": "Critical issues ranked by impact on your rating",
|
||||||
|
"actions": "Prioritized action plan with effort/impact ratings",
|
||||||
|
"trends": "Rating trends and seasonal patterns over time",
|
||||||
|
"evidence": "Full review evidence with highlighted sentiment"
|
||||||
|
},
|
||||||
|
"cta": "Get my Blueprint — €47",
|
||||||
|
"trust": "Secure payment. Report delivered to your email within 24h."
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"label": "What You Get",
|
"label": "What You Get",
|
||||||
"title": "Everything hidden in your reviews, revealed",
|
"title": "Everything hidden in your reviews, revealed",
|
||||||
|
|||||||
@@ -181,6 +181,27 @@
|
|||||||
"description": "Tus reseñas contienen patrones ocultos. Nuestra IA resalta cada mención positiva, negativa y mixta — para que veas exactamente lo que tus clientes te dicen entre líneas.",
|
"description": "Tus reseñas contienen patrones ocultos. Nuestra IA resalta cada mención positiva, negativa y mixta — para que veas exactamente lo que tus clientes te dicen entre líneas.",
|
||||||
"cta": "Descubre qué esconden tus reseñas"
|
"cta": "Descubre qué esconden tus reseñas"
|
||||||
},
|
},
|
||||||
|
"pricing": {
|
||||||
|
"navLabel": "Precios",
|
||||||
|
"label": "Oferta de Lanzamiento",
|
||||||
|
"title": "Un informe. Todo lo que necesitas.",
|
||||||
|
"description": "Una Radiografía de Reputación completa para tu negocio — entregada en 24 horas.",
|
||||||
|
"anchor": "Los consultores de marketing cobran más de 2.000 € por este análisis.",
|
||||||
|
"launchBadge": "Primeros 100 informes — precio de lanzamiento",
|
||||||
|
"oneTime": "Pago único. Sin suscripción.",
|
||||||
|
"includesTitle": "Tu Radiografía incluye:",
|
||||||
|
"includes": {
|
||||||
|
"score": "Puntuación de Reputación (0–100) con desglose de 5 pilares",
|
||||||
|
"domains": "6 dominios de experiencia puntuados y comparados",
|
||||||
|
"themes": "Matriz de temas — cada tema que mencionan tus clientes",
|
||||||
|
"issues": "Problemas críticos ordenados por impacto en tu calificación",
|
||||||
|
"actions": "Plan de acción priorizado con niveles de esfuerzo/impacto",
|
||||||
|
"trends": "Tendencias de calificación y patrones estacionales",
|
||||||
|
"evidence": "Evidencia completa de reseñas con sentimiento destacado"
|
||||||
|
},
|
||||||
|
"cta": "Obtener mi Radiografía — 47 €",
|
||||||
|
"trust": "Pago seguro. Informe entregado a tu email en 24h."
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"label": "Lo Que Recibes",
|
"label": "Lo Que Recibes",
|
||||||
"title": "Todo lo que esconden tus reseñas, al descubierto",
|
"title": "Todo lo que esconden tus reseñas, al descubierto",
|
||||||
|
|||||||
Reference in New Issue
Block a user