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
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
9eebabdc7c
commit
238b1c9a87
+128
-91
@@ -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">
|
||||
<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.”
|
||||
</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">
|
||||
<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>
|
||||
<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.”
|
||||
</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 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>
|
||||
</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,36 +303,40 @@ 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>
|
||||
<h3 className="text-2xl font-semibold text-zinc-900">
|
||||
Nicolle Alcazar, MSF
|
||||
</h3>
|
||||
<p className="text-red-600 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.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-2">
|
||||
{[
|
||||
"MSF",
|
||||
"ISP",
|
||||
"Advanced ProAdvisor",
|
||||
"Enterprise Certified",
|
||||
].map((badge) => (
|
||||
<span
|
||||
key={badge}
|
||||
className="px-3 py-1 bg-red-100 text-red-700 text-sm font-medium rounded-full"
|
||||
>
|
||||
{badge}
|
||||
</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-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.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-2">
|
||||
{[
|
||||
"MSF",
|
||||
"ISP",
|
||||
"Advanced ProAdvisor",
|
||||
"Enterprise Certified",
|
||||
].map((badge, index) => (
|
||||
<span
|
||||
key={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"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,9 +344,13 @@ export default function AboutPage() {
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user