AboutCertificationItem
apps/www/src/components/AboutCertificationItem.astro · 61 lines · group Features & lists
Used by
Live sites: posexpert.se.
Samples 2
<AboutCertificationSection>Certification Project
Posexpert proceeds certification process for our new products and products we develop for our customers
Global tasks of the certification project:
Documentation and Requirements Analysis
- We thoroughly understand the updated legislation on control systems
Design
- We prepare the design and develop solutions for the information system to meet legislative requirements
Implementation and Testing
- We implement the code, prepare and conduct system testing
Documentation
- We prepare a document package for product certification
MDX of this sample
import ScaleIcon from 'astro-heroicons/outline/Scale.astro';
import DocumentSearchIcon from 'astro-heroicons/outline/DocumentMagnifyingGlass.astro';
import CodeIcon from 'astro-heroicons/outline/CodeBracket.astro';
import ClipboardCheckIcon from 'astro-heroicons/outline/ClipboardDocumentCheck.astro';
<AboutCertificationSection
title="Certification Project"
description="Posexpert proceeds certification process for our new products and products we develop for our customers"
showMoreText="Know more about certification"
showMorePath="/certification/"
>
<AboutCertificationItem
title="Global tasks of the certification project:"
description=""
imageName="pos_pos.jpg"
features={[
{ title: 'Documentation and Requirements Analysis', description: 'We thoroughly understand the updated legislation on control systems', icon: ScaleIcon },
{ title: 'Design', description: 'We prepare the design and develop solutions for the information system to meet legislative requirements', icon: DocumentSearchIcon },
{ title: 'Implementation and Testing', description: 'We implement the code, prepare and conduct system testing', icon: CodeIcon },
{ title: 'Documentation', description: 'We prepare a document package for product certification', icon: ClipboardCheckIcon },
]}
/>
</AboutCertificationSection><AboutCertificationSection>Certification Project
Posexpert proceeds certification process for our new products and products we develop for our customers
Global tasks of the certification project:
Documentation and Requirements Analysis
- We thoroughly understand the updated legislation on control systems
Design
- We prepare the design and develop solutions for the information system to meet legislative requirements
Implementation and Testing
- We implement the code, prepare and conduct system testing
Documentation
- We prepare a document package for product certification
MDX of this sample
import ScaleIcon from 'astro-heroicons/outline/Scale.astro';
import DocumentSearchIcon from 'astro-heroicons/outline/DocumentMagnifyingGlass.astro';
import CodeIcon from 'astro-heroicons/outline/CodeBracket.astro';
import ClipboardCheckIcon from 'astro-heroicons/outline/ClipboardDocumentCheck.astro';
<AboutCertificationSection
title="Certification Project"
description="Posexpert proceeds certification process for our new products and products we develop for our customers"
showMoreText="Know more about certification"
showMorePath="/certification/"
>
<AboutCertificationItem
title="Global tasks of the certification project:"
description=""
imageName="pos_pos.jpg"
features={[
{ title: 'Documentation and Requirements Analysis', description: 'We thoroughly understand the updated legislation on control systems', icon: ScaleIcon },
{ title: 'Design', description: 'We prepare the design and develop solutions for the information system to meet legislative requirements', icon: DocumentSearchIcon },
{ title: 'Implementation and Testing', description: 'We implement the code, prepare and conduct system testing', icon: CodeIcon },
{ title: 'Documentation', description: 'We prepare a document package for product certification', icon: ClipboardCheckIcon },
]}
/>
</AboutCertificationSection>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | yes | ||
| description | string | |||
| features | Feature[] | yes | ||
| imageName | string |
Source apps/www/src/components/AboutCertificationItem.astro @ gitt.one
---
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
interface Feature {
title: string;
description: string;
icon?: any;
}
interface Props {
title: string;
description?: string;
features: Feature[];
imageName?: string;
}
const { title, description, features, imageName } = Astro.props;
const image = imageName ? await resolveImage(imageName) : undefined;
---
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
<div class="relative">
<h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">{title}</h3>
{description && <p class="mt-3 text-lg text-gray-500">{description}</p>}
<dl class="mt-10 space-y-10">
{
features.map((item) => {
const Icon = item.icon;
return (
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 bg-gray-800 rounded-xl shadow-lg text-white">
{Icon && <Icon class="h-6 w-6" aria-hidden="true" />}
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">{item.title}</p>
</dt>
<dd class="mt-2 ml-16 text-base text-gray-500">{item.description}</dd>
</div>
);
})
}
</dl>
</div>
{
image && (
<div class="mt-10 -mx-4 relative lg:mt-0" aria-hidden="true">
<Image
src={image}
alt={title}
widths={[400, 840]}
class="rounded-lg shadow-lg object-cover object-center w-full max-h-80 h-full"
/>
</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.