92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import './services-feature.css';
|
||
import { ShoppingCart, Workflow, Server, CodeXml, Plug, Globe } from 'lucide-react';
|
||
|
||
export type Service = {
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
description: string;
|
||
};
|
||
|
||
const services: Service[] = [
|
||
{
|
||
title: 'Company Automation',
|
||
icon: <Workflow />,
|
||
description:
|
||
'Streamline operations and boost efficiency with custom automation solutions tailored to your business needs.',
|
||
},
|
||
{
|
||
title: 'Web Development',
|
||
icon: <CodeXml />,
|
||
description:
|
||
'Fast, reliable sites built with modern frameworks—scalable architecture that grows with your company.',
|
||
},
|
||
{
|
||
title: 'E-commerce',
|
||
icon: <ShoppingCart />,
|
||
description:
|
||
'Online stores with smooth checkout, inventory management, and payment integrations that convert. Options inclide Shopify, WooCommerce, and custom solutions.',
|
||
},
|
||
{
|
||
title: 'Custom Plugins & Extensions',
|
||
icon: <Plug />,
|
||
description:
|
||
'Extend your website’s functionality with custom plugins and extensions tailored to your specific needs.',
|
||
},
|
||
{
|
||
title: 'Hosting & Maintenance',
|
||
icon: <Server />,
|
||
description:
|
||
'Secure hosting, updates, emails, backups, and monitoring so your site stays online and up to date.',
|
||
},
|
||
{
|
||
title: 'APIs & Integrations',
|
||
icon: <Globe />,
|
||
description:
|
||
'Connect CRMs, booking systems, analytics, and third-party tools into one cohesive workflow.',
|
||
},
|
||
];
|
||
|
||
function ServiceFeatureCard({ title, icon, description }: Service) {
|
||
return (
|
||
<article className="service-feature">
|
||
<div className="service-feature-body">
|
||
<div className="service-feature-icon" aria-hidden="true">
|
||
{icon}
|
||
</div>
|
||
<h3 className="service-feature-title">{title}</h3>
|
||
<p className="service-feature-description">{description}</p>
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
type ServicesFeatureProps = {
|
||
heading?: string;
|
||
subheading?: string;
|
||
items?: Service[];
|
||
};
|
||
|
||
export default function ServicesFeature({
|
||
heading = 'What we offer',
|
||
subheading = 'End-to-end web solutions for small to medium-sized businesses ',
|
||
items = services,
|
||
}: ServicesFeatureProps) {
|
||
return (
|
||
<section className="services-feature w-full">
|
||
<header className="mb-10 max-w-2xl">
|
||
<h2 className="mb-3 text-4xl font-bold tracking-tight text-heading md:text-5xl">
|
||
{heading}
|
||
</h2>
|
||
<p className="text-lg text-body lg:text-xl">{subheading}</p>
|
||
</header>
|
||
<ul className="services-feature-grid">
|
||
{items.map((service) => (
|
||
<li key={service.title} className="list-none">
|
||
<ServiceFeatureCard {...service} />
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</section>
|
||
);
|
||
}
|