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.
101 lines
3.1 KiB
101 lines
3.1 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>
|