292 lines
12 KiB
TypeScript
292 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import {
|
|
Monitor,
|
|
HeadphonesIcon,
|
|
GraduationCap,
|
|
Settings,
|
|
Award,
|
|
CheckCircle,
|
|
ArrowRight,
|
|
Phone,
|
|
} from "lucide-react";
|
|
import AnimatedBackground from "./components/AnimatedBackground";
|
|
import Button from "./components/Button";
|
|
|
|
const services = [
|
|
{
|
|
icon: Settings,
|
|
title: "QuickBooks Setup",
|
|
description:
|
|
"Complete installation and configuration tailored to your business needs and industry requirements.",
|
|
},
|
|
{
|
|
icon: GraduationCap,
|
|
title: "Training & Support",
|
|
description:
|
|
"Comprehensive training programs and ongoing support to maximize your software investment.",
|
|
},
|
|
{
|
|
icon: Monitor,
|
|
title: "Remote Access",
|
|
description:
|
|
"Secure remote access solutions for QuickBooks Enterprise, Premier, and Pro editions.",
|
|
},
|
|
{
|
|
icon: HeadphonesIcon,
|
|
title: "Consulting",
|
|
description:
|
|
"Expert business consulting to streamline your accounting and financial processes.",
|
|
},
|
|
];
|
|
|
|
const credentials = [
|
|
"Intuit Solution Provider",
|
|
"QuickBooks Advanced ProAdvisor",
|
|
"QuickBooks Enterprise Certified",
|
|
"Point of Sale Certified",
|
|
"Master of Science in Finance",
|
|
"Master of Science in Accounting",
|
|
];
|
|
|
|
const stats = [
|
|
{ value: "20+", label: "Years Experience" },
|
|
{ value: "1000+", label: "Clients Served" },
|
|
{ value: "100%", label: "Satisfaction" },
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[90vh] flex items-center animated-gradient-bg text-white overflow-hidden">
|
|
<AnimatedBackground variant="dark" orbCount={6} />
|
|
<div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
|
|
<div className="max-w-3xl">
|
|
<p className="text-red-400 font-semibold mb-4 animate-fade-in">
|
|
Certified QuickBooks Experts
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl animate-slide-up">
|
|
Your Business Deserves{" "}
|
|
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text animate-gradient bg-[length:200%_auto]">
|
|
Expert
|
|
</span>{" "}
|
|
Financial Solutions
|
|
</h1>
|
|
<p className="mt-6 text-lg text-zinc-300 max-w-2xl animate-slide-up animation-delay-100">
|
|
As Intuit Solution Providers with over 20 years of experience, we
|
|
deliver prompt, professional, and courteous service for all your
|
|
QuickBooks and accounting needs.
|
|
</p>
|
|
<div className="mt-10 flex flex-col sm:flex-row gap-4 animate-slide-up animation-delay-200">
|
|
<Button href="/contact" size="lg">
|
|
Get a Free Consultation
|
|
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
<Button
|
|
href="tel:3053878582"
|
|
variant="secondary"
|
|
size="lg"
|
|
className="bg-white/10 border-white/20 text-white hover:bg-white/20"
|
|
>
|
|
<Phone className="mr-2 h-5 w-5" />
|
|
(305) 387-8582
|
|
</Button>
|
|
</div>
|
|
<p className="mt-6 text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text font-semibold animate-fade-in animation-delay-300">
|
|
Se Habla Espanol
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating decorative elements */}
|
|
<div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
|
|
<div className="absolute right-1/4 bottom-1/4 w-48 h-48 bg-red-600/10 rounded-full blur-3xl animate-float-delayed" />
|
|
</section>
|
|
|
|
{/* Value Proposition */}
|
|
<section className="bg-white py-16 md:py-24 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-zinc-50/50 to-transparent" />
|
|
<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">
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
The Right Way to Do Business
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
We specialize in small and mid-size business solutions. Our team
|
|
is highly qualified in Business Management, Accounting, and
|
|
Finance—making us your one-stop solution for keeping your business
|
|
running smoothly.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={stat.label}
|
|
className="text-center group"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<p className="text-5xl font-bold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text group-hover:scale-110 transition-transform duration-300">
|
|
{stat.value}
|
|
</p>
|
|
<p className="mt-2 text-sm font-medium text-zinc-600">
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<section className="bg-zinc-50 py-16 md:py-24 relative">
|
|
<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">
|
|
How We Can Help
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
We provide on-site, telephone, and remote access support for all
|
|
our services.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 text-center">
|
|
<Link
|
|
href="/services"
|
|
className="inline-flex items-center text-red-600 font-medium hover:text-red-700 transition-colors group"
|
|
>
|
|
View All Services
|
|
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-2 transition-transform duration-300" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Credentials Section */}
|
|
<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="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16 items-center">
|
|
<div>
|
|
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
|
|
Certified Experts You Can Trust
|
|
</h2>
|
|
<p className="mt-4 text-lg text-zinc-600">
|
|
As Intuit Solution Providers, we hold the highest degree of
|
|
training, experience, and certifications in our field. We belong
|
|
to an elite group of consultants with extensive experience in
|
|
QuickBooks installations, training, support, data migrations,
|
|
and troubleshooting.
|
|
</p>
|
|
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{credentials.map((credential, index) => (
|
|
<div
|
|
key={credential}
|
|
className="flex items-center gap-2 group"
|
|
style={{ animationDelay: `${index * 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 group-hover:text-zinc-900 transition-colors duration-300">
|
|
{credential}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="relative group">
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-2xl 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 lg:p-12 border border-zinc-200">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex items-center justify-center shadow-lg shadow-red-500/20 animate-pulse-slow">
|
|
<Award className="h-7 w-7 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-zinc-900">
|
|
Intuit Solution Provider
|
|
</p>
|
|
<p className="text-sm text-zinc-600">Since 2008</p>
|
|
</div>
|
|
</div>
|
|
<blockquote className="text-zinc-700 italic text-lg">
|
|
“Our clients need more than entry-level accounting
|
|
solutions. They need software with more functions, security,
|
|
transaction volume and system controls.”
|
|
</blockquote>
|
|
<div className="mt-6 flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">NA</span>
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-zinc-900">
|
|
Nicolle Alcazar, MSF
|
|
</p>
|
|
<p className="text-sm text-zinc-600">
|
|
President, AB Group LLC
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
Got QuickBooks? We've Got Answers.
|
|
</h2>
|
|
<p className="mt-2 text-red-100">
|
|
Call us today for a free needs analysis and quote.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Button
|
|
href="tel:3053878582"
|
|
variant="secondary"
|
|
className="bg-white text-red-600 hover:bg-red-50 border-transparent"
|
|
>
|
|
<Phone className="mr-2 h-5 w-5" />
|
|
Call Now
|
|
</Button>
|
|
<Button
|
|
href="/contact"
|
|
className="bg-red-700 hover:bg-red-800 from-red-700 to-red-700"
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|