feat(design): enhance UI with animations, gradients, and hover effects
- Add AnimatedBackground component with canvas-based floating orbs - Add reusable Button component with shimmer effects and variants - Update globals.css with animation keyframes and utility classes - Enhance Header with glass effect and animated nav underlines - Enhance Footer with gradient overlays and hover effects - Update all pages with animated gradient backgrounds - Add hover effects on cards, icons, and buttons - Implement gradient text effects throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
9eebabdc7c
commit
238b1c9a87
|
|
@ -1,4 +1,5 @@
|
|||
import Link from "next/link";
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Award,
|
||||
CheckCircle,
|
||||
|
|
@ -11,12 +12,8 @@ import {
|
|||
GraduationCap,
|
||||
BadgeCheck,
|
||||
} from "lucide-react";
|
||||
|
||||
export const metadata = {
|
||||
title: "About Us | AB Group LLC",
|
||||
description:
|
||||
"Learn about AB Group LLC, Florida's trusted QuickBooks consulting firm since 2000. Meet our team and discover our certifications.",
|
||||
};
|
||||
import AnimatedBackground from "../components/AnimatedBackground";
|
||||
import Button from "../components/Button";
|
||||
|
||||
const timeline = [
|
||||
{
|
||||
|
|
@ -91,21 +88,28 @@ export default function AboutPage() {
|
|||
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">
|
||||
<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-500 font-semibold mb-4">About Us</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Your Trusted <span className="text-red-500">QuickBooks</span>{" "}
|
||||
<p className="text-red-400 font-semibold mb-4 animate-fade-in">
|
||||
About Us
|
||||
</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
|
||||
Your Trusted{" "}
|
||||
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
|
||||
QuickBooks
|
||||
</span>{" "}
|
||||
Partner Since 2000
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-zinc-300">
|
||||
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
|
||||
We are a Florida-based consulting group dedicated to supporting
|
||||
small and mid-sized businesses with expert accounting and business
|
||||
solutions.
|
||||
</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>
|
||||
|
||||
{/* Mission Section */}
|
||||
|
|
@ -126,30 +130,39 @@ export default function AboutPage() {
|
|||
consultants, our primary task is to give you an array of tools
|
||||
that will help you grow your business.
|
||||
</p>
|
||||
<div className="mt-8 flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-600">
|
||||
<MapPin className="h-5 w-5 text-red-600" />
|
||||
<div className="mt-8 flex items-center gap-6">
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-600 group">
|
||||
<div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors duration-300">
|
||||
<MapPin className="h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<span>Florida, USA</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-600">
|
||||
<Calendar className="h-5 w-5 text-red-600" />
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-600 group">
|
||||
<div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors duration-300">
|
||||
<Calendar className="h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<span>Est. 2000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-red-600 rounded-2xl p-8 text-white">
|
||||
<div className="relative group">
|
||||
<div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-3xl opacity-20 blur-xl group-hover:opacity-30 transition-opacity duration-300" />
|
||||
<div className="relative bg-gradient-to-br from-red-600 to-red-700 rounded-2xl p-8 text-white">
|
||||
<blockquote className="text-xl italic">
|
||||
“There is a right way to do business. To succeed
|
||||
you'll need a solid idea, a great team, and ultimately the
|
||||
right execution.”
|
||||
you'll need a solid idea, a great team, and ultimately
|
||||
the right execution.”
|
||||
</blockquote>
|
||||
<div className="mt-6 flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<span className="text-lg font-bold">NA</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">Nicolle Alcazar, MSF</p>
|
||||
<p className="text-red-200 text-sm">President, AB Group LLC</p>
|
||||
<p className="text-red-200 text-sm">
|
||||
President, AB Group LLC
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,15 +183,16 @@ export default function AboutPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{values.map((value) => (
|
||||
{values.map((value, index) => (
|
||||
<div
|
||||
key={value.title}
|
||||
className="bg-white rounded-xl p-8 text-center shadow-sm"
|
||||
className="group bg-white rounded-xl p-8 text-center shadow-sm hover:shadow-xl hover:shadow-red-500/5 hover:-translate-y-2 transition-all duration-300"
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<value.icon className="h-8 w-8 text-red-600" />
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-red-100 to-red-50 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
|
||||
<value.icon className="h-10 w-10 text-red-600 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-zinc-900">
|
||||
<h3 className="text-xl font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
|
||||
{value.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-zinc-600">{value.description}</p>
|
||||
|
|
@ -202,17 +216,17 @@ export default function AboutPage() {
|
|||
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{timeline.map((item, index) => (
|
||||
<div key={item.year} className="flex gap-6 mb-8 last:mb-0">
|
||||
<div key={item.year} className="flex gap-6 mb-8 last:mb-0 group">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-red-500/20 group-hover:scale-110 transition-transform duration-300">
|
||||
{item.year}
|
||||
</div>
|
||||
{index < timeline.length - 1 && (
|
||||
<div className="w-0.5 h-full bg-zinc-200 mt-2" />
|
||||
<div className="w-0.5 h-full bg-gradient-to-b from-red-500 to-red-100 mt-2" />
|
||||
)}
|
||||
</div>
|
||||
<div className="pb-8">
|
||||
<h3 className="text-lg font-semibold text-zinc-900">
|
||||
<h3 className="text-lg font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-1 text-zinc-600">{item.description}</p>
|
||||
|
|
@ -224,10 +238,13 @@ export default function AboutPage() {
|
|||
</section>
|
||||
|
||||
{/* Credentials 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">
|
||||
<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">
|
||||
<Award className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<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 animate-pulse-slow">
|
||||
<Award className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-semibold sm:text-4xl">
|
||||
Professional Credentials
|
||||
</h2>
|
||||
|
|
@ -238,25 +255,35 @@ export default function AboutPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{credentials.map((group) => (
|
||||
<div key={group.category}>
|
||||
<h3 className="text-lg font-semibold text-red-500 mb-4 flex items-center gap-2">
|
||||
{credentials.map((group, groupIndex) => (
|
||||
<div
|
||||
key={group.category}
|
||||
className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-red-500/30 transition-all duration-300"
|
||||
style={{ animationDelay: `${groupIndex * 100}ms` }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text mb-4 flex items-center gap-2">
|
||||
{group.category === "Professional Degrees" && (
|
||||
<GraduationCap className="h-5 w-5" />
|
||||
<GraduationCap className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
{group.category === "Intuit Certifications" && (
|
||||
<BadgeCheck className="h-5 w-5" />
|
||||
<BadgeCheck className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
{group.category === "Other Certifications" && (
|
||||
<Award className="h-5 w-5" />
|
||||
<Award className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
{group.category}
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{group.items.map((item) => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-red-500 flex-shrink-0" />
|
||||
<span className="text-zinc-300">{item}</span>
|
||||
{group.items.map((item, idx) => (
|
||||
<li
|
||||
key={item}
|
||||
className="flex items-center gap-2 group/item"
|
||||
style={{ animationDelay: `${idx * 50}ms` }}
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-red-500 flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300" />
|
||||
<span className="text-zinc-300 group-hover/item:text-white transition-colors duration-300">
|
||||
{item}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -276,21 +303,23 @@ export default function AboutPage() {
|
|||
</div>
|
||||
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-zinc-50 rounded-2xl p-8 text-center">
|
||||
<div className="w-24 h-24 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<span className="text-3xl font-bold text-white">NA</span>
|
||||
<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 text-center border border-zinc-200">
|
||||
<div className="w-28 h-28 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-red-500/20 group-hover:scale-105 transition-transform duration-300">
|
||||
<span className="text-4xl font-bold text-white">NA</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-zinc-900">
|
||||
Nicolle Alcazar, MSF
|
||||
</h3>
|
||||
<p className="text-red-600 font-medium">
|
||||
<p className="text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text font-medium">
|
||||
President & Lead Consultant
|
||||
</p>
|
||||
<p className="mt-4 text-zinc-600 max-w-lg mx-auto">
|
||||
With a Master of Science in Finance and extensive certifications
|
||||
as an Intuit Solution Provider and Advanced ProAdvisor, Nicolle
|
||||
brings over 20 years of experience helping businesses optimize
|
||||
their accounting and financial systems.
|
||||
With a Master of Science in Finance and extensive
|
||||
certifications as an Intuit Solution Provider and Advanced
|
||||
ProAdvisor, Nicolle brings over 20 years of experience helping
|
||||
businesses optimize their accounting and financial systems.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-2">
|
||||
{[
|
||||
|
|
@ -298,10 +327,11 @@ export default function AboutPage() {
|
|||
"ISP",
|
||||
"Advanced ProAdvisor",
|
||||
"Enterprise Certified",
|
||||
].map((badge) => (
|
||||
].map((badge, index) => (
|
||||
<span
|
||||
key={badge}
|
||||
className="px-3 py-1 bg-red-100 text-red-700 text-sm font-medium rounded-full"
|
||||
className="px-3 py-1 bg-gradient-to-r from-red-100 to-red-50 text-red-700 text-sm font-medium rounded-full hover:from-red-500 hover:to-red-600 hover:text-white transition-all duration-300 cursor-default"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
|
|
@ -310,12 +340,17 @@ export default function AboutPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Se Habla Espanol */}
|
||||
<section className="bg-zinc-50 py-12">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p className="text-2xl font-semibold text-red-600">
|
||||
<section className="bg-zinc-50 py-12 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute top-0 left-1/4 w-64 h-64 bg-red-500 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-red-500 rounded-full blur-3xl" />
|
||||
</div>
|
||||
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p className="text-3xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
|
||||
Se Habla Espanol
|
||||
</p>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
|
|
@ -326,8 +361,9 @@ export default function AboutPage() {
|
|||
</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">
|
||||
<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">
|
||||
|
|
@ -337,13 +373,14 @@ export default function AboutPage() {
|
|||
Let's discuss how we can help your business succeed.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
<Button
|
||||
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"
|
||||
variant="secondary"
|
||||
className="bg-white text-red-600 hover:bg-red-50 border-transparent"
|
||||
>
|
||||
Contact Us
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
interface Orb {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
interface AnimatedBackgroundProps {
|
||||
variant?: "dark" | "light" | "red";
|
||||
orbCount?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function AnimatedBackground({
|
||||
variant = "dark",
|
||||
orbCount = 5,
|
||||
className = "",
|
||||
}: AnimatedBackgroundProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const orbsRef = useRef<Orb[]>([]);
|
||||
const animationRef = useRef<number | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const resizeCanvas = () => {
|
||||
const parent = canvas.parentElement;
|
||||
if (parent) {
|
||||
canvas.width = parent.offsetWidth;
|
||||
canvas.height = parent.offsetHeight;
|
||||
}
|
||||
};
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
|
||||
// Initialize orbs
|
||||
orbsRef.current = Array.from({ length: orbCount }, () => ({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
size: Math.random() * 200 + 100,
|
||||
speedX: (Math.random() - 0.5) * 0.5,
|
||||
speedY: (Math.random() - 0.5) * 0.5,
|
||||
opacity: Math.random() * 0.3 + 0.1,
|
||||
}));
|
||||
|
||||
const getOrbColor = (opacity: number) => {
|
||||
switch (variant) {
|
||||
case "dark":
|
||||
return `rgba(220, 38, 38, ${opacity})`;
|
||||
case "light":
|
||||
return `rgba(220, 38, 38, ${opacity * 0.5})`;
|
||||
case "red":
|
||||
return `rgba(255, 255, 255, ${opacity * 0.3})`;
|
||||
default:
|
||||
return `rgba(220, 38, 38, ${opacity})`;
|
||||
}
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
orbsRef.current.forEach((orb) => {
|
||||
// Update position
|
||||
orb.x += orb.speedX;
|
||||
orb.y += orb.speedY;
|
||||
|
||||
// Bounce off edges
|
||||
if (orb.x < -orb.size) orb.x = canvas.width + orb.size;
|
||||
if (orb.x > canvas.width + orb.size) orb.x = -orb.size;
|
||||
if (orb.y < -orb.size) orb.y = canvas.height + orb.size;
|
||||
if (orb.y > canvas.height + orb.size) orb.y = -orb.size;
|
||||
|
||||
// Draw orb with gradient
|
||||
const gradient = ctx.createRadialGradient(
|
||||
orb.x,
|
||||
orb.y,
|
||||
0,
|
||||
orb.x,
|
||||
orb.y,
|
||||
orb.size
|
||||
);
|
||||
gradient.addColorStop(0, getOrbColor(orb.opacity));
|
||||
gradient.addColorStop(1, getOrbColor(0));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(orb.x, orb.y, orb.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resizeCanvas);
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [variant, orbCount]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={`absolute inset-0 pointer-events-none ${className}`}
|
||||
style={{ filter: "blur(60px)" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import Link from "next/link";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface ButtonProps {
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
children: ReactNode;
|
||||
variant?: "primary" | "secondary" | "ghost" | "outline";
|
||||
size?: "sm" | "md" | "lg";
|
||||
className?: string;
|
||||
external?: boolean;
|
||||
type?: "button" | "submit";
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function Button({
|
||||
href,
|
||||
onClick,
|
||||
children,
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
className = "",
|
||||
external = false,
|
||||
type = "button",
|
||||
disabled = false,
|
||||
}: ButtonProps) {
|
||||
const baseStyles =
|
||||
"relative inline-flex items-center justify-center font-medium rounded-lg transition-all duration-300 overflow-hidden group";
|
||||
|
||||
const sizeStyles = {
|
||||
sm: "px-4 py-2 text-sm",
|
||||
md: "px-6 py-3 text-base",
|
||||
lg: "px-8 py-4 text-lg",
|
||||
};
|
||||
|
||||
const variantStyles = {
|
||||
primary:
|
||||
"bg-gradient-to-r from-red-600 to-red-500 text-white hover:from-red-700 hover:to-red-600 hover:shadow-lg hover:shadow-red-500/25 hover:-translate-y-0.5 active:translate-y-0",
|
||||
secondary:
|
||||
"bg-white text-zinc-900 border border-zinc-200 hover:border-zinc-300 hover:bg-zinc-50 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0",
|
||||
ghost:
|
||||
"text-red-600 hover:bg-red-50 hover:text-red-700",
|
||||
outline:
|
||||
"border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white hover:shadow-lg hover:shadow-red-500/25 hover:-translate-y-0.5 active:translate-y-0",
|
||||
};
|
||||
|
||||
const disabledStyles = "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none";
|
||||
|
||||
const combinedClassName = `${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${disabled ? disabledStyles : ""} ${className}`;
|
||||
|
||||
// Shimmer effect overlay
|
||||
const shimmer = variant === "primary" && (
|
||||
<span className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
);
|
||||
|
||||
if (href) {
|
||||
if (external) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={combinedClassName}
|
||||
>
|
||||
{shimmer}
|
||||
<span className="relative z-10 flex items-center gap-2">{children}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link href={href} className={combinedClassName}>
|
||||
{shimmer}
|
||||
<span className="relative z-10 flex items-center gap-2">{children}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={combinedClassName}
|
||||
>
|
||||
{shimmer}
|
||||
<span className="relative z-10 flex items-center gap-2">{children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -30,22 +30,32 @@ const navigation = {
|
|||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-zinc-900 text-white">
|
||||
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
||||
<footer className="relative bg-zinc-900 text-white overflow-hidden">
|
||||
{/* Animated gradient overlay */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-0 -left-1/4 w-1/2 h-1/2 bg-red-600/20 rounded-full blur-3xl animate-pulse-slow" />
|
||||
<div className="absolute bottom-0 -right-1/4 w-1/2 h-1/2 bg-red-600/20 rounded-full blur-3xl animate-pulse-slow animation-delay-200" />
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
{/* Brand & Description */}
|
||||
<div className="space-y-4">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
|
||||
<Link href="/" className="flex items-center gap-2 group w-fit">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-700 rounded-lg flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:shadow-red-500/40 transition-all duration-300 group-hover:scale-105">
|
||||
<span className="text-white font-bold text-lg">AB</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-white">AB Group</span>
|
||||
<span className="text-xl font-bold text-white group-hover:text-red-400 transition-colors duration-300">
|
||||
AB Group
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-zinc-400 text-sm max-w-xs">
|
||||
Your trusted QuickBooks experts. Providing prompt, professional,
|
||||
and courteous service since 2000.
|
||||
</p>
|
||||
<p className="text-red-500 font-medium text-sm">Se Habla Espanol</p>
|
||||
<p className="text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text font-semibold text-sm">
|
||||
Se Habla Espanol
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
|
|
@ -58,9 +68,10 @@ export default function Footer() {
|
|||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors duration-300 inline-block relative group"
|
||||
>
|
||||
{item.name}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-red-500 to-red-600 group-hover:w-full transition-all duration-300" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -73,24 +84,30 @@ export default function Footer() {
|
|||
Contact Us
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<Phone className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
|
||||
<li className="flex items-start gap-3 group">
|
||||
<div className="w-8 h-8 bg-zinc-800 rounded-lg flex items-center justify-center group-hover:bg-red-600/20 transition-colors duration-300">
|
||||
<Phone className="h-4 w-4 text-red-500" />
|
||||
</div>
|
||||
<div className="text-sm text-zinc-400">
|
||||
<p>(866) 218-3322</p>
|
||||
<p>(305) 387-8582</p>
|
||||
<p className="hover:text-white transition-colors duration-300 cursor-pointer">(866) 218-3322</p>
|
||||
<p className="hover:text-white transition-colors duration-300 cursor-pointer">(305) 387-8582</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="h-5 w-5 text-red-500 flex-shrink-0" />
|
||||
<li className="flex items-center gap-3 group">
|
||||
<div className="w-8 h-8 bg-zinc-800 rounded-lg flex items-center justify-center group-hover:bg-red-600/20 transition-colors duration-300">
|
||||
<Mail className="h-4 w-4 text-red-500" />
|
||||
</div>
|
||||
<a
|
||||
href="mailto:info@ab-groupllc.com"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
info@ab-groupllc.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<MapPin className="h-5 w-5 text-red-500 flex-shrink-0" />
|
||||
<li className="flex items-center gap-3 group">
|
||||
<div className="w-8 h-8 bg-zinc-800 rounded-lg flex items-center justify-center group-hover:bg-red-600/20 transition-colors duration-300">
|
||||
<MapPin className="h-4 w-4 text-red-500" />
|
||||
</div>
|
||||
<span className="text-sm text-zinc-400">
|
||||
Florida, United States
|
||||
</span>
|
||||
|
|
@ -98,14 +115,14 @@ export default function Footer() {
|
|||
</ul>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4 mt-6">
|
||||
<div className="flex gap-3 mt-6">
|
||||
{navigation.social.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-zinc-400 hover:text-white transition-colors"
|
||||
className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/20"
|
||||
>
|
||||
<span className="sr-only">{item.name}</span>
|
||||
<item.icon className="h-5 w-5" />
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import Button from "./Button";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Home", href: "/" },
|
||||
|
|
@ -16,80 +17,90 @@ export default function Header() {
|
|||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-zinc-100">
|
||||
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-zinc-100/50">
|
||||
<nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-700 rounded-lg flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:shadow-red-500/40 transition-all duration-300 group-hover:scale-105">
|
||||
<span className="text-white font-bold text-lg">AB</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-zinc-900 hidden sm:block">
|
||||
<span className="text-xl font-bold text-zinc-900 hidden sm:block group-hover:text-red-600 transition-colors duration-300">
|
||||
AB Group
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex md:items-center md:gap-8">
|
||||
<div className="hidden md:flex md:items-center md:gap-1">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
||||
className="relative px-4 py-2 text-sm font-medium text-zinc-600 hover:text-red-600 transition-colors duration-300 group"
|
||||
>
|
||||
{item.name}
|
||||
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-red-500 to-red-600 group-hover:w-3/4 transition-all duration-300 rounded-full" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:block">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
|
||||
>
|
||||
<Button href="/contact" size="sm">
|
||||
Get a Quote
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
type="button"
|
||||
className="md:hidden p-2 text-zinc-600 hover:text-zinc-900"
|
||||
className="md:hidden p-2 text-zinc-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-300"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-6 w-6" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" />
|
||||
)}
|
||||
<div className="relative w-6 h-6">
|
||||
<Menu
|
||||
className={`absolute inset-0 h-6 w-6 transition-all duration-300 ${
|
||||
mobileMenuOpen ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
|
||||
}`}
|
||||
/>
|
||||
<X
|
||||
className={`absolute inset-0 h-6 w-6 transition-all duration-300 ${
|
||||
mobileMenuOpen ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-zinc-100 bg-white">
|
||||
<div className="px-4 py-4 space-y-3">
|
||||
{navigation.map((item) => (
|
||||
<div
|
||||
className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
|
||||
mobileMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="px-4 py-4 space-y-1 bg-white border-t border-zinc-100">
|
||||
{navigation.map((item, index) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="block text-base font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
||||
className="block px-4 py-3 text-base font-medium text-zinc-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-300"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
href="/contact"
|
||||
className="block w-full text-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors mt-4"
|
||||
className="w-full"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Get a Quote
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import {
|
|||
Send,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import AnimatedBackground from "../components/AnimatedBackground";
|
||||
import Button from "../components/Button";
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
|
|
@ -76,10 +78,7 @@ export default function ContactPage() {
|
|||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
|
@ -98,20 +97,27 @@ export default function ContactPage() {
|
|||
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">
|
||||
<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-500 font-semibold mb-4">Contact Us</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Let's <span className="text-red-500">Talk</span> About Your
|
||||
Business
|
||||
<p className="text-red-400 font-semibold mb-4 animate-fade-in">
|
||||
Contact Us
|
||||
</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
|
||||
Let's{" "}
|
||||
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
|
||||
Talk
|
||||
</span>{" "}
|
||||
About Your Business
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-zinc-300">
|
||||
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
|
||||
Ready to get started? Have questions? We're here to help.
|
||||
Reach out for a free consultation and needs analysis.
|
||||
</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>
|
||||
|
||||
{/* Contact Content */}
|
||||
|
|
@ -129,8 +135,10 @@ export default function ContactPage() {
|
|||
</p>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="mt-8 bg-green-50 border border-green-200 rounded-xl p-8 text-center">
|
||||
<CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
|
||||
<div className="mt-8 bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-8 text-center animate-scale-in">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-zinc-900">
|
||||
Message Sent!
|
||||
</h3>
|
||||
|
|
@ -149,7 +157,7 @@ export default function ContactPage() {
|
|||
message: "",
|
||||
});
|
||||
}}
|
||||
className="mt-4 text-red-600 font-medium hover:text-red-700"
|
||||
className="mt-4 text-red-600 font-medium hover:text-red-700 transition-colors"
|
||||
>
|
||||
Send another message
|
||||
</button>
|
||||
|
|
@ -157,10 +165,10 @@ export default function ContactPage() {
|
|||
) : (
|
||||
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Full Name *
|
||||
</label>
|
||||
|
|
@ -171,14 +179,14 @@ export default function ContactPage() {
|
|||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
|
||||
placeholder="John Smith"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Email Address *
|
||||
</label>
|
||||
|
|
@ -189,17 +197,17 @@ export default function ContactPage() {
|
|||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
|
||||
placeholder="john@company.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Phone Number
|
||||
</label>
|
||||
|
|
@ -209,14 +217,14 @@ export default function ContactPage() {
|
|||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="company"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Company Name
|
||||
</label>
|
||||
|
|
@ -226,16 +234,16 @@ export default function ContactPage() {
|
|||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
|
||||
placeholder="Your Company LLC"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="preferredContact"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Preferred Contact Method
|
||||
</label>
|
||||
|
|
@ -244,7 +252,7 @@ export default function ContactPage() {
|
|||
name="preferredContact"
|
||||
value={formData.preferredContact}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white hover:border-zinc-300 cursor-pointer"
|
||||
>
|
||||
<option value="email">Email</option>
|
||||
<option value="phone">Phone</option>
|
||||
|
|
@ -252,10 +260,10 @@ export default function ContactPage() {
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="group">
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
||||
>
|
||||
Message *
|
||||
</label>
|
||||
|
|
@ -266,25 +274,39 @@ export default function ContactPage() {
|
|||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none"
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none hover:border-zinc-300"
|
||||
placeholder="Tell us about your business needs..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full 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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Button type="submit" disabled={isSubmitting} className="w-full">
|
||||
{isSubmitting ? (
|
||||
"Sending..."
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
Sending...
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
Send Message
|
||||
<Send className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -300,10 +322,14 @@ export default function ContactPage() {
|
|||
</p>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
{contactInfo.map((item) => (
|
||||
<div key={item.label} 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">
|
||||
<item.icon className="h-6 w-6 text-red-600" />
|
||||
{contactInfo.map((item, index) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex items-start gap-4 group"
|
||||
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 flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
|
||||
<item.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-zinc-900">{item.label}</p>
|
||||
|
|
@ -312,7 +338,7 @@ export default function ContactPage() {
|
|||
<a
|
||||
key={value}
|
||||
href={item.href}
|
||||
className="block text-zinc-600 hover:text-red-600 transition-colors"
|
||||
className="block text-zinc-600 hover:text-red-600 transition-colors duration-300"
|
||||
>
|
||||
{value}
|
||||
</a>
|
||||
|
|
@ -339,7 +365,7 @@ export default function ContactPage() {
|
|||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-red-100 hover:text-red-600 transition-colors"
|
||||
className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/20"
|
||||
>
|
||||
<span className="sr-only">{social.name}</span>
|
||||
<social.icon className="h-5 w-5" />
|
||||
|
|
@ -349,8 +375,10 @@ export default function ContactPage() {
|
|||
</div>
|
||||
|
||||
{/* Se Habla Espanol */}
|
||||
<div className="mt-12 bg-red-50 rounded-xl p-6">
|
||||
<p className="text-xl font-semibold text-red-600">
|
||||
<div className="mt-12 relative group overflow-hidden rounded-xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-red-500 to-red-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300" />
|
||||
<div className="relative bg-red-50 rounded-xl p-6 border border-red-100">
|
||||
<p className="text-xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
|
||||
Se Habla Espanol
|
||||
</p>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
|
|
@ -361,11 +389,13 @@ export default function ContactPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Banner */}
|
||||
<section className="bg-zinc-900 py-12 md:py-16">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<section className="relative animated-gradient-bg py-12 md:py-16 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">
|
||||
<h2 className="text-2xl font-semibold text-white sm:text-3xl">
|
||||
Got QuickBooks? We've Got Answers.
|
||||
|
|
@ -373,13 +403,10 @@ export default function ContactPage() {
|
|||
<p className="mt-2 text-zinc-400">
|
||||
Call us now for immediate assistance.
|
||||
</p>
|
||||
<a
|
||||
href="tel:3053878582"
|
||||
className="mt-6 inline-flex items-center justify-center px-8 py-4 bg-red-600 text-white text-lg font-medium rounded-lg hover:bg-red-700 transition-colors"
|
||||
>
|
||||
<Button href="tel:3053878582" size="lg" className="mt-6">
|
||||
<Phone className="mr-2 h-6 w-6" />
|
||||
(305) 387-8582
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
208
app/globals.css
208
app/globals.css
|
|
@ -2,9 +2,217 @@
|
|||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-inter);
|
||||
|
||||
--animate-float: float 6s ease-in-out infinite;
|
||||
--animate-float-delayed: float 6s ease-in-out infinite 2s;
|
||||
--animate-pulse-slow: pulse-slow 4s ease-in-out infinite;
|
||||
--animate-gradient: gradient 8s ease infinite;
|
||||
--animate-shimmer: shimmer 2s linear infinite;
|
||||
--animate-fade-in: fade-in 0.6s ease-out;
|
||||
--animate-slide-up: slide-up 0.6s ease-out;
|
||||
--animate-slide-down: slide-down 0.3s ease-out;
|
||||
--animate-scale-in: scale-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
/* Keyframe animations */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation utility classes */
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-delayed {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 8s ease infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-down {
|
||||
animation: slide-down 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Staggered animation delays */
|
||||
.animation-delay-100 { animation-delay: 100ms; }
|
||||
.animation-delay-200 { animation-delay: 200ms; }
|
||||
.animation-delay-300 { animation-delay: 300ms; }
|
||||
.animation-delay-400 { animation-delay: 400ms; }
|
||||
.animation-delay-500 { animation-delay: 500ms; }
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Animated gradient background */
|
||||
.animated-gradient-bg {
|
||||
background: linear-gradient(-45deg, #18181b, #27272a, #3f3f46, #27272a);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
|
||||
.animated-gradient-bg-red {
|
||||
background: linear-gradient(-45deg, #dc2626, #b91c1c, #ef4444, #dc2626);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 8s ease infinite;
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Link hover underline effect */
|
||||
.link-underline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link-underline::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.link-underline:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Smooth scroll */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus-visible {
|
||||
outline: 2px solid #dc2626;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
|
|
|||
137
app/page.tsx
137
app/page.tsx
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Monitor,
|
||||
|
|
@ -9,6 +11,8 @@ import {
|
|||
ArrowRight,
|
||||
Phone,
|
||||
} from "lucide-react";
|
||||
import AnimatedBackground from "./components/AnimatedBackground";
|
||||
import Button from "./components/Button";
|
||||
|
||||
const services = [
|
||||
{
|
||||
|
|
@ -56,45 +60,55 @@ export default function Home() {
|
|||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="bg-zinc-900 text-white">
|
||||
<div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
|
||||
<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-500 font-semibold mb-4">
|
||||
<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">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl animate-slide-up">
|
||||
Your Business Deserves{" "}
|
||||
<span className="text-red-500">Expert</span> Financial Solutions
|
||||
<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">
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
</Link>
|
||||
<a
|
||||
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
<Button
|
||||
href="tel:3053878582"
|
||||
className="inline-flex items-center justify-center px-6 py-3 bg-white/10 text-white font-medium rounded-lg hover:bg-white/20 transition-colors"
|
||||
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
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-6 text-red-400 font-medium">Se Habla Espanol</p>
|
||||
<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">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<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
|
||||
|
|
@ -109,9 +123,15 @@ export default function Home() {
|
|||
|
||||
{/* Stats */}
|
||||
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<p className="text-4xl font-bold text-red-600">{stat.value}</p>
|
||||
{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>
|
||||
|
|
@ -122,7 +142,7 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section className="bg-zinc-50 py-16 md:py-24">
|
||||
<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">
|
||||
|
|
@ -135,15 +155,16 @@ export default function Home() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{services.map((service) => (
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={service.title}
|
||||
className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
|
||||
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-red-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<service.icon className="h-6 w-6 text-red-600" />
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -156,10 +177,10 @@ export default function Home() {
|
|||
<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"
|
||||
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" />
|
||||
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-2 transition-transform duration-300" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -181,17 +202,27 @@ export default function Home() {
|
|||
and troubleshooting.
|
||||
</p>
|
||||
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{credentials.map((credential) => (
|
||||
<div key={credential} 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">{credential}</span>
|
||||
{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="bg-zinc-100 rounded-2xl p-8 lg:p-12">
|
||||
<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">
|
||||
<Award className="h-12 w-12 text-red-600" />
|
||||
<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
|
||||
|
|
@ -199,23 +230,34 @@ export default function Home() {
|
|||
<p className="text-sm text-zinc-600">Since 2008</p>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote className="text-zinc-700 italic">
|
||||
<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>
|
||||
<p className="mt-4 font-medium text-zinc-900">
|
||||
<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>
|
||||
<p className="text-sm text-zinc-600">
|
||||
President, AB Group LLC
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
|
|
@ -226,19 +268,20 @@ export default function Home() {
|
|||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a
|
||||
<Button
|
||||
href="tel:3053878582"
|
||||
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"
|
||||
variant="secondary"
|
||||
className="bg-white text-red-600 hover:bg-red-50 border-transparent"
|
||||
>
|
||||
<Phone className="mr-2 h-5 w-5" />
|
||||
Call Now
|
||||
</a>
|
||||
<Link
|
||||
</Button>
|
||||
<Button
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center px-6 py-3 bg-red-700 text-white font-medium rounded-lg hover:bg-red-800 transition-colors"
|
||||
className="bg-red-700 hover:bg-red-800 from-red-700 to-red-700"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Settings,
|
||||
|
|
@ -18,12 +20,8 @@ import {
|
|||
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.",
|
||||
};
|
||||
import AnimatedBackground from "../components/AnimatedBackground";
|
||||
import Button from "../components/Button";
|
||||
|
||||
const services = [
|
||||
{
|
||||
|
|
@ -134,21 +132,27 @@ 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">
|
||||
<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-500 font-semibold mb-4">Our Services</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
<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-red-500">Business</span>
|
||||
<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">
|
||||
<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 */}
|
||||
|
|
@ -165,15 +169,16 @@ export default function ServicesPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{services.map((service) => (
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={service.title}
|
||||
className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
|
||||
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-red-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<service.icon className="h-6 w-6 text-red-600" />
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -209,12 +214,16 @@ export default function ServicesPage() {
|
|||
</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" />
|
||||
{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">
|
||||
<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>
|
||||
|
|
@ -238,13 +247,14 @@ export default function ServicesPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{industries.map((industry) => (
|
||||
{industries.map((industry, index) => (
|
||||
<div
|
||||
key={industry.name}
|
||||
className="bg-zinc-50 rounded-xl p-6 text-center hover:bg-zinc-100 transition-colors"
|
||||
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" />
|
||||
<p className="text-sm font-medium text-zinc-700">
|
||||
<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>
|
||||
|
|
@ -258,8 +268,9 @@ export default function ServicesPage() {
|
|||
</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">
|
||||
<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">
|
||||
|
|
@ -294,12 +305,18 @@ export default function ServicesPage() {
|
|||
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">
|
||||
].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">{item.title}</h3>
|
||||
<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>
|
||||
))}
|
||||
|
|
@ -308,8 +325,9 @@ export default function ServicesPage() {
|
|||
</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">
|
||||
<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">
|
||||
|
|
@ -319,13 +337,14 @@ export default function ServicesPage() {
|
|||
Contact us today for a free consultation and needs analysis.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
<Button
|
||||
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"
|
||||
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" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import Link from "next/link";
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
|
|
@ -12,13 +13,10 @@ import {
|
|||
Star,
|
||||
Zap,
|
||||
Globe,
|
||||
Phone,
|
||||
} 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.",
|
||||
};
|
||||
import AnimatedBackground from "../components/AnimatedBackground";
|
||||
import Button from "../components/Button";
|
||||
|
||||
const solutions = [
|
||||
{
|
||||
|
|
@ -137,42 +135,51 @@ 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">
|
||||
<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-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>{" "}
|
||||
<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">
|
||||
<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={index % 2 === 0 ? "bg-white" : "bg-zinc-50"}
|
||||
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">
|
||||
<Star className="h-5 w-5 text-red-600 fill-red-600" />
|
||||
<span className="text-sm font-semibold text-red-600 uppercase tracking-wide">
|
||||
<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-red-600 font-medium mb-2">
|
||||
<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">
|
||||
|
|
@ -183,37 +190,39 @@ export default function SolutionsPage() {
|
|||
</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" />
|
||||
{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">
|
||||
<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"
|
||||
>
|
||||
<Button href="/contact">
|
||||
Get a Quote
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{solution.highlights.map((highlight) => (
|
||||
{solution.highlights.map((highlight, idx) => (
|
||||
<div
|
||||
key={highlight.title}
|
||||
className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100"
|
||||
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-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<highlight.icon className="h-6 w-6 text-red-600" />
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -230,8 +239,9 @@ export default function SolutionsPage() {
|
|||
))}
|
||||
|
||||
{/* 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">
|
||||
<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
|
||||
|
|
@ -243,12 +253,13 @@ export default function SolutionsPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{integrations.map((integration) => (
|
||||
{integrations.map((integration, index) => (
|
||||
<div
|
||||
key={integration}
|
||||
className="bg-white/5 rounded-lg p-4 text-center hover:bg-white/10 transition-colors"
|
||||
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">
|
||||
<p className="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors duration-300">
|
||||
{integration}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -264,38 +275,39 @@ export default function SolutionsPage() {
|
|||
{/* 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" />
|
||||
<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.
|
||||
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">
|
||||
<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"
|
||||
>
|
||||
<Button href="/contact">
|
||||
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"
|
||||
>
|
||||
</Button>
|
||||
<Button href="tel:3053878582" variant="secondary">
|
||||
<Phone className="mr-2 h-5 w-5" />
|
||||
Call (305) 387-8582
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
|
|
@ -306,13 +318,14 @@ export default function SolutionsPage() {
|
|||
alternatives.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
<Button
|
||||
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"
|
||||
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" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue