feat(solutions): add solutions page with QuickBooks product offerings

- QuickBooks Enterprise section (featured)
- QuickBooks Pro/Premier section
- QuickBooks Point of Sale section
- Integrations showcase
- Comparison CTA section
- Cost savings highlight banner

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andrés Mora 2025-12-23 18:41:21 -05:00
parent f50e8becea
commit c57274ed72
1 changed files with 321 additions and 0 deletions

321
app/solutions/page.tsx Normal file
View File

@ -0,0 +1,321 @@
import Link from "next/link";
import {
Building2,
Users,
ShieldCheck,
BarChart3,
Package,
CreditCard,
Layers,
ArrowRight,
CheckCircle,
Star,
Zap,
Globe,
} from "lucide-react";
export const metadata = {
title: "Solutions | AB Group LLC",
description:
"QuickBooks Enterprise, Pro, Premier, and Point of Sale solutions. Find the right accounting software for your business.",
};
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="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 Solutions</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
Find the Right <span className="text-red-500">QuickBooks</span>{" "}
for Your Business
</h1>
<p className="mt-6 text-lg text-zinc-300">
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>
</section>
{/* Solutions */}
{solutions.map((solution, index) => (
<section
key={solution.id}
className={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">
<Star className="h-5 w-5 text-red-600 fill-red-600" />
<span className="text-sm font-semibold text-red-600 uppercase tracking-wide">
Most Popular
</span>
</div>
)}
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
<div>
<p className="text-red-600 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) => (
<li key={feature} className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0" />
<span className="text-sm text-zinc-700">{feature}</span>
</li>
))}
</ul>
<div className="mt-8">
<Link
href="/contact"
className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
>
Get a Quote
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</div>
<div className="grid grid-cols-1 gap-6">
{solution.highlights.map((highlight) => (
<div
key={highlight.title}
className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100"
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
<highlight.icon className="h-6 w-6 text-red-600" />
</div>
<div>
<h3 className="font-semibold text-zinc-900">
{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="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">
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) => (
<div
key={integration}
className="bg-white/5 rounded-lg p-4 text-center hover:bg-white/10 transition-colors"
>
<p className="text-sm font-medium text-zinc-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="bg-zinc-100 rounded-2xl p-8 md:p-12 text-center">
<Building2 className="h-12 w-12 text-red-600 mx-auto mb-4" />
<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&apos;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">
<Link
href="/contact"
className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
>
Schedule a Free Consultation
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<a
href="tel:3053878582"
className="inline-flex items-center justify-center px-6 py-3 bg-white text-zinc-900 font-medium rounded-lg border border-zinc-200 hover:bg-zinc-50 transition-colors"
>
Call (305) 387-8582
</a>
</div>
</div>
</div>
</section>
{/* CTA Banner */}
<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">
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>
<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 Your Quote
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</div>
</section>
</>
);
}