335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Building2,
|
|
Users,
|
|
ShieldCheck,
|
|
BarChart3,
|
|
Package,
|
|
CreditCard,
|
|
Layers,
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Star,
|
|
Zap,
|
|
Globe,
|
|
Phone,
|
|
} from "lucide-react";
|
|
import AnimatedBackground from "../components/AnimatedBackground";
|
|
import Button from "../components/Button";
|
|
|
|
const solutions = [
|
|
{
|
|
id: "enterprise",
|
|
featured: true,
|
|
name: "QuickBooks Enterprise",
|
|
tagline: "For Growing Businesses",
|
|
description:
|
|
"The most powerful QuickBooks product, designed for larger, growing businesses that need advanced features, greater capacity, and robust controls.",
|
|
features: [
|
|
"Up to 30 simultaneous users",
|
|
"Advanced inventory management",
|
|
"Over 200 integrations available",
|
|
"115+ role-based permissions",
|
|
"Always-on audit trail",
|
|
"Priority Circle support",
|
|
],
|
|
highlights: [
|
|
{
|
|
icon: Users,
|
|
title: "Scale to 30 Users",
|
|
description: "Grow your team without switching systems",
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: "Advanced Inventory",
|
|
description: "Track hundreds of thousands of items",
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "Enhanced Security",
|
|
description: "Granular user permissions and audit trails",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "pro-premier",
|
|
featured: false,
|
|
name: "QuickBooks Pro & Premier",
|
|
tagline: "For Small Businesses",
|
|
description:
|
|
"Powerful accounting solutions for small businesses. Pro handles the basics while Premier adds industry-specific features and reporting.",
|
|
features: [
|
|
"Easy invoicing and billing",
|
|
"Expense tracking",
|
|
"Financial reporting",
|
|
"Multi-user support (up to 5)",
|
|
"Industry-specific editions (Premier)",
|
|
"Inventory tracking",
|
|
],
|
|
highlights: [
|
|
{
|
|
icon: Zap,
|
|
title: "Quick Setup",
|
|
description: "Get started in minutes, not days",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Smart Reports",
|
|
description: "120+ built-in reports for insights",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Anywhere Access",
|
|
description: "Remote access solutions available",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "pos",
|
|
featured: false,
|
|
name: "QuickBooks Point of Sale",
|
|
tagline: "For Retail Businesses",
|
|
description:
|
|
"Complete retail management solution that replaces your cash register and integrates seamlessly with QuickBooks for automatic reconciliation.",
|
|
features: [
|
|
"Integrated payment processing",
|
|
"Real-time inventory tracking",
|
|
"Customer management",
|
|
"Employee management",
|
|
"Multi-store support",
|
|
"Hardware bundles available",
|
|
],
|
|
highlights: [
|
|
{
|
|
icon: CreditCard,
|
|
title: "Accept All Payments",
|
|
description: "Cards, cash, checks, and gift cards",
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: "Inventory Control",
|
|
description: "Know what's in stock in real-time",
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "QuickBooks Sync",
|
|
description: "Automatic data sync, no double entry",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const integrations = [
|
|
"Salesforce CRM",
|
|
"Microsoft Excel",
|
|
"TrueCommerce EDI",
|
|
"E-commerce Platforms",
|
|
"Payroll Services",
|
|
"Time Tracking",
|
|
"Inventory Management",
|
|
"Custom Solutions",
|
|
];
|
|
|
|
export default function SolutionsPage() {
|
|
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 Solutions
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
|
|
Find the Right{" "}
|
|
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
|
|
QuickBooks
|
|
</span>{" "}
|
|
for Your Business
|
|
</h1>
|
|
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
|
|
From small startups to growing enterprises, we help you choose and
|
|
implement the perfect QuickBooks solution. Save thousands compared
|
|
to enterprise alternatives.
|
|
</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>
|
|
|
|
{/* Solutions */}
|
|
{solutions.map((solution, index) => (
|
|
<section
|
|
key={solution.id}
|
|
className={`relative ${index % 2 === 0 ? "bg-white" : "bg-zinc-50"}`}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24 lg:px-8">
|
|
{solution.featured && (
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="flex items-center gap-1 px-3 py-1 bg-gradient-to-r from-red-500 to-red-600 rounded-full">
|
|
<Star className="h-4 w-4 text-white fill-white" />
|
|
<span className="text-xs font-semibold text-white uppercase tracking-wide">
|
|
Most Popular
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
|
|
<div>
|
|
<p className="text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text font-medium mb-2">
|
|
{solution.tagline}
|
|
</p>
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
{solution.name}
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
{solution.description}
|
|
</p>
|
|
|
|
<ul className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{solution.features.map((feature, idx) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-center gap-2 group"
|
|
style={{ animationDelay: `${idx * 50}ms` }}
|
|
>
|
|
<CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0 group-hover:scale-110 transition-transform duration-300" />
|
|
<span className="text-sm text-zinc-700">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="mt-8">
|
|
<Button href="/contact">
|
|
Get a Quote
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6">
|
|
{solution.highlights.map((highlight, idx) => (
|
|
<div
|
|
key={highlight.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-1 transition-all duration-300"
|
|
style={{ animationDelay: `${idx * 100}ms` }}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
|
|
<highlight.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
|
|
{highlight.title}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-600">
|
|
{highlight.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
{/* Integrations */}
|
|
<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">
|
|
Integrations & Add-ons
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-400">
|
|
QuickBooks works with over 200 compatible business applications.
|
|
We can help you integrate the tools you need.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
{integrations.map((integration, index) => (
|
|
<div
|
|
key={integration}
|
|
className="group bg-white/5 backdrop-blur-sm rounded-lg p-4 text-center hover:bg-gradient-to-br hover:from-red-500/20 hover:to-red-700/20 border border-white/10 hover:border-red-500/30 transition-all duration-300 cursor-pointer"
|
|
style={{ animationDelay: `${index * 50}ms` }}
|
|
>
|
|
<p className="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors duration-300">
|
|
{integration}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-center text-zinc-500 mt-8">
|
|
And 200+ more integrations available
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Comparison CTA */}
|
|
<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="relative group">
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-3xl opacity-10 blur-xl group-hover:opacity-20 transition-opacity duration-300" />
|
|
<div className="relative bg-gradient-to-br from-zinc-100 to-zinc-50 rounded-2xl p-8 md:p-12 text-center border border-zinc-200">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-red-500/20">
|
|
<Building2 className="h-8 w-8 text-white" />
|
|
</div>
|
|
<h2 className="text-2xl font-semibold text-zinc-900 sm:text-3xl">
|
|
Not Sure Which Solution is Right for You?
|
|
</h2>
|
|
<p className="mt-4 text-zinc-600 max-w-2xl mx-auto">
|
|
Let our experts analyze your business needs and recommend the
|
|
perfect QuickBooks solution. We'll help you choose the
|
|
right edition and configure it for your specific requirements.
|
|
</p>
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button href="/contact">
|
|
Schedule a Free Consultation
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
<Button href="tel:3053878582" variant="secondary">
|
|
<Phone className="mr-2 h-5 w-5" />
|
|
Call (305) 387-8582
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Banner */}
|
|
<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">
|
|
Save Thousands vs. Other Systems
|
|
</h2>
|
|
<p className="mt-2 text-red-100">
|
|
QuickBooks Enterprise starts at $3,000 vs. $20,000-$40,000 for
|
|
alternatives.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
href="/contact"
|
|
variant="secondary"
|
|
className="bg-white text-red-600 hover:bg-red-50 border-transparent"
|
|
>
|
|
Get Your Quote
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|