GradientFeatureItem
apps/www/src/components/GradientFeatureItem.astro · 26 lines · group Features & lists
Used by
- pages.gitt.one / × 16
Live sites: pages.gitt.one.
Samples 1
<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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | yes | ||
| description | string | yes | ||
| Icon | any |
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.