98 lines
3 KiB
TypeScript
98 lines
3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Packages — four tiers, each named for an outcome rather than a task list.
|
|
* "Motor" is the featured tier (lifted, gradient spine). Cards reveal on scroll
|
|
* and the featured one carries a continuously-shifting gradient border.
|
|
*/
|
|
|
|
import Reveal from "./Reveal";
|
|
|
|
type Pkg = {
|
|
n: string;
|
|
who: string;
|
|
price: string;
|
|
f: string[];
|
|
featured?: boolean;
|
|
};
|
|
|
|
const packages: Pkg[] = [
|
|
{
|
|
n: "Sitio AI-native",
|
|
who: "Necesitas web, ya",
|
|
price: "Proyecto",
|
|
f: ["Web en código, editable", "SEO base + tracking", "Entregada en tiempo récord"],
|
|
},
|
|
{
|
|
n: "Base",
|
|
who: "Estás arrancando",
|
|
price: "Mensual",
|
|
f: ["Fundamentos SEO", "Contenido inicial", "Analítica conectada"],
|
|
},
|
|
{
|
|
n: "Motor",
|
|
who: "Quieres crecer en serio",
|
|
price: "Mensual",
|
|
f: ["Ads + SEO + contenido", "Dashboard de resultados", "Optimización mensual", "Plataforma de IA incluida"],
|
|
featured: true,
|
|
},
|
|
{
|
|
n: "Partner",
|
|
who: "Quieres escalar",
|
|
price: "Retainer",
|
|
f: ["Full-stack de crecimiento", "Automatización a medida", "Prioridad y roadmap", "Acceso directo al equipo"],
|
|
},
|
|
];
|
|
|
|
export default function Packages() {
|
|
return (
|
|
<section id="paquetes" className="packages">
|
|
<div className="wrap">
|
|
<Reveal>
|
|
<p className="kicker">04 — Paquetes</p>
|
|
<h2 className="packages__title">
|
|
Cada uno con un resultado. <span className="serif-em">No listas de tareas.</span>
|
|
</h2>
|
|
</Reveal>
|
|
|
|
<Reveal className="packages__grid" stagger={0.1}>
|
|
{packages.map((p) => (
|
|
<article
|
|
className={`pkg hoverable${p.featured ? " pkg--featured" : ""}`}
|
|
key={p.n}
|
|
data-cursor={p.featured ? "el más elegido" : "ver"}
|
|
>
|
|
{p.featured && <span className="pkg__tag">Más elegido</span>}
|
|
<header className="pkg__head">
|
|
<span className="pkg__price">{p.price}</span>
|
|
<h3 className="pkg__name">{p.n}</h3>
|
|
<p className="pkg__who">{p.who}</p>
|
|
</header>
|
|
<ul className="pkg__features">
|
|
{p.f.map((x) => (
|
|
<li key={x}>
|
|
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
|
|
<path
|
|
d="M4 10.5l3.5 3.5L16 6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
<span>{x}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a className="pkg__cta hoverable" href="#contacto">
|
|
Empezar con {p.n}
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|