354 lines
13 KiB
TypeScript
354 lines
13 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
import AnimatedBackground from "../components/AnimatedBackground";
|
|
import Button from "../components/Button";
|
|
|
|
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="relative animated-gradient-bg text-white overflow-hidden">
|
|
<AnimatedBackground variant="dark" orbCount={5} />
|
|
<div className="relative 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-400 font-semibold mb-4 animate-fade-in">
|
|
Our Services
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
|
|
Expert Solutions for Your{" "}
|
|
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
|
|
Business
|
|
</span>
|
|
</h1>
|
|
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
|
|
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>
|
|
<div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
|
|
</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, index) => (
|
|
<div
|
|
key={service.title}
|
|
className="group bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-xl hover:shadow-red-500/5 hover:-translate-y-2 transition-all duration-300"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
|
|
<service.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
|
|
{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, index) => (
|
|
<div
|
|
key={type.title}
|
|
className="text-center group"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<div className="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-red-500/20 group-hover:shadow-red-500/40 group-hover:scale-110 transition-all duration-300">
|
|
<type.icon className="h-10 w-10 text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
|
|
{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, index) => (
|
|
<div
|
|
key={industry.name}
|
|
className="group bg-zinc-50 rounded-xl p-6 text-center hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:shadow-lg hover:shadow-red-500/20 hover:-translate-y-1 transition-all duration-300 cursor-pointer"
|
|
style={{ animationDelay: `${index * 50}ms` }}
|
|
>
|
|
<industry.icon className="h-8 w-8 text-red-600 mx-auto mb-3 group-hover:text-white transition-colors duration-300" />
|
|
<p className="text-sm font-medium text-zinc-700 group-hover:text-white transition-colors duration-300">
|
|
{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="relative animated-gradient-bg text-white py-16 md:py-24 overflow-hidden">
|
|
<AnimatedBackground variant="dark" orbCount={4} />
|
|
<div className="relative 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, index) => (
|
|
<div
|
|
key={item.step}
|
|
className="text-center group"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<div className="text-5xl font-bold text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
{item.step}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 group-hover:text-red-400 transition-colors duration-300">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-zinc-400">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
|
|
<AnimatedBackground variant="red" orbCount={4} />
|
|
<div className="relative 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>
|
|
<Button
|
|
href="/contact"
|
|
variant="secondary"
|
|
className="bg-white text-red-600 hover:bg-red-50 border-transparent"
|
|
>
|
|
Get a Free Quote
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|