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