GradientFeatureItem

apps/www/src/components/GradientFeatureItem.astro · 26 lines · group Features & lists

Used by

Live sites: pages.gitt.one.

Samples 1

pages.gitt.one/shown inside <GradientFeatureSection>

The technology inside

Boring, proven building blocks — assembled into a production line

Jamstack

JavaScript, APIs and Markup: pages are pre-rendered at build time and served as static files — fast, always on, nothing to hack

Astro + Tailwind

An open-source content framework that ships zero JavaScript by default, and ready-made design concepts — fonts, spacing, components — instead of a graphic designer on the project

GitLab-flavored Markdown

One rendering engine everywhere: a page looks the same in the repository and on the public site — with Mermaid and PlantUML diagrams

Docker portability

A site is a repository plus a standard image. Hosting is a detail, not a cage — the same image runs on any infrastructure

GitLab UI as the CMS

The web editor and Web IDE are the admin panel: no separate CMS to install, host, update and defend from attacks

CI/CD with staging

Every change builds an exact replica of the future site to discuss before release — content managers see real feedback on drafts

AI-ready content

Semantically typed data is a substrate for agents: AI edits and generates content without a programmer and without breaking the build

Built for speed

Minimum JavaScript, maximum pre-rendering: Lighthouse 100 is the acceptance target for every produced site, not a nice-to-have

MDX of this sample
import LightningBoltIcon from 'astro-heroicons/outline/Bolt.astro';
import TemplateIcon from 'astro-heroicons/outline/RectangleGroup.astro';
import DocumentTextIcon from 'astro-heroicons/outline/DocumentText.astro';
import CubeIcon from 'astro-heroicons/outline/Cube.astro';
import PencilAltIcon from 'astro-heroicons/outline/PencilSquare.astro';
import RefreshIcon from 'astro-heroicons/outline/ArrowPath.astro';
import ChipIcon from 'astro-heroicons/outline/CpuChip.astro';
import SparklesIcon from 'astro-heroicons/outline/Sparkles.astro';

<GradientFeatureSection
  title="The technology inside"
  description="Boring, proven building blocks — assembled into a production line"
>
  <GradientFeatureItem
    title="Jamstack"
    description="JavaScript, APIs and Markup: pages are pre-rendered at build time and served as static files — fast, always on, nothing to hack"
    Icon={LightningBoltIcon}
  />
  <GradientFeatureItem
    title="Astro + Tailwind"
    description="An open-source content framework that ships zero JavaScript by default, and ready-made design concepts — fonts, spacing, components — instead of a graphic designer on the project"
    Icon={TemplateIcon}
  />
  <GradientFeatureItem
    title="GitLab-flavored Markdown"
    description="One rendering engine everywhere: a page looks the same in the repository and on the public site — with Mermaid and PlantUML diagrams"
    Icon={DocumentTextIcon}
  />
  <GradientFeatureItem
    title="Docker portability"
    description="A site is a repository plus a standard image. Hosting is a detail, not a cage — the same image runs on any infrastructure"
    Icon={CubeIcon}
  />
  <GradientFeatureItem
    title="GitLab UI as the CMS"
    description="The web editor and Web IDE are the admin panel: no separate CMS to install, host, update and defend from attacks"
    Icon={PencilAltIcon}
  />
  <GradientFeatureItem
    title="CI/CD with staging"
    description="Every change builds an exact replica of the future site to discuss before release — content managers see real feedback on drafts"
    Icon={RefreshIcon}
  />
  <GradientFeatureItem
    title="AI-ready content"
    description="Semantically typed data is a substrate for agents: AI edits and generates content without a programmer and without breaking the build"
    Icon={ChipIcon}
  />
  <GradientFeatureItem
    title="Built for speed"
    description="Minimum JavaScript, maximum pre-rendering: Lighthouse 100 is the acceptance target for every produced site, not a nice-to-have"
    Icon={SparklesIcon}
  />
</GradientFeatureSection>

Props

NameTypeRequiredDefaultDescription
titlestringyes
descriptionstringyes
Iconany

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

---
interface Props {
  title: string;
  description: string;
  Icon?: any;
}

const { title, description, Icon } = Astro.props;
---

<div>
  {
    Icon && (
      <div>
        <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white/10">
          <Icon class="h-6 w-6 text-white" aria-hidden="true" />
        </span>
      </div>
    )
  }
  <div class="mt-6">
    <h3 class="text-lg font-medium text-white">{title}</h3>
    <p class="mt-2 text-base text-primary-200">{description}</p>
  </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.