106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { Cpu, Database, Cloud, Shield, Users, TrendingUp } from "lucide-react";
|
||
|
|
import { Button } from "@/components/button";
|
||
|
|
|
||
|
|
export const metadata = {
|
||
|
|
title: "Services",
|
||
|
|
description: "Sample everything that Techaro has to offer",
|
||
|
|
};
|
||
|
|
|
||
|
|
const ServiceCard = ({
|
||
|
|
icon: Icon,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
}: {
|
||
|
|
icon: any;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
}) => (
|
||
|
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||
|
|
<div className="px-4 py-5 sm:p-6">
|
||
|
|
<Icon className="h-8 w-8 text-blue-500 mb-4" />
|
||
|
|
<h3 className="text-lg font-medium text-gray-900">{title}</h3>
|
||
|
|
<p className="mt-2 text-base text-gray-500">{description}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const ServicesPage = () => {
|
||
|
|
const services = [
|
||
|
|
{
|
||
|
|
icon: Cpu,
|
||
|
|
title: "AI and Machine Learning",
|
||
|
|
description:
|
||
|
|
"Leverage cutting-edge AI technologies to automate processes, gain insights, and drive innovation in your business.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Database,
|
||
|
|
title: "Data Analytics",
|
||
|
|
description:
|
||
|
|
"Transform your raw data into actionable insights with our advanced analytics solutions.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Cloud,
|
||
|
|
title: "Cloud Migration",
|
||
|
|
description:
|
||
|
|
"Seamlessly transition your infrastructure and applications to the cloud for improved scalability and efficiency.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Shield,
|
||
|
|
title: "Cybersecurity",
|
||
|
|
description:
|
||
|
|
"Protect your digital assets with our comprehensive cybersecurity services and solutions.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Users,
|
||
|
|
title: "Digital Transformation",
|
||
|
|
description:
|
||
|
|
"Modernize your business processes and customer experiences with our digital transformation strategies.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: TrendingUp,
|
||
|
|
title: "IT Strategy Consulting",
|
||
|
|
description:
|
||
|
|
"Align your technology investments with your business goals to maximize ROI and drive growth.",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-gray-100 min-h-screen">
|
||
|
|
<header className="bg-white shadow">
|
||
|
|
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900">Our Services</h1>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||
|
|
<div className="px-4 py-6 sm:px-0">
|
||
|
|
<div className="text-center mb-12">
|
||
|
|
<h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
||
|
|
Comprehensive IT Solutions for Canadian Businesses
|
||
|
|
</h2>
|
||
|
|
<p className="mt-4 text-xl text-gray-500">
|
||
|
|
At Techaro Computing Canada, we offer a wide range of services to
|
||
|
|
help your business thrive in the digital age.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{services.map((service, index) => (
|
||
|
|
<ServiceCard key={index} {...service} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="mt-12 text-center">
|
||
|
|
<Link href="/contact" passHref>
|
||
|
|
<Button className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition duration-300">
|
||
|
|
Contact Us for a Consultation
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ServicesPage;
|