AboutCertificationSection
apps/www/src/components/AboutCertificationSection.astro · 40 lines · group Features & lists
Used by
Live sites: posexpert.se.
Samples 2
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>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 | |||
| showMoreText | string | |||
| showMorePath | string | '#' |
Source apps/www/src/components/AboutCertificationSection.astro @ gitt.one
---
import ChevronRight from 'astro-heroicons/outline/ChevronRight.astro';
interface Props {
title: string;
description?: string;
showMoreText?: string;
showMorePath?: string;
}
const { title, description, showMoreText, showMorePath = '#' } = Astro.props;
---
<div class="py-16 bg-white overflow-hidden lg:py-24">
<div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
<div class="relative">
<h2 class="text-center text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
{title}
</h2>
{
description && (
<p class="mt-4 max-w-3xl mx-auto text-center text-xl text-gray-500">{description}</p>
)
}
</div>
<slot />
{
showMoreText && (
<a
href={showMorePath}
class="mt-10 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600"
>
{showMoreText}{' '}
<ChevronRight class="flex-shrink-0 w-6 h-6 text-primary-100" aria-hidden="true" />
</a>
)
}
</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.