@imansi/templates 0.1.0

package/src/marketing/PricingPage.jsx

@@ -0,0 +1,205 @@
+import { Link } from 'react-router-dom';
+import { Badge, Button, cn } from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function PricingPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  title = 'Precios simples, sin sorpresas',
+  subtitle = 'Elegí el plan que mejor se adapta a tu equipo. Podés cambiar en cualquier momento.',
+
+  plans = [],
+  showComparison = false,
+  comparisonFeatures = [],
+
+  faqTitle = 'Preguntas frecuentes',
+  faq = [],
+
+  ctaTitle = '¿Listo para empezar?',
+  ctaSubtitle = 'Empezá gratis. Sin tarjeta de crédito.',
+  ctaPrimary = { label: 'Crear cuenta', href: '/registro' },
+}) {
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* Header */}
+      <section className="imansi-container py-16 sm:py-20 text-center max-w-2xl mx-auto space-y-4">
+        <h1 className="text-display font-bold tracking-tight">{title}</h1>
+        <p className="text-body text-muted-foreground">{subtitle}</p>
+      </section>
+
+      {/* Plans */}
+      <section className="imansi-container pb-16">
+        <div className={cn(
+          'grid gap-6',
+          plans.length === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-4'
+        )}>
+          {plans.map((plan, i) => (
+            <div
+              key={i}
+              className={cn(
+                'relative rounded-xl border bg-card p-7 flex flex-col transition-shadow hover:shadow-lg',
+                plan.popular
+                  ? 'border-primary shadow-lg ring-1 ring-primary'
+                  : 'border-border'
+              )}
+            >
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <Badge variant="primary" className="shadow-md">
+                    Más popular
+                  </Badge>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <h3 className="text-h4 font-semibold">{plan.name}</h3>
+                <p className="text-small text-muted-foreground min-h-[2.5rem]">
+                  {plan.description}
+                </p>
+              </div>
+
+              <div className="my-6">
+                <div className="flex items-baseline gap-1">
+                  <span className="text-display font-bold tracking-tight">
+                    {plan.price}
+                  </span>
+                  {plan.period && (
+                    <span className="text-small text-muted-foreground">
+                      /{plan.period}
+                    </span>
+                  )}
+                </div>
+                {plan.note && (
+                  <p className="text-caption text-muted-foreground mt-1">
+                    {plan.note}
+                  </p>
+                )}
+              </div>
+
+              <ul className="space-y-3 mb-8 flex-1">
+                {plan.features.map((feature, j) => (
+                  <li key={j} className="flex items-start gap-2.5 text-small">
+                    <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-success/10 text-success">
+                      <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="2,6 5,9 10,3" />
+                      </svg>
+                    </span>
+                    <span className="text-foreground">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <Link to={plan.href || '/registro'} className="mt-auto">
+                <Button
+                  fullWidth
+                  variant={plan.popular ? 'primary' : 'outline'}
+                  size="lg"
+                >
+                  {plan.cta || 'Elegir plan'}
+                </Button>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Comparison table */}
+      {showComparison && comparisonFeatures.length > 0 && (
+        <section className="imansi-container pb-20">
+          <div className="rounded-xl border border-border overflow-hidden">
+            <table className="w-full text-small">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="text-left p-4 font-semibold">Característica</th>
+                  {plans.map((p) => (
+                    <th key={p.name} className="text-center p-4 font-semibold">
+                      {p.name}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {comparisonFeatures.map((feature, i) => (
+                  <tr key={i} className="border-t border-border">
+                    <td className="p-4 text-foreground">{feature.label}</td>
+                    {plans.map((p) => {
+                      const val = feature.values?.[p.name];
+                      return (
+                        <td key={p.name} className="text-center p-4">
+                          {val === true ? (
+                            <span className="text-success text-base">✓</span>
+                          ) : val === false ? (
+                            <span className="text-muted-foreground">—</span>
+                          ) : (
+                            <span className="text-foreground">{val}</span>
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+
+      {/* FAQ */}
+      {faq.length > 0 && (
+        <section className="imansi-container pb-20 max-w-3xl mx-auto">
+          <h2 className="text-h1 font-bold tracking-tight text-center mb-10">
+            {faqTitle}
+          </h2>
+          <div className="space-y-3">
+            {faq.map((item, i) => (
+              <details
+                key={i}
+                className="group rounded-lg border border-border bg-card p-5 [&_summary::-webkit-details-marker]:hidden"
+              >
+                <summary className="flex items-center justify-between cursor-pointer">
+                  <span className="text-small font-semibold">{item.question}</span>
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="transition-transform group-open:rotate-180 shrink-0">
+                    <polyline points="4,6 8,10 12,6" />
+                  </svg>
+                </summary>
+                <p className="text-small text-muted-foreground mt-3 leading-relaxed">
+                  {item.answer}
+                </p>
+              </details>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* CTA final */}
+      <section className="imansi-container pb-20">
+        <div className="rounded-2xl bg-primary text-primary-foreground p-10 sm:p-14 text-center space-y-5">
+          <h2 className="text-h1 font-bold tracking-tight">{ctaTitle}</h2>
+          <p className="text-body opacity-80 max-w-xl mx-auto">{ctaSubtitle}</p>
+          <div className="pt-2">
+            <Link to={ctaPrimary.href}>
+              <Button
+                size="lg"
+                className="!bg-primary-foreground !text-primary hover:opacity-90"
+              >
+                {ctaPrimary.label}
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}