O sistema por trás de tudo que construímos.

CSS

font-family: Montserrat, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

JSX — nunca reimplemente à mão, use SectionHeader

<Stack gap="xs">
    <Text size="xs" fw={800} tt="uppercase" lts="1.5px" c="gray.4">
        Prova verificável
    </Text>
    <Title order={2} fz="var(--fz-section-title)" maw={800}>
        Números que você pode conferir.
    </Title>
</Stack>

JSX — a primitiva Section

<Box component="section" id={id} bg={bg} py={{ base: 80, md: 120 }}>
    <Container size="lg">
        <Stack gap="xl">
            <SectionHeader badge subtitle title maw={800} />
            <Box>{children}</Box>
        </Stack>
    </Container>
</Box>

theme.js

TextInput: {
    defaultProps: { size: 'lg', radius: '0' },
    styles: { input: {
        border: '1px solid var(--mantine-color-gray-2)',
        paddingLeft: 16,
        paddingRight: 16,
    }},
}

Entry point

import '@mantine/core/styles.css'
import '@ciromaciel/components-kit/style.css'

import { MantineProvider } from '@mantine/core'
import { theme } from '@ciromaciel/components-kit'

export default function App() {
    return (
        <MantineProvider theme={theme} defaultColorScheme="auto">
            {/* suas rotas */}
        </MantineProvider>
    )
}

import { useState } from 'react'
import { IconArrowRight, IconLock, IconRocket, IconSettings } from '@tabler/icons-react'
import {
    Layout, Header, Hero, SocialProof, StatsGrid, FeatureSplit,
    Steps, Comparison, Pricing, Testimonials, FAQ, CTABanner, Footer, Wordmark,
} from '@ciromaciel/components-kit'

export default function LandingPage() {
    const [billing, setBilling] = useState('monthly')

    return (
        <Layout>
            <Header
                logo={<Wordmark>Acme</Wordmark>}
                navLinks={[{ label: 'Preço', href: '#preco' }]}
                signupCta={{ label: 'Criar conta', href: '/signup' }}
            />

            <main style={{ flex: 1 }}>
                {/* Palcos alternam white ↔ gray, sempre */}
                <Hero
                    background="white"
                    subtitle="Infraestrutura em português"
                    title={<>Login pronto<br />em uma tarde.</>}
                    description="Autenticação, sessões e permissões sem três semanas de trabalho."
                    cta={{ label: 'Começar grátis', href: '/signup', icon: <IconArrowRight size={18} /> }}
                    note="Grátis até 1.000 usuários ativos. Sem cartão."
                />

                <SocialProof title="Quem já usa" logos={[{ src: '/a.webp', alt: 'A' }]} />

                {/* Prova antes de preço */}
                <StatsGrid
                    background="gray"
                    subtitle="No ar agora"
                    title="O que você confere sem falar com ninguém"
                    items={[
                        { value: '99,9%', label: 'Uptime', description: 'Medido nos últimos 90 dias' },
                        { value: '<200ms', label: 'Latência p95', description: 'Do Brasil, medido de fora' },
                    ]}
                    note="Todo número aqui é verificável em dois minutos."
                />

                <FeatureSplit
                    background="white"
                    subtitle="Como funciona"
                    title="Uma linha para proteger uma rota."
                    featuresList={['Sessões com refresh automático', 'RBAC por rota']}
                    image="/codigo.webp"
                />

                <Steps
                    background="gray"
                    badge="Como funciona"
                    title="Três passos. Zero atrito."
                    items={[
                        { number: '01', icon: IconLock, title: 'Instale', description: 'Um comando.' },
                        { number: '02', icon: IconSettings, title: 'Configure', description: 'Um arquivo.' },
                        { number: '03', icon: IconRocket, title: 'No ar', description: 'Menos de dois minutos.' },
                    ]}
                />

                <Comparison
                    background="white"
                    subtitle="ROI do seu tempo"
                    traditionalCol={{
                        title: 'Do zero', subtitle: 'O caminho longo',
                        items: [{ label: 'Autenticação', value: '3 semanas' }],
                        totalValue: 'R$ 42.000', footerText: 'Sem contar manutenção',
                    }}
                    newCol={{
                        title: 'Com o kit', badge: 'RECOMENDADO',
                        description: 'Pronto para produção.',
                        items: ['Login em uma tarde'],
                        pricingBox: { label: 'Tempo até o ar', price: '30 min' },
                    }}
                />

                <Pricing
                    background="gray"
                    subtitle="Preço"
                    billing={billing}
                    setBilling={setBilling}
                    plans={[{
                        name: 'Pro',
                        description: 'Para times em produção.',
                        priceDisplay: { currency: 'R$', whole: '49', fraction: '90' },
                        period: '/mês',
                        features: ['Usuários ilimitados'],
                        highlight: true,
                        cta: { label: 'Começar', href: '/signup' },
                    }]}
                />

                <Testimonials
                    background="white"
                    subtitle="Quem já fez"
                    items={[{ quote: 'Subimos em uma tarde.', name: 'Ana', role: 'CTO', company: 'Acme' }]}
                />

                <FAQ
                    background="gray"
                    subtitle="Perguntas difíceis"
                    questions={[{ question: 'Consigo exportar?', answer: 'Sim, JSON e CSV.' }]}
                />

                {/* CTABanner sempre fecha */}
                <CTABanner
                    background="white"
                    subtitle="Pronto para começar"
                    title="Suba seu primeiro projeto hoje."
                    cta={{ label: 'Criar conta', href: '/signup', icon: <IconArrowRight size={18} /> }}
                />
            </main>

            <Footer
                background="gray"
                description="Infraestrutura em português."
                sections={[{ title: 'Produto', links: [{ label: 'Preço', href: '#preco' }] }]}
                copyrightText={`© ${new Date().getFullYear()} Acme.`}
            />
        </Layout>
    )
}

import { useMemo, useState } from 'react'
import { Box, Card, Group, Skeleton, Stack, Text, Title } from '@mantine/core'
import { IconPlus, IconSearch } from '@tabler/icons-react'

const COLS = '2.4fr 1fr 1fr 40px'   // fr para conteúdo, px fixo para ações
const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', lts: '1.5px' }

export default function InvoicesPage({ invoices = [], loading, onOpen, onCreate }) {
    const [term, setTerm] = useState('')

    const rows = useMemo(() => {
        const q = term.trim().toLowerCase()
        if (!q) return invoices
        return invoices.filter(i => i.number.toLowerCase().includes(q) || i.customer.toLowerCase().includes(q))
    }, [invoices, term])

    return (
        <Box px={48} pt={40} pb={80} maw={1280} mx="auto">
            {/* Cabeçalho: crumb + título + subtítulo, ações à direita */}
            <Group justify="space-between" align="flex-start" wrap="nowrap" gap={24} mb={32}>
                <Stack gap={8} flex={1} miw={0}>
                    <Text fz={10} fw={800} c="gray.4" tt="uppercase" lts="1.5px">
                        + Acme · Produção · Faturas
                    </Text>
                    <Title order={1} fz={36} fw={900} lh={1} lts="-0.04em">Faturas</Title>
                    <Text fz={15} fw={500} c="gray.6" lh={1.5}>
                        Tudo o que foi cobrado nesta aplicação.
                    </Text>
                </Stack>
                <Group gap="md" wrap="nowrap" flex="none">
                    <Box
                        component="button"
                        onClick={onCreate}
                        px="md" py={8} bg="gray.9" c="white" fz={12} fw={800} tt="uppercase"
                        style={{ letterSpacing: '1px', border: 'none', borderRadius: 0, cursor: 'pointer' }}
                    >
                        Nova fatura
                    </Box>
                </Group>
            </Group>

            <Card p={0} withBorder radius="0" style={{ overflow: 'hidden' }}>
                {/* Busca local — filtra a lista desta tela */}
                <Group px="md" py="sm" justify="space-between" wrap="nowrap"
                    style={{ borderBottom: '1px solid var(--mantine-color-gray-2)' }}>
                    <Group gap="xs" wrap="nowrap" flex={1} px="sm" py={6}
                        style={{ border: '1px solid var(--mantine-color-gray-2)', borderRadius: 0 }}>
                        <IconSearch size={16} stroke={1.5} color="var(--mantine-color-gray-4)" />
                        <Box
                            component="input"
                            value={term}
                            onChange={e => setTerm(e.currentTarget.value)}
                            onKeyDown={e => e.key === 'Escape' && setTerm('')}
                            placeholder="Buscar por número ou cliente…"
                            style={{ border: 'none', outline: 'none', background: 'transparent',
                                fontFamily: 'inherit', fontSize: 13, width: '100%' }}
                        />
                    </Group>
                    <Text fz={11} fw={800} c="gray.4" tt="uppercase" lts="1.5px" style={{ flexShrink: 0 }}>
                        {rows.length} {rows.length === 1 ? 'fatura' : 'faturas'}
                    </Text>
                </Group>

                {/* Header da tabela */}
                <Box bg="gray.1" style={{ display: 'grid', gridTemplateColumns: COLS, gap: 12,
                    alignItems: 'center', padding: '12px 24px',
                    borderBottom: '1px solid var(--mantine-color-gray-2)' }}>
                    <Text {...HEAD}>Fatura</Text>
                    <Text {...HEAD}>Status</Text>
                    <Text {...HEAD}>Valor</Text>
                    <Box />
                </Box>

                {/* Carregando: o skeleton tem a MESMA grade da tabela */}
                {loading && rows.length === 0 &&
                    Array.from({ length: 5 }, (_, i) => (
                        <Box key={i} style={{ display: 'grid', gridTemplateColumns: COLS, gap: 12,
                            alignItems: 'center', padding: '14px 24px',
                            borderBottom: '1px solid var(--mantine-color-gray-2)' }}>
                            <Skeleton height={14} width="60%" radius="0" />
                            <Skeleton height={14} width="50%" radius="0" />
                            <Skeleton height={14} width="40%" radius="0" />
                            <Box />
                        </Box>
                    ))}

                {/* Vazio: label uppercase + subtítulo, citando o termo quando houver */}
                {!loading && rows.length === 0 && (
                    <Stack align="center" gap={8} py={56}>
                        <Text fz={10} fw={800} c="gray.4" tt="uppercase" lts="1.5px">
                            {term ? 'Nenhum resultado' : 'Sem faturas'}
                        </Text>
                        <Text fz={12} c="gray.5" fs="italic">
                            {term ? `Nada encontrado para «${term}».` : 'Nada foi cobrado ainda.'}
                        </Text>
                    </Stack>
                )}

                {/* Linhas: a linha inteira é clicável; texto é o papel "dado" */}
                {rows.map((row, i) => (
                    <Box
                        key={row.id}
                        onClick={() => onOpen(row)}
                        style={{ display: 'grid', gridTemplateColumns: COLS, gap: 12,
                            alignItems: 'center', padding: '14px 24px', cursor: 'pointer',
                            transition: 'background 120ms ease',
                            borderBottom: i === rows.length - 1 ? 'none'
                                : '1px solid var(--mantine-color-gray-2)' }}
                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--mantine-color-gray-1)')}
                        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                    >
                        <Box miw={0}>
                            <Text fz={13} fw={700} c="gray.9" lineClamp={1}>{row.number}</Text>
                            <Text fz={12} c="gray.5" lineClamp={1}>{row.customer}</Text>
                        </Box>
                        <Text fz={13} c="gray.7">{row.status}</Text>
                        <Text fz={13} c="gray.7" ff="monospace">{row.amount}</Text>
                        <Text fz={13} c="gray.5" ta="center" aria-hidden>⋯</Text>
                    </Box>
                ))}
            </Card>
        </Box>
    )
}

import { CTABanner } from '@ciromaciel/components-kit'
import { IconArrowLeft } from '@tabler/icons-react'

export default function NotFoundPage() {
    return (
        <CTABanner
            titleOrder={1}
            subtitle="Erro 404"
            title="Esta página não existe."
            description="O link pode ter mudado de lugar."
            cta={{ label: 'Voltar ao início', href: '/', leftSection: <IconArrowLeft size={18} /> }}
        />
    )
}

import { LegalPrivacy } from '@ciromaciel/components-kit'

export default function PrivacyPage() {
    return <LegalPrivacy companyName="Acme Ltda" productName="o Acme Cloud" />
}

import { Box, SimpleGrid, Text } from '@mantine/core'
import { Section, CTAButton } from '@ciromaciel/components-kit'

export function IntegrationsGrid({ id, subtitle, title, items = [], cta, note, background = 'white' }) {
    return (
        <Section id={id} subtitle={subtitle} title={title} background={background}>
            <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
                {items.map((item, i) => (
                    <Box key={item.title || i}>
                        <Text fz="lg" fw={800} c="gray.9" mb="xs">{item.title}</Text>
                        <Text c="gray.6" lh={1.7}>{item.description}</Text>
                    </Box>
                ))}
            </SimpleGrid>
            {cta && <CTAButton {...cta} />}
            {note && <Text size="sm" c="gray.6" mt={40}>{note}</Text>}
        </Section>
    )
}