calcazar
/
ab-group-llc-landing-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Andrés Mora 2025-12-23 19:22:50 -05:00
parent 9eebabdc7c
commit 238b1c9a87
11 changed files with 1348 additions and 1141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
app/about/page.tsx
View File

@ -1,4 +1,5 @@
import Link from "next/link"; "use client";
import { import {
Award, Award,
CheckCircle, CheckCircle,
@ -11,12 +12,8 @@ import {
GraduationCap, GraduationCap,
BadgeCheck, BadgeCheck,
} from "lucide-react"; } from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
export const metadata = { import Button from "../components/Button";
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.",
};
const timeline = [ const timeline = [
{ {
@ -91,21 +88,28 @@ export default function AboutPage() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-zinc-900 text-white"> <section className="relative animated-gradient-bg text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24"> <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"> <div className="max-w-3xl">
<p className="text-red-500 font-semibold mb-4">About Us</p> <p className="text-red-400 font-semibold mb-4 animate-fade-in">
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl"> About Us
Your Trusted <span className="text-red-500">QuickBooks</span>{" "} </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 Partner Since 2000
</h1> </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 We are a Florida-based consulting group dedicated to supporting
small and mid-sized businesses with expert accounting and business small and mid-sized businesses with expert accounting and business
solutions. solutions.
</p> </p>
</div> </div>
</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> </section>
{/* Mission Section */} {/* Mission Section */}
@ -126,30 +130,39 @@ export default function AboutPage() {
consultants, our primary task is to give you an array of tools consultants, our primary task is to give you an array of tools
that will help you grow your business. that will help you grow your business.
</p> </p>
<div className="mt-8 flex items-center gap-4"> <div className="mt-8 flex items-center gap-6">
<div className="flex items-center gap-2 text-sm text-zinc-600"> <div className="flex items-center gap-2 text-sm text-zinc-600 group">
<MapPin className="h-5 w-5 text-red-600" /> <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> <span>Florida, USA</span>
</div> </div>
<div className="flex items-center gap-2 text-sm text-zinc-600"> <div className="flex items-center gap-2 text-sm text-zinc-600 group">
<Calendar className="h-5 w-5 text-red-600" /> <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> <span>Est. 2000</span>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-red-600 rounded-2xl p-8 text-white"> <div className="relative group">
<blockquote className="text-xl italic"> <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" />
&ldquo;There is a right way to do business. To succeed <div className="relative bg-gradient-to-br from-red-600 to-red-700 rounded-2xl p-8 text-white">
you&apos;ll need a solid idea, a great team, and ultimately the <blockquote className="text-xl italic">
right execution.&rdquo; &ldquo;There is a right way to do business. To succeed
</blockquote> you&apos;ll need a solid idea, a great team, and ultimately
<div className="mt-6 flex items-center gap-4"> the right execution.&rdquo;
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center"> </blockquote>
<span className="text-lg font-bold">NA</span> <div className="mt-6 flex items-center gap-4">
</div> <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
<div> <span className="text-lg font-bold">NA</span>
<p className="font-semibold">Nicolle Alcazar, MSF</p> </div>
<p className="text-red-200 text-sm">President, AB Group LLC</p> <div>
<p className="font-semibold">Nicolle Alcazar, MSF</p>
<p className="text-red-200 text-sm">
President, AB Group LLC
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -170,15 +183,16 @@ export default function AboutPage() {
</div> </div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
{values.map((value) => ( {values.map((value, index) => (
<div <div
key={value.title} 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"> <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-8 w-8 text-red-600" /> <value.icon className="h-10 w-10 text-red-600 group-hover:text-white transition-colors duration-300" />
</div> </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} {value.title}
</h3> </h3>
<p className="mt-2 text-zinc-600">{value.description}</p> <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"> <div className="max-w-3xl mx-auto">
{timeline.map((item, index) => ( {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="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} {item.year}
</div> </div>
{index < timeline.length - 1 && ( {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>
<div className="pb-8"> <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} {item.title}
</h3> </h3>
<p className="mt-1 text-zinc-600">{item.description}</p> <p className="mt-1 text-zinc-600">{item.description}</p>
@ -224,10 +238,13 @@ export default function AboutPage() {
</section> </section>
{/* Credentials Section */} {/* Credentials Section */}
<section className="bg-zinc-900 text-white py-16 md:py-24"> <section className="relative animated-gradient-bg text-white py-16 md:py-24 overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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"> <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"> <h2 className="text-3xl font-semibold sm:text-4xl">
Professional Credentials Professional Credentials
</h2> </h2>
@ -238,25 +255,35 @@ export default function AboutPage() {
</div> </div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
{credentials.map((group) => ( {credentials.map((group, groupIndex) => (
<div key={group.category}> <div
<h3 className="text-lg font-semibold text-red-500 mb-4 flex items-center gap-2"> 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" && ( {group.category === "Professional Degrees" && (
<GraduationCap className="h-5 w-5" /> <GraduationCap className="h-5 w-5 text-red-500" />
)} )}
{group.category === "Intuit Certifications" && ( {group.category === "Intuit Certifications" && (
<BadgeCheck className="h-5 w-5" /> <BadgeCheck className="h-5 w-5 text-red-500" />
)} )}
{group.category === "Other Certifications" && ( {group.category === "Other Certifications" && (
<Award className="h-5 w-5" /> <Award className="h-5 w-5 text-red-500" />
)} )}
{group.category} {group.category}
</h3> </h3>
<ul className="space-y-3"> <ul className="space-y-3">
{group.items.map((item) => ( {group.items.map((item, idx) => (
<li key={item} className="flex items-center gap-2"> <li
<CheckCircle className="h-4 w-4 text-red-500 flex-shrink-0" /> key={item}
<span className="text-zinc-300">{item}</span> 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> </li>
))} ))}
</ul> </ul>
@ -276,36 +303,40 @@ export default function AboutPage() {
</div> </div>
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
<div className="bg-zinc-50 rounded-2xl p-8 text-center"> <div className="relative group">
<div className="w-24 h-24 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-6"> <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" />
<span className="text-3xl font-bold text-white">NA</span> <div className="relative bg-gradient-to-br from-zinc-100 to-zinc-50 rounded-2xl p-8 text-center border border-zinc-200">
</div> <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">
<h3 className="text-2xl font-semibold text-zinc-900"> <span className="text-4xl font-bold text-white">NA</span>
Nicolle Alcazar, MSF </div>
</h3> <h3 className="text-2xl font-semibold text-zinc-900">
<p className="text-red-600 font-medium"> Nicolle Alcazar, MSF
President & Lead Consultant </h3>
</p> <p className="text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text font-medium">
<p className="mt-4 text-zinc-600 max-w-lg mx-auto"> President & Lead Consultant
With a Master of Science in Finance and extensive certifications </p>
as an Intuit Solution Provider and Advanced ProAdvisor, Nicolle <p className="mt-4 text-zinc-600 max-w-lg mx-auto">
brings over 20 years of experience helping businesses optimize With a Master of Science in Finance and extensive
their accounting and financial systems. certifications as an Intuit Solution Provider and Advanced
</p> ProAdvisor, Nicolle brings over 20 years of experience helping
<div className="mt-6 flex flex-wrap justify-center gap-2"> businesses optimize their accounting and financial systems.
{[ </p>
"MSF", <div className="mt-6 flex flex-wrap justify-center gap-2">
"ISP", {[
"Advanced ProAdvisor", "MSF",
"Enterprise Certified", "ISP",
].map((badge) => ( "Advanced ProAdvisor",
<span "Enterprise Certified",
key={badge} ].map((badge, index) => (
className="px-3 py-1 bg-red-100 text-red-700 text-sm font-medium rounded-full" <span
> key={badge}
{badge} 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"
</span> style={{ animationDelay: `${index * 50}ms` }}
))} >
{badge}
</span>
))}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -313,9 +344,13 @@ export default function AboutPage() {
</section> </section>
{/* Se Habla Espanol */} {/* Se Habla Espanol */}
<section className="bg-zinc-50 py-12"> <section className="bg-zinc-50 py-12 relative overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center"> <div className="absolute inset-0 opacity-5">
<p className="text-2xl font-semibold text-red-600"> <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 Se Habla Espanol
</p> </p>
<p className="mt-2 text-zinc-600"> <p className="mt-2 text-zinc-600">
@ -326,8 +361,9 @@ export default function AboutPage() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="bg-red-600 py-12 md:py-16"> <section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="text-center md:text-left"> <div className="text-center md:text-left">
<h2 className="text-2xl font-semibold text-white sm:text-3xl"> <h2 className="text-2xl font-semibold text-white sm:text-3xl">
@ -337,13 +373,14 @@ export default function AboutPage() {
Let&apos;s discuss how we can help your business succeed. Let&apos;s discuss how we can help your business succeed.
</p> </p>
</div> </div>
<Link <Button
href="/contact" 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 Contact Us
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Button>
</div> </div>
</div> </div>
</section> </section>

122
app/components/AnimatedBackground.tsx Normal file
View File

@ -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)" }}
/>
);
}

89
app/components/Button.tsx Normal file
View File

@ -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>
);
}

53
app/components/Footer.tsx
View File

@ -30,22 +30,32 @@ const navigation = {
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-zinc-900 text-white"> <footer className="relative bg-zinc-900 text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> {/* 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"> <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Brand & Description */} {/* Brand & Description */}
<div className="space-y-4"> <div className="space-y-4">
<Link href="/" className="flex items-center gap-2"> <Link href="/" className="flex items-center gap-2 group w-fit">
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center"> <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> <span className="text-white font-bold text-lg">AB</span>
</div> </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> </Link>
<p className="text-zinc-400 text-sm max-w-xs"> <p className="text-zinc-400 text-sm max-w-xs">
Your trusted QuickBooks experts. Providing prompt, professional, Your trusted QuickBooks experts. Providing prompt, professional,
and courteous service since 2000. and courteous service since 2000.
</p> </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> </div>
{/* Quick Links */} {/* Quick Links */}
@ -58,9 +68,10 @@ export default function Footer() {
<li key={item.name}> <li key={item.name}>
<Link <Link
href={item.href} 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} {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> </Link>
</li> </li>
))} ))}
@ -73,24 +84,30 @@ export default function Footer() {
Contact Us Contact Us
</h3> </h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-start gap-3"> <li className="flex items-start gap-3 group">
<Phone className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" /> <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"> <div className="text-sm text-zinc-400">
<p>(866) 218-3322</p> <p className="hover:text-white transition-colors duration-300 cursor-pointer">(866) 218-3322</p>
<p>(305) 387-8582</p> <p className="hover:text-white transition-colors duration-300 cursor-pointer">(305) 387-8582</p>
</div> </div>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3 group">
<Mail className="h-5 w-5 text-red-500 flex-shrink-0" /> <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 <a
href="mailto:info@ab-groupllc.com" 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 info@ab-groupllc.com
</a> </a>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3 group">
<MapPin className="h-5 w-5 text-red-500 flex-shrink-0" /> <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"> <span className="text-sm text-zinc-400">
Florida, United States Florida, United States
</span> </span>
@ -98,14 +115,14 @@ export default function Footer() {
</ul> </ul>
{/* Social Links */} {/* Social Links */}
<div className="flex gap-4 mt-6"> <div className="flex gap-3 mt-6">
{navigation.social.map((item) => ( {navigation.social.map((item) => (
<a <a
key={item.name} key={item.name}
href={item.href} href={item.href}
target="_blank" target="_blank"
rel="noopener noreferrer" 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> <span className="sr-only">{item.name}</span>
<item.icon className="h-5 w-5" /> <item.icon className="h-5 w-5" />

77
app/components/Header.tsx
View File

@ -3,6 +3,7 @@
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { Menu, X } from "lucide-react"; import { Menu, X } from "lucide-react";
import Button from "./Button";
const navigation = [ const navigation = [
{ name: "Home", href: "/" }, { name: "Home", href: "/" },
@ -16,80 +17,90 @@ export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( 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"> <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link href="/" className="flex items-center gap-2"> <Link href="/" className="flex items-center gap-2 group">
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center"> <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> <span className="text-white font-bold text-lg">AB</span>
</div> </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 AB Group
</span> </span>
</Link> </Link>
{/* Desktop Navigation */} {/* 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) => ( {navigation.map((item) => (
<Link <Link
key={item.name} key={item.name}
href={item.href} 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} {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> </Link>
))} ))}
</div> </div>
{/* CTA Button */} {/* CTA Button */}
<div className="hidden md:block"> <div className="hidden md:block">
<Link <Button href="/contact" size="sm">
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"
>
Get a Quote Get a Quote
</Link> </Button>
</div> </div>
{/* Mobile menu button */} {/* Mobile menu button */}
<button <button
type="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)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
<span className="sr-only">Toggle menu</span> <span className="sr-only">Toggle menu</span>
{mobileMenuOpen ? ( <div className="relative w-6 h-6">
<X className="h-6 w-6" /> <Menu
) : ( className={`absolute inset-0 h-6 w-6 transition-all duration-300 ${
<Menu className="h-6 w-6" /> 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> </button>
</nav> </nav>
{/* Mobile Navigation */} {/* Mobile Navigation */}
{mobileMenuOpen && ( <div
<div className="md:hidden border-t border-zinc-100 bg-white"> className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
<div className="px-4 py-4 space-y-3"> mobileMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
{navigation.map((item) => ( }`}
<Link >
key={item.name} <div className="px-4 py-4 space-y-1 bg-white border-t border-zinc-100">
href={item.href} {navigation.map((item, index) => (
className="block text-base font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</Link>
))}
<Link <Link
key={item.name}
href={item.href}
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>
))}
<div className="pt-2">
<Button
href="/contact" 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)} onClick={() => setMobileMenuOpen(false)}
> >
Get a Quote Get a Quote
</Link> </Button>
</div> </div>
</div> </div>
)} </div>
</header> </header>
); );
} }

145
app/contact/page.tsx
View File

@ -12,6 +12,8 @@ import {
Send, Send,
CheckCircle, CheckCircle,
} from "lucide-react"; } from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";
const contactInfo = [ const contactInfo = [
{ {
@ -76,10 +78,7 @@ export default function ContactPage() {
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
// Simulate form submission
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
setIsSubmitting(false); setIsSubmitting(false);
setIsSubmitted(true); setIsSubmitted(true);
}; };
@ -98,20 +97,27 @@ export default function ContactPage() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-zinc-900 text-white"> <section className="relative animated-gradient-bg text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24"> <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"> <div className="max-w-3xl">
<p className="text-red-500 font-semibold mb-4">Contact Us</p> <p className="text-red-400 font-semibold mb-4 animate-fade-in">
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl"> Contact Us
Let&apos;s <span className="text-red-500">Talk</span> About Your </p>
Business <h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
Let&apos;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> </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&apos;re here to help. Ready to get started? Have questions? We&apos;re here to help.
Reach out for a free consultation and needs analysis. Reach out for a free consultation and needs analysis.
</p> </p>
</div> </div>
</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> </section>
{/* Contact Content */} {/* Contact Content */}
@ -129,8 +135,10 @@ export default function ContactPage() {
</p> </p>
{isSubmitted ? ( {isSubmitted ? (
<div className="mt-8 bg-green-50 border border-green-200 rounded-xl p-8 text-center"> <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">
<CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" /> <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"> <h3 className="text-xl font-semibold text-zinc-900">
Message Sent! Message Sent!
</h3> </h3>
@ -149,7 +157,7 @@ export default function ContactPage() {
message: "", 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 Send another message
</button> </button>
@ -157,10 +165,10 @@ export default function ContactPage() {
) : ( ) : (
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div> <div className="group">
<label <label
htmlFor="name" 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 * Full Name *
</label> </label>
@ -171,14 +179,14 @@ export default function ContactPage() {
required required
value={formData.name} value={formData.name}
onChange={handleChange} 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" placeholder="John Smith"
/> />
</div> </div>
<div> <div className="group">
<label <label
htmlFor="email" 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 * Email Address *
</label> </label>
@ -189,17 +197,17 @@ export default function ContactPage() {
required required
value={formData.email} value={formData.email}
onChange={handleChange} 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" placeholder="john@company.com"
/> />
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div> <div className="group">
<label <label
htmlFor="phone" 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 Phone Number
</label> </label>
@ -209,14 +217,14 @@ export default function ContactPage() {
name="phone" name="phone"
value={formData.phone} value={formData.phone}
onChange={handleChange} 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" placeholder="(555) 123-4567"
/> />
</div> </div>
<div> <div className="group">
<label <label
htmlFor="company" 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 Company Name
</label> </label>
@ -226,16 +234,16 @@ export default function ContactPage() {
name="company" name="company"
value={formData.company} value={formData.company}
onChange={handleChange} 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" placeholder="Your Company LLC"
/> />
</div> </div>
</div> </div>
<div> <div className="group">
<label <label
htmlFor="preferredContact" 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 Preferred Contact Method
</label> </label>
@ -244,7 +252,7 @@ export default function ContactPage() {
name="preferredContact" name="preferredContact"
value={formData.preferredContact} value={formData.preferredContact}
onChange={handleChange} 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="email">Email</option>
<option value="phone">Phone</option> <option value="phone">Phone</option>
@ -252,10 +260,10 @@ export default function ContactPage() {
</select> </select>
</div> </div>
<div> <div className="group">
<label <label
htmlFor="message" 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 * Message *
</label> </label>
@ -266,25 +274,39 @@ export default function ContactPage() {
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleChange} 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..." placeholder="Tell us about your business needs..."
/> />
</div> </div>
<button <Button type="submit" disabled={isSubmitting} className="w-full">
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"
>
{isSubmitting ? ( {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 Message
<Send className="ml-2 h-5 w-5" /> <Send className="ml-2 h-5 w-5" />
</> </>
)} )}
</button> </Button>
</form> </form>
)} )}
</div> </div>
@ -300,10 +322,14 @@ export default function ContactPage() {
</p> </p>
<div className="mt-8 space-y-6"> <div className="mt-8 space-y-6">
{contactInfo.map((item) => ( {contactInfo.map((item, index) => (
<div key={item.label} className="flex items-start gap-4"> <div
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0"> key={item.label}
<item.icon className="h-6 w-6 text-red-600" /> 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>
<div> <div>
<p className="font-medium text-zinc-900">{item.label}</p> <p className="font-medium text-zinc-900">{item.label}</p>
@ -312,7 +338,7 @@ export default function ContactPage() {
<a <a
key={value} key={value}
href={item.href} 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} {value}
</a> </a>
@ -339,7 +365,7 @@ export default function ContactPage() {
href={social.href} href={social.href}
target="_blank" target="_blank"
rel="noopener noreferrer" 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> <span className="sr-only">{social.name}</span>
<social.icon className="h-5 w-5" /> <social.icon className="h-5 w-5" />
@ -349,14 +375,17 @@ export default function ContactPage() {
</div> </div>
{/* Se Habla Espanol */} {/* Se Habla Espanol */}
<div className="mt-12 bg-red-50 rounded-xl p-6"> <div className="mt-12 relative group overflow-hidden rounded-xl">
<p className="text-xl font-semibold text-red-600"> <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" />
Se Habla Espanol <div className="relative bg-red-50 rounded-xl p-6 border border-red-100">
</p> <p className="text-xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
<p className="mt-2 text-zinc-600"> Se Habla Espanol
We proudly serve our Spanish-speaking clients in their </p>
preferred language. <p className="mt-2 text-zinc-600">
</p> We proudly serve our Spanish-speaking clients in their
preferred language.
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -364,8 +393,9 @@ export default function ContactPage() {
</section> </section>
{/* CTA Banner */} {/* CTA Banner */}
<section className="bg-zinc-900 py-12 md:py-16"> <section className="relative animated-gradient-bg py-12 md:py-16 overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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"> <div className="text-center">
<h2 className="text-2xl font-semibold text-white sm:text-3xl"> <h2 className="text-2xl font-semibold text-white sm:text-3xl">
Got QuickBooks? We&apos;ve Got Answers. Got QuickBooks? We&apos;ve Got Answers.
@ -373,13 +403,10 @@ export default function ContactPage() {
<p className="mt-2 text-zinc-400"> <p className="mt-2 text-zinc-400">
Call us now for immediate assistance. Call us now for immediate assistance.
</p> </p>
<a <Button href="tel:3053878582" size="lg" className="mt-6">
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"
>
<Phone className="mr-2 h-6 w-6" /> <Phone className="mr-2 h-6 w-6" />
(305) 387-8582 (305) 387-8582
</a> </Button>
</div> </div>
</div> </div>
</section> </section>

208
app/globals.css
View File

@ -2,9 +2,217 @@
@theme inline { @theme inline {
--font-sans: var(--font-inter); --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 { body {
background: #ffffff; background: #ffffff;
color: #18181b; 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;
}

161
app/page.tsx
View File

@ -1,3 +1,5 @@
"use client";
import Link from "next/link"; import Link from "next/link";
import { import {
Monitor, Monitor,
@ -9,6 +11,8 @@ import {
ArrowRight, ArrowRight,
Phone, Phone,
} from "lucide-react"; } from "lucide-react";
import AnimatedBackground from "./components/AnimatedBackground";
import Button from "./components/Button";
const services = [ const services = [
{ {
@ -56,45 +60,55 @@ export default function Home() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-zinc-900 text-white"> <section className="relative min-h-[90vh] flex items-center animated-gradient-bg text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-24 lg:px-8 lg:py-32"> <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"> <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 Certified QuickBooks Experts
</p> </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{" "} 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> </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 As Intuit Solution Providers with over 20 years of experience, we
deliver prompt, professional, and courteous service for all your deliver prompt, professional, and courteous service for all your
QuickBooks and accounting needs. QuickBooks and accounting needs.
</p> </p>
<div className="mt-10 flex flex-col sm:flex-row gap-4"> <div className="mt-10 flex flex-col sm:flex-row gap-4 animate-slide-up animation-delay-200">
<Link <Button href="/contact" size="lg">
href="/contact"
className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
>
Get a Free Consultation Get a Free Consultation
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
</Link> </Button>
<a <Button
href="tel:3053878582" 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" /> <Phone className="mr-2 h-5 w-5" />
(305) 387-8582 (305) 387-8582
</a> </Button>
</div> </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>
</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> </section>
{/* Value Proposition */} {/* Value Proposition */}
<section className="bg-white py-16 md:py-24"> <section className="bg-white py-16 md:py-24 relative overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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"> <div className="text-center max-w-3xl mx-auto">
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl"> <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
The Right Way to Do Business The Right Way to Do Business
@ -109,9 +123,15 @@ export default function Home() {
{/* Stats */} {/* Stats */}
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3"> <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
{stats.map((stat) => ( {stats.map((stat, index) => (
<div key={stat.label} className="text-center"> <div
<p className="text-4xl font-bold text-red-600">{stat.value}</p> 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"> <p className="mt-2 text-sm font-medium text-zinc-600">
{stat.label} {stat.label}
</p> </p>
@ -122,7 +142,7 @@ export default function Home() {
</section> </section>
{/* Services 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="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-3xl mx-auto mb-12"> <div className="text-center max-w-3xl mx-auto mb-12">
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl"> <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
@ -135,15 +155,16 @@ export default function Home() {
</div> </div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{services.map((service) => ( {services.map((service, index) => (
<div <div
key={service.title} 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"> <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" /> <service.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
</div> </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} {service.title}
</h3> </h3>
<p className="mt-2 text-sm text-zinc-600"> <p className="mt-2 text-sm text-zinc-600">
@ -156,10 +177,10 @@ export default function Home() {
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<Link <Link
href="/services" 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 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> </Link>
</div> </div>
</div> </div>
@ -181,41 +202,62 @@ export default function Home() {
and troubleshooting. and troubleshooting.
</p> </p>
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3"> <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
{credentials.map((credential) => ( {credentials.map((credential, index) => (
<div key={credential} className="flex items-center gap-2"> <div
<CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0" /> key={credential}
<span className="text-sm text-zinc-700">{credential}</span> 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>
</div> </div>
<div className="bg-zinc-100 rounded-2xl p-8 lg:p-12"> <div className="relative group">
<div className="flex items-center gap-4 mb-6"> <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" />
<Award className="h-12 w-12 text-red-600" /> <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> <div className="flex items-center gap-4 mb-6">
<p className="font-semibold text-zinc-900"> <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">
Intuit Solution Provider <Award className="h-7 w-7 text-white" />
</p> </div>
<p className="text-sm text-zinc-600">Since 2008</p> <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">
&ldquo;Our clients need more than entry-level accounting
solutions. They need software with more functions, security,
transaction volume and system controls.&rdquo;
</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>
<blockquote className="text-zinc-700 italic">
&ldquo;Our clients need more than entry-level accounting
solutions. They need software with more functions, security,
transaction volume and system controls.&rdquo;
</blockquote>
<p className="mt-4 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> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="bg-red-600 py-12 md:py-16"> <section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="text-center md:text-left"> <div className="text-center md:text-left">
<h2 className="text-2xl font-semibold text-white sm:text-3xl"> <h2 className="text-2xl font-semibold text-white sm:text-3xl">
@ -226,19 +268,20 @@ export default function Home() {
</p> </p>
</div> </div>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<a <Button
href="tel:3053878582" 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" /> <Phone className="mr-2 h-5 w-5" />
Call Now Call Now
</a> </Button>
<Link <Button
href="/contact" 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 Contact Us
</Link> </Button>
</div> </div>
</div> </div>
</div> </div>

93
app/services/page.tsx
View File

@ -1,3 +1,5 @@
"use client";
import Link from "next/link"; import Link from "next/link";
import { import {
Settings, Settings,
@ -18,12 +20,8 @@ import {
Truck, Truck,
UtensilsCrossed, UtensilsCrossed,
} from "lucide-react"; } from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
export const metadata = { import Button from "../components/Button";
title: "Services | AB Group LLC",
description:
"Expert QuickBooks consulting, setup, training, and support services. On-site, remote, and telephone support available.",
};
const services = [ const services = [
{ {
@ -134,21 +132,27 @@ export default function ServicesPage() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-zinc-900 text-white"> <section className="relative animated-gradient-bg text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24"> <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"> <div className="max-w-3xl">
<p className="text-red-500 font-semibold mb-4">Our Services</p> <p className="text-red-400 font-semibold mb-4 animate-fade-in">
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl"> Our Services
</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
Expert Solutions for Your{" "} 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> </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 As Intuit Solution Providers, we offer a comprehensive range of
services to help your business succeed. From initial setup to services to help your business succeed. From initial setup to
ongoing support, we&apos;re here for you every step of the way. ongoing support, we&apos;re here for you every step of the way.
</p> </p>
</div> </div>
</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> </section>
{/* Services Grid */} {/* Services Grid */}
@ -165,15 +169,16 @@ export default function ServicesPage() {
</div> </div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{services.map((service) => ( {services.map((service, index) => (
<div <div
key={service.title} 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"> <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" /> <service.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
</div> </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} {service.title}
</h3> </h3>
<p className="mt-2 text-sm text-zinc-600"> <p className="mt-2 text-sm text-zinc-600">
@ -209,12 +214,16 @@ export default function ServicesPage() {
</div> </div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
{supportTypes.map((type) => ( {supportTypes.map((type, index) => (
<div key={type.title} className="text-center"> <div
<div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> key={type.title}
<type.icon className="h-8 w-8 text-white" /> 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> </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} {type.title}
</h3> </h3>
<p className="mt-2 text-zinc-600">{type.description}</p> <p className="mt-2 text-zinc-600">{type.description}</p>
@ -238,13 +247,14 @@ export default function ServicesPage() {
</div> </div>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6"> <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
{industries.map((industry) => ( {industries.map((industry, index) => (
<div <div
key={industry.name} 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" /> <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"> <p className="text-sm font-medium text-zinc-700 group-hover:text-white transition-colors duration-300">
{industry.name} {industry.name}
</p> </p>
</div> </div>
@ -258,8 +268,9 @@ export default function ServicesPage() {
</section> </section>
{/* Process Section */} {/* Process Section */}
<section className="bg-zinc-900 text-white py-16 md:py-24"> <section className="relative animated-gradient-bg text-white py-16 md:py-24 overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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"> <div className="text-center max-w-3xl mx-auto mb-12">
<h2 className="text-3xl font-semibold sm:text-4xl">How We Work</h2> <h2 className="text-3xl font-semibold sm:text-4xl">How We Work</h2>
<p className="mt-4 text-lg text-zinc-400"> <p className="mt-4 text-lg text-zinc-400">
@ -294,12 +305,18 @@ export default function ServicesPage() {
description: description:
"We train your team and provide ongoing support to ensure long-term success.", "We train your team and provide ongoing support to ensure long-term success.",
}, },
].map((item) => ( ].map((item, index) => (
<div key={item.step} className="text-center"> <div
<div className="text-4xl font-bold text-red-500 mb-4"> 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} {item.step}
</div> </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> <p className="text-zinc-400">{item.description}</p>
</div> </div>
))} ))}
@ -308,8 +325,9 @@ export default function ServicesPage() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="bg-red-600 py-12 md:py-16"> <section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="text-center md:text-left"> <div className="text-center md:text-left">
<h2 className="text-2xl font-semibold text-white sm:text-3xl"> <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. Contact us today for a free consultation and needs analysis.
</p> </p>
</div> </div>
<Link <Button
href="/contact" 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 Get a Free Quote
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Button>
</div> </div>
</div> </div>
</section> </section>

145
app/solutions/page.tsx
View File

@ -1,4 +1,5 @@
import Link from "next/link"; "use client";
import { import {
Building2, Building2,
Users, Users,
@ -12,13 +13,10 @@ import {
Star, Star,
Zap, Zap,
Globe, Globe,
Phone,
} from "lucide-react"; } from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
export const metadata = { import Button from "../components/Button";
title: "Solutions | AB Group LLC",
description:
"QuickBooks Enterprise, Pro, Premier, and Point of Sale solutions. Find the right accounting software for your business.",
};
const solutions = [ const solutions = [
{ {
@ -137,42 +135,51 @@ export default function SolutionsPage() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-zinc-900 text-white"> <section className="relative animated-gradient-bg text-white overflow-hidden">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24"> <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"> <div className="max-w-3xl">
<p className="text-red-500 font-semibold mb-4">Our Solutions</p> <p className="text-red-400 font-semibold mb-4 animate-fade-in">
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl"> Our Solutions
Find the Right <span className="text-red-500">QuickBooks</span>{" "} </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 for Your Business
</h1> </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 From small startups to growing enterprises, we help you choose and
implement the perfect QuickBooks solution. Save thousands compared implement the perfect QuickBooks solution. Save thousands compared
to enterprise alternatives. to enterprise alternatives.
</p> </p>
</div> </div>
</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> </section>
{/* Solutions */} {/* Solutions */}
{solutions.map((solution, index) => ( {solutions.map((solution, index) => (
<section <section
key={solution.id} 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"> <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24 lg:px-8">
{solution.featured && ( {solution.featured && (
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<Star className="h-5 w-5 text-red-600 fill-red-600" /> <div className="flex items-center gap-1 px-3 py-1 bg-gradient-to-r from-red-500 to-red-600 rounded-full">
<span className="text-sm font-semibold text-red-600 uppercase tracking-wide"> <Star className="h-4 w-4 text-white fill-white" />
Most Popular <span className="text-xs font-semibold text-white uppercase tracking-wide">
</span> Most Popular
</span>
</div>
</div> </div>
)} )}
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16"> <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
<div> <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} {solution.tagline}
</p> </p>
<h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl"> <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
@ -183,37 +190,39 @@ export default function SolutionsPage() {
</p> </p>
<ul className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3"> <ul className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
{solution.features.map((feature) => ( {solution.features.map((feature, idx) => (
<li key={feature} className="flex items-center gap-2"> <li
<CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0" /> 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> <span className="text-sm text-zinc-700">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
<div className="mt-8"> <div className="mt-8">
<Link <Button href="/contact">
href="/contact"
className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
>
Get a Quote Get a Quote
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Button>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">
{solution.highlights.map((highlight) => ( {solution.highlights.map((highlight, idx) => (
<div <div
key={highlight.title} 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="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0"> <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" /> <highlight.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
</div> </div>
<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} {highlight.title}
</h3> </h3>
<p className="mt-1 text-sm text-zinc-600"> <p className="mt-1 text-sm text-zinc-600">
@ -230,8 +239,9 @@ export default function SolutionsPage() {
))} ))}
{/* Integrations */} {/* Integrations */}
<section className="bg-zinc-900 text-white py-16 md:py-24"> <section className="relative animated-gradient-bg text-white py-16 md:py-24 overflow-hidden">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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"> <div className="text-center max-w-3xl mx-auto mb-12">
<h2 className="text-3xl font-semibold sm:text-4xl"> <h2 className="text-3xl font-semibold sm:text-4xl">
Integrations & Add-ons Integrations & Add-ons
@ -243,12 +253,13 @@ export default function SolutionsPage() {
</div> </div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
{integrations.map((integration) => ( {integrations.map((integration, index) => (
<div <div
key={integration} 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} {integration}
</p> </p>
</div> </div>
@ -264,38 +275,39 @@ export default function SolutionsPage() {
{/* Comparison CTA */} {/* Comparison CTA */}
<section className="bg-white py-16 md:py-24"> <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="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"> <div className="relative group">
<Building2 className="h-12 w-12 text-red-600 mx-auto mb-4" /> <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" />
<h2 className="text-2xl font-semibold text-zinc-900 sm:text-3xl"> <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">
Not Sure Which Solution is Right for You? <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">
</h2> <Building2 className="h-8 w-8 text-white" />
<p className="mt-4 text-zinc-600 max-w-2xl mx-auto"> </div>
Let our experts analyze your business needs and recommend the <h2 className="text-2xl font-semibold text-zinc-900 sm:text-3xl">
perfect QuickBooks solution. We&apos;ll help you choose the right Not Sure Which Solution is Right for You?
edition and configure it for your specific requirements. </h2>
</p> <p className="mt-4 text-zinc-600 max-w-2xl mx-auto">
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center"> Let our experts analyze your business needs and recommend the
<Link perfect QuickBooks solution. We&apos;ll help you choose the
href="/contact" right edition and configure it for your specific requirements.
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" </p>
> <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
Schedule a Free Consultation <Button href="/contact">
<ArrowRight className="ml-2 h-5 w-5" /> Schedule a Free Consultation
</Link> <ArrowRight className="ml-2 h-5 w-5" />
<a </Button>
href="tel:3053878582" <Button href="tel:3053878582" variant="secondary">
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" <Phone className="mr-2 h-5 w-5" />
> Call (305) 387-8582
Call (305) 387-8582 </Button>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* CTA Banner */} {/* CTA Banner */}
<section className="bg-red-600 py-12 md:py-16"> <section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <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="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="text-center md:text-left"> <div className="text-center md:text-left">
<h2 className="text-2xl font-semibold text-white sm:text-3xl"> <h2 className="text-2xl font-semibold text-white sm:text-3xl">
@ -306,13 +318,14 @@ export default function SolutionsPage() {
alternatives. alternatives.
</p> </p>
</div> </div>
<Link <Button
href="/contact" 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 Get Your Quote
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Button>
</div> </div>
</div> </div>
</section> </section>

1177
yarn.lock
View File

File diff suppressed because it is too large Load Diff