335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
import Link from "next/link";
|
|
import {
|
|
Settings,
|
|
GraduationCap,
|
|
HeadphonesIcon,
|
|
CreditCard,
|
|
Users,
|
|
FileSpreadsheet,
|
|
MapPin,
|
|
Phone as PhoneIcon,
|
|
Monitor,
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Building2,
|
|
ShoppingCart,
|
|
Briefcase,
|
|
Hammer,
|
|
Truck,
|
|
UtensilsCrossed,
|
|
} from "lucide-react";
|
|
|
|
export const metadata = {
|
|
title: "Services | AB Group LLC",
|
|
description:
|
|
"Expert QuickBooks consulting, setup, training, and support services. On-site, remote, and telephone support available.",
|
|
};
|
|
|
|
const services = [
|
|
{
|
|
icon: Settings,
|
|
title: "QuickBooks Setup & Installation",
|
|
description:
|
|
"Complete installation and configuration of QuickBooks Pro, Premier, Enterprise, and Point of Sale. We tailor the setup to your specific business needs and industry requirements.",
|
|
features: [
|
|
"Chart of accounts setup",
|
|
"User permissions configuration",
|
|
"Data migration assistance",
|
|
"Custom report creation",
|
|
],
|
|
},
|
|
{
|
|
icon: GraduationCap,
|
|
title: "Training Programs",
|
|
description:
|
|
"Comprehensive training sessions designed to help you and your team maximize your QuickBooks investment. From basics to advanced features.",
|
|
features: [
|
|
"One-on-one training",
|
|
"Group workshops",
|
|
"Role-specific training",
|
|
"Ongoing refresher courses",
|
|
],
|
|
},
|
|
{
|
|
icon: HeadphonesIcon,
|
|
title: "Consulting & Advisory",
|
|
description:
|
|
"Expert business consulting to streamline your accounting and financial processes. We analyze your needs and recommend the best solutions.",
|
|
features: [
|
|
"Needs analysis",
|
|
"Software selection",
|
|
"Process optimization",
|
|
"Best practices implementation",
|
|
],
|
|
},
|
|
{
|
|
icon: FileSpreadsheet,
|
|
title: "Payroll Services",
|
|
description:
|
|
"QuickBooks Payroll setup and support to help you manage employee compensation efficiently and stay compliant with tax requirements.",
|
|
features: [
|
|
"Payroll setup",
|
|
"Tax table updates",
|
|
"Direct deposit setup",
|
|
"Year-end reporting",
|
|
],
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Merchant Services",
|
|
description:
|
|
"Accept credit cards and process payments seamlessly integrated with your QuickBooks system for streamlined reconciliation.",
|
|
features: [
|
|
"Payment processing setup",
|
|
"QuickBooks integration",
|
|
"Competitive rates",
|
|
"Secure transactions",
|
|
],
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Ongoing Support",
|
|
description:
|
|
"Monthly support contracts to ensure your QuickBooks system runs smoothly. Get help when you need it with priority access to our experts.",
|
|
features: [
|
|
"Priority phone support",
|
|
"Remote troubleshooting",
|
|
"Software updates",
|
|
"Performance optimization",
|
|
],
|
|
},
|
|
];
|
|
|
|
const supportTypes = [
|
|
{
|
|
icon: MapPin,
|
|
title: "On-Site Support",
|
|
description:
|
|
"We come to your location for hands-on training, setup, and troubleshooting. Perfect for complex implementations and team training sessions.",
|
|
},
|
|
{
|
|
icon: PhoneIcon,
|
|
title: "Phone Support",
|
|
description:
|
|
"Quick answers to your questions with our telephone support. Ideal for urgent issues and quick consultations.",
|
|
},
|
|
{
|
|
icon: Monitor,
|
|
title: "Remote Access",
|
|
description:
|
|
"Secure remote access support for immediate assistance. We can connect to your system and resolve issues in real-time.",
|
|
},
|
|
];
|
|
|
|
const industries = [
|
|
{ icon: Building2, name: "Professional Services" },
|
|
{ icon: ShoppingCart, name: "Retail" },
|
|
{ icon: Briefcase, name: "Consulting" },
|
|
{ icon: Hammer, name: "Construction" },
|
|
{ icon: Truck, name: "Distribution" },
|
|
{ icon: UtensilsCrossed, name: "Hospitality" },
|
|
];
|
|
|
|
export default function ServicesPage() {
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="bg-zinc-900 text-white">
|
|
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
|
|
<div className="max-w-3xl">
|
|
<p className="text-red-500 font-semibold mb-4">Our Services</p>
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
|
Expert Solutions for Your{" "}
|
|
<span className="text-red-500">Business</span>
|
|
</h1>
|
|
<p className="mt-6 text-lg text-zinc-300">
|
|
As Intuit Solution Providers, we offer a comprehensive range of
|
|
services to help your business succeed. From initial setup to
|
|
ongoing support, we're here for you every step of the way.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Grid */}
|
|
<section className="bg-white py-16 md:py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
What We Offer
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
Comprehensive QuickBooks and accounting software services tailored
|
|
to your needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
{services.map((service) => (
|
|
<div
|
|
key={service.title}
|
|
className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
|
|
>
|
|
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
|
|
<service.icon className="h-6 w-6 text-red-600" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-zinc-900">
|
|
{service.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-zinc-600">
|
|
{service.description}
|
|
</p>
|
|
<ul className="mt-4 space-y-2">
|
|
{service.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-center gap-2 text-sm text-zinc-600"
|
|
>
|
|
<CheckCircle className="h-4 w-4 text-red-600 flex-shrink-0" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Support Types */}
|
|
<section className="bg-zinc-50 py-16 md:py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
Support Your Way
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
Choose the support method that works best for your business.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
|
{supportTypes.map((type) => (
|
|
<div key={type.title} className="text-center">
|
|
<div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<type.icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-zinc-900">
|
|
{type.title}
|
|
</h3>
|
|
<p className="mt-2 text-zinc-600">{type.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Industries */}
|
|
<section className="bg-white py-16 md:py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
Industries We Serve
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
Our experience spans across multiple industries, allowing us to
|
|
provide specialized solutions for your specific needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
|
{industries.map((industry) => (
|
|
<div
|
|
key={industry.name}
|
|
className="bg-zinc-50 rounded-xl p-6 text-center hover:bg-zinc-100 transition-colors"
|
|
>
|
|
<industry.icon className="h-8 w-8 text-red-600 mx-auto mb-3" />
|
|
<p className="text-sm font-medium text-zinc-700">
|
|
{industry.name}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-center text-zinc-500 mt-8">
|
|
And many more industries supported
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Process Section */}
|
|
<section className="bg-zinc-900 text-white py-16 md:py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h2 className="text-3xl font-semibold sm:text-4xl">How We Work</h2>
|
|
<p className="mt-4 text-lg text-zinc-400">
|
|
Our proven process ensures successful implementation and ongoing
|
|
success.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-4">
|
|
{[
|
|
{
|
|
step: "01",
|
|
title: "Discovery",
|
|
description:
|
|
"We analyze your business needs and current processes to understand your requirements.",
|
|
},
|
|
{
|
|
step: "02",
|
|
title: "Solution Design",
|
|
description:
|
|
"We recommend the right software and configuration for your specific situation.",
|
|
},
|
|
{
|
|
step: "03",
|
|
title: "Implementation",
|
|
description:
|
|
"We set up your system, migrate data, and configure everything to your specifications.",
|
|
},
|
|
{
|
|
step: "04",
|
|
title: "Training & Support",
|
|
description:
|
|
"We train your team and provide ongoing support to ensure long-term success.",
|
|
},
|
|
].map((item) => (
|
|
<div key={item.step} className="text-center">
|
|
<div className="text-4xl font-bold text-red-500 mb-4">
|
|
{item.step}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{item.title}</h3>
|
|
<p className="text-zinc-400">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="bg-red-600 py-12 md:py-16">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div className="text-center md:text-left">
|
|
<h2 className="text-2xl font-semibold text-white sm:text-3xl">
|
|
Ready to Get Started?
|
|
</h2>
|
|
<p className="mt-2 text-red-100">
|
|
Contact us today for a free consultation and needs analysis.
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex items-center justify-center px-6 py-3 bg-white text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors"
|
|
>
|
|
Get a Free Quote
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|