Gitt One Pages
Open menu

StatsSection

apps/www/src/components/StatsSection.astro · 50 lines · group Stats

Used by

Live sites: pages.gitt.one.

Samples 1

pages.gitt.one/
Industrialized, not handcrafted

IN NUMBERS

Industrialized, not handcrafted

Every site produced by the technology shares the same conveyor: the same builder images, the same deployment pipeline, the same quality bar. Knowledge doesn't get lost with a departed contractor — it is encoded in conventions.

>9production websites are built and running on Gitt One Pages

~50 MBproduction image nginx plus your entire static website

hoursto the first site a new website is just a new content repository

100Lighthouse score is the acceptance target for produced sites

MDX of this sample
<StatsSection
  subTitle="IN NUMBERS"
  title="Industrialized, not handcrafted"
  description="Every site produced by the technology shares the same conveyor: the same builder images, the same deployment pipeline, the same quality bar. Knowledge doesn't get lost with a departed contractor — it is encoded in conventions."
  imgPath="team.jpg"
>
  <StatsItem stat=">9" emphasis="production websites" rest="are built and running on Gitt One Pages" />
  <StatsItem stat="~50 MB" emphasis="production image" rest="nginx plus your entire static website" />
  <StatsItem stat="hours" emphasis="to the first site" rest="a new website is just a new content repository" />
  <StatsItem stat="100" emphasis="Lighthouse score" rest="is the acceptance target for produced sites" />
</StatsSection>

Props

NameTypeRequiredDefaultDescription
subTitlestringyes
titlestringyes
descriptionstringyes
imgPathstringyes

Source apps/www/src/components/StatsSection.astro @ gitt.one

---
import { Image } from 'astro:assets';

import { resolveImage } from '../lib/images';

interface Props {
  subTitle: string;
  title: string;
  description: string;
  imgPath: string;
}

const { subTitle, title, description, imgPath } = Astro.props;
const image = await resolveImage(imgPath);
---

<div class="relative bg-gray-900">
  <div class="h-80 absolute inset-x-0 bottom-0 xl:top-0 xl:h-full">
    <div class="h-full w-full xl:grid xl:grid-cols-2">
      <div class="h-full xl:relative xl:col-start-2">
        <Image
          src={image}
          alt={title}
          widths={[400, 840]}
          class="absolute inset-0 h-full w-full max-w-none object-cover opacity-25"
        />
        <div
          aria-hidden="true"
          class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-900 xl:inset-y-0 xl:left-0 xl:h-full xl:w-32 xl:bg-gradient-to-r"
        >
        </div>
      </div>
    </div>
  </div>
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 xl:grid xl:grid-cols-2 xl:grid-flow-col-dense xl:gap-x-8">
    <div class="relative pt-12 pb-64 sm:pt-24 sm:pb-64 xl:col-start-1 xl:pb-24">
      <h2 class="text-sm font-semibold tracking-wide uppercase">
        <span class="bg-gradient-to-r from-primary-300 to-primary-alt-400 bg-clip-text text-transparent">
          {subTitle}
        </span>
      </h2>
      <p class="mt-3 text-3xl font-extrabold text-white">{title}</p>
      <p class="mt-5 text-lg text-gray-300">{description}</p>
      <div class="mt-12 grid grid-cols-1 gap-y-12 gap-x-6 sm:grid-cols-2">
        <slot />
      </div>
    </div>
  </div>
</div>

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.