98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
import './services-feature.css';
|
|
|
|
export type Service = {
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
const services: Service[] = [
|
|
{
|
|
title: 'Custom Web Design',
|
|
description:
|
|
'Tailored layouts and branding that reflect your business and engage your audience from the first visit.',
|
|
},
|
|
{
|
|
title: 'Web Development',
|
|
description:
|
|
'Fast, reliable sites built with modern frameworks—scalable architecture that grows with your company.',
|
|
},
|
|
{
|
|
title: 'E-commerce',
|
|
description:
|
|
'Online stores with smooth checkout, inventory management, and payment integrations that convert.',
|
|
},
|
|
{
|
|
title: 'Performance & SEO',
|
|
description:
|
|
'Optimised load times, accessibility, and search visibility so customers can find and use your site.',
|
|
},
|
|
{
|
|
title: 'Hosting & Maintenance',
|
|
description:
|
|
'Secure hosting, updates, backups, and monitoring so your site stays online and up to date.',
|
|
},
|
|
{
|
|
title: 'APIs & Integrations',
|
|
description:
|
|
'Connect CRMs, booking systems, analytics, and third-party tools into one cohesive workflow.',
|
|
},
|
|
];
|
|
|
|
function ServiceFeatureCard({ title, description }: Service) {
|
|
return (
|
|
<article className="service-feature">
|
|
<div className="service-feature-body">
|
|
<div className="service-feature-icon" aria-hidden="true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
|
/>
|
|
</svg>
|
|
</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 businesses of every size.',
|
|
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>
|
|
);
|
|
}
|