first commit

apps/web/pages/plans.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="page">
+    <Header />
+    <main class="container">
+      <header class="page-header">
+        <h1>Planes y precios</h1>
+        <p>Elige el plan que mejor se adapta a tu equipo.</p>
+      </header>
+      <section class="grid">
+        <article v-for="plan in plans" :key="plan.id" class="card">
+          <h2>{{ plan.name }}</h2>
+          <p class="muted">{{ plan.description }}</p>
+          <div class="price">
+            <span class="value">{{ plan.priceMonthly }}</span>
+            <span class="currency">{{ plan.currency }}/mes</span>
+          </div>
+          <ul>
+            <li v-for="(value, key) in plan.features || {}" :key="key">
+              <strong>{{ key }}</strong>: {{ value }}
+            </li>
+          </ul>
+          <button class="btn">Solicitar acceso</button>
+        </article>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import Header from '~/components/Header.vue'
+const config = useRuntimeConfig()
+const { data } = await useFetch(`${config.public.apiBase}/plans`)
+const plans = computed(() => data.value ?? [])
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: #eef2f9;
+  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
+}
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem 4rem;
+}
+.page-header {
+  margin-bottom: 2rem;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+.card {
+  background: #fff;
+  border-radius: 20px;
+  padding: 1.8rem;
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+.price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+.value {
+  font-size: 2rem;
+  font-weight: 700;
+}
+.currency {
+  color: #64748b;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+.btn {
+  margin-top: auto;
+  padding: 0.6rem 1.2rem;
+  border-radius: 999px;
+  border: none;
+  background: #0f172a;
+  color: #fff;
+  font-weight: 600;
+}
+.muted {
+  color: #64748b;
+}
+</style>