landing page

a complete landing page template demonstrating meridian’s industrial aesthetic for marketing sites.

live demo

v0.1.0 released

build interfaces that mean business

an industrial-grade component library for developers who value function over form. sharp edges. monospace type. zero compromise.

features

zero runtime

pure CSS styling

no JavaScript overhead. styles applied via data attributes for maximum performance.

typescript first

full type safety

complete type definitions with JSDoc documentation for every component.

accessible

ARIA compliant

proper focus states, keyboard navigation, and screen reader support built in.

ready to build?

get started in under 5 minutes

code

function LandingPage() {
  return (
    <main>
      {/* hero */}
      <section style={{ textAlign: 'center', padding: '4rem 1rem' }}>
        <Badge variant="info">v0.1.0 released</Badge>
        <Heading level={1}>build interfaces that mean business</Heading>
        <Text size="lg" muted>
          an industrial-grade component library for developers
        </Text>
        <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
          <Button intent="primary">get started</Button>
          <Button intent="secondary">view docs</Button>
        </div>
      </section>

      <Separator />

      {/* features */}
      <section style={{ padding: '2rem 1rem' }}>
        <Heading level={2}>features</Heading>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
          <Card>
            <CardHeader>
              <CardTitle>zero runtime</CardTitle>
              <CardDescription>pure CSS styling</CardDescription>
            </CardHeader>
            <CardContent>
              <Text size="sm">no JavaScript overhead.</Text>
            </CardContent>
          </Card>
          {/* more cards... */}
        </div>
      </section>

      <Separator />

      {/* cta */}
      <section style={{ textAlign: 'center', padding: '4rem 1rem' }}>
        <Heading level={2}>ready to build?</Heading>
        <Button intent="primary">install now</Button>
      </section>
    </main>
  );
}