You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.0 KiB
76 lines
3.0 KiB
<script lang="ts">
|
|
/**
|
|
* The feature-grid mini-page: the block with real product content, plus a
|
|
* page floor, so the demo can render it FULL-BLEED and the `preview` route can
|
|
* serve it as a standalone document for the device-width frame.
|
|
*/
|
|
import { FeatureGrid } from '$blocks/feature-grid';
|
|
import { Section } from '$uix/eidos/components/section';
|
|
import { Container } from '$uix/eidos/components/container';
|
|
import { Stack } from '$uix/eidos/components/stack';
|
|
import { Heading } from '$uix/eidos/components/heading';
|
|
import { Text } from '$uix/eidos/components/text';
|
|
import * as Icon from '$uix/eidos/components/icon';
|
|
|
|
type Align = 'start' | 'center';
|
|
|
|
let {
|
|
columns = 0,
|
|
align = 'center' as Align,
|
|
count = 6
|
|
}: {
|
|
/** 0 = fluid (minChildWidth); otherwise a fixed column count. */
|
|
columns?: number;
|
|
align?: Align;
|
|
count?: number;
|
|
} = $props();
|
|
|
|
const features = [
|
|
{ icon: Icon.Zap, title: 'Sin muestreo', text: 'Todos los eventos, no una fracción: los números cuadran con tu base de datos.' },
|
|
{ icon: Icon.ChartColumn, title: 'Cohortes al día', text: 'Qué hicieron, cuándo dejaron de hacerlo y qué cambió la semana en que lanzaste.' },
|
|
{ icon: Icon.Workflow, title: 'Automatizaciones', text: 'Reglas que reaccionan al flujo de eventos: avisar, mover, abrir un ticket.' },
|
|
{ icon: Icon.Bell, title: 'Alertas que importan', text: 'Un umbral sobre cualquier métrica y el canal donde de verdad lo lees.' },
|
|
{ icon: Icon.Shield, title: 'SSO y auditoría', text: 'SAML, SCIM y un registro de quién vio qué, listo para tu equipo de seguridad.' },
|
|
{ icon: Icon.Clock, title: 'Sin reprocesar', text: 'Consulta cualquier ventana temporal al instante: el motor mantiene los agregados.' }
|
|
];
|
|
|
|
const shown = $derived(features.slice(0, count));
|
|
</script>
|
|
|
|
<FeatureGrid {align}>
|
|
<FeatureGrid.Header>
|
|
<Heading level={2} align={align === 'center' ? 'center' : 'start'}>
|
|
Todo lo que necesitas para medir de verdad
|
|
</Heading>
|
|
<Text size="lg" color="muted" align={align === 'center' ? 'center' : 'start'}>
|
|
Sin configurar pipelines ni esperar a mañana. Conectas la fuente de eventos y ya estás midiendo.
|
|
</Text>
|
|
</FeatureGrid.Header>
|
|
|
|
<FeatureGrid.Items columns={columns || undefined} minChildWidth="16rem">
|
|
{#each shown as feature (feature.title)}
|
|
{@const Glyph = feature.icon}
|
|
<FeatureGrid.Item {align}>
|
|
<FeatureGrid.ItemIcon color="primary">
|
|
<Glyph size="md" />
|
|
</FeatureGrid.ItemIcon>
|
|
<FeatureGrid.ItemTitle>{feature.title}</FeatureGrid.ItemTitle>
|
|
<FeatureGrid.ItemText>{feature.text}</FeatureGrid.ItemText>
|
|
</FeatureGrid.Item>
|
|
{/each}
|
|
</FeatureGrid.Items>
|
|
</FeatureGrid>
|
|
|
|
<!-- A floor so the page reads as a page. -->
|
|
<Section size="lg">
|
|
<Container size="lg">
|
|
<Stack gap={4}>
|
|
<Heading level={2}>Una API, no diez integraciones</Heading>
|
|
<Text color="muted" measure="wide">
|
|
Un solo SDK envía los eventos; el resto —cohortes, embudos, alertas— vive en el producto,
|
|
sin pegamento entre servicios.
|
|
</Text>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|