ServiceItem
apps/www/src/components/ServiceItem.astro · 44 lines · group Features & lists
Used by
Live sites: codeexpert.se.
Samples 2
<ServicesSection>Our competences
Web applications
Apps that launched via any browser/on any device and need internet to be used. High speed of development, but low performance
Mobile Applications
Cross-platform mobile apps for often usage, with notifications and high performance; possible to go offline, hardware friendly
CRM & ERP Systems
Tools to manage company’s relationships and interactions with customers, manage day-to-day activities of a business
Landing Pages
Web pages with content that provide a digital presence for a business, important for branding purposes
FinTech Applications
Applications designed to automate or digitize financial operations: web-payments, mobile payments, P2P/B2C, EMV, PSP, PCI, NFC
Soft- & Hardware Integration
Software to enable processing data from special hardware and to interact with them using USB, Bluetooth, NFC
Enterprise automation systems
Software to automate manual or repetitive business processes using BPML, SOA, EAI, ETL, OAuth
IoT (Internet of Things)
Network of devices connected to the Internet and able to interact with each other and humans in real time
MDX of this sample
import GlobeAltIcon from 'astro-heroicons/solid/GlobeAlt.astro';
import DeviceMobileIcon from 'astro-heroicons/solid/DevicePhoneMobile.astro';
import ServerIcon from 'astro-heroicons/solid/Server.astro';
import CodeIcon from 'astro-heroicons/solid/CodeBracket.astro';
import DesktopComputerIcon from 'astro-heroicons/solid/ComputerDesktop.astro';
import InboxIcon from 'astro-heroicons/solid/Inbox.astro';
import CursorClickIcon from 'astro-heroicons/solid/CursorArrowRays.astro';
import WifiIcon from 'astro-heroicons/solid/Wifi.astro';
<ServicesSection title="Our competences" description="">
<ServiceItem
name="Web applications"
description="Apps that launched via any browser/on any device and need internet to be used. High speed of development, but low performance"
Icon={GlobeAltIcon}
/>
<ServiceItem
name="Mobile Applications"
description="Cross-platform mobile apps for often usage, with notifications and high performance; possible to go offline, hardware friendly"
Icon={DeviceMobileIcon}
/>
<ServiceItem
name="CRM & ERP Systems"
description="Tools to manage company’s relationships and interactions with customers, manage day-to-day activities of a business"
Icon={ServerIcon}
/>
<ServiceItem
name="Landing Pages"
description="Web pages with content that provide a digital presence for a business, important for branding purposes"
Icon={CodeIcon}
/>
<ServiceItem
name="FinTech Applications"
description="Applications designed to automate or digitize financial operations: web-payments, mobile payments, P2P/B2C, EMV, PSP, PCI, NFC"
Icon={DesktopComputerIcon}
/>
<ServiceItem
name="Soft- & Hardware Integration"
description="Software to enable processing data from special hardware and to interact with them using USB, Bluetooth, NFC"
Icon={InboxIcon}
/>
<ServiceItem
name="Enterprise automation systems"
description="Software to automate manual or repetitive business processes using BPML, SOA, EAI, ETL, OAuth"
Icon={CursorClickIcon}
/>
<ServiceItem
name="IoT (Internet of Things)"
description="Network of devices connected to the Internet and able to interact with each other and humans in real time"
Icon={WifiIcon}
/>
</ServicesSection><ServiceSection>Services
Fast
We develop solutions with minimal hardware requirements to speed up installation and deployment. Our software systems that can handle a high volume of transactions without slowing down.
Reliable
We offer fast and reliable online and offline functionality with data backup and recovery options, so you can retrieve your critical data in case of system failures.
Secure
We develop solutions that use end-to-end encryption protocols to safeguard transaction data with a firewall and anti-malware protection that can detect and prevent cyber threats
MDX of this sample
import PhoneIcon from 'astro-heroicons/outline/Phone.astro';
import SupportIcon from 'astro-heroicons/outline/Lifebuoy.astro';
import NewspaperIcon from 'astro-heroicons/outline/Newspaper.astro';
<ServiceSection>
<ServiceItem
name="Fast"
description="We develop solutions with minimal hardware requirements to speed up installation and deployment. Our software systems that can handle a high volume of transactions without slowing down."
Icon={PhoneIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
<ServiceItem
name="Reliable"
description="We offer fast and reliable online and offline functionality with data backup and recovery options, so you can retrieve your critical data in case of system failures."
Icon={SupportIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
<ServiceItem
name="Secure"
description="We develop solutions that use end-to-end encryption protocols to safeguard transaction data with a firewall and anti-malware protection that can detect and prevent cyber threats"
Icon={NewspaperIcon}
buttonText="Contact us"
buttonPath="/#contacts"
/>
</ServiceSection>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| name | string | yes | ||
| description | string | yes | ||
| Icon | any | |||
| buttonText | string | |||
| buttonPath | string |
Source apps/www/src/components/ServiceItem.astro @ gitt.one
---
interface Props {
name: string;
description: string;
Icon?: any;
buttonText?: string;
buttonPath?: string;
}
const { name, description, Icon, buttonText, buttonPath } = Astro.props;
---
<li class="list-none pt-6">
<div class="h-full flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
{
Icon && (
<div>
<span class="inline-flex items-center justify-center rounded-md bg-primary-700 p-3 shadow-lg">
<Icon class="h-6 w-6 text-white" aria-hidden="true" />
</span>
</div>
)
}
<h3 class="mt-8 text-lg font-medium tracking-tight text-primary-800">
{name}
</h3>
<p class="mt-5 text-base text-gray-500">{description}</p>
{
buttonText && buttonPath && (
<p class="mt-6">
<a
href={buttonPath}
class="text-base font-medium text-primary-700 hover:text-primary-600"
>
{buttonText}
<span aria-hidden="true"> →</span>
</a>
</p>
)
}
</div>
</div>
</li>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.