feat(home): build homepage with hero, services, and credentials sections
- Add Header component with responsive navigation and mobile menu - Add Footer component with contact info and social links - Create homepage with hero section, value proposition, service cards, credentials section, and CTA banner - Update layout with Inter font and proper metadata - Install lucide-react for icons 🤖 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
5cd505e1f7
commit
99059c0ba7
@@ -0,0 +1,127 @@
|
||||
import Link from "next/link";
|
||||
import { Facebook, Twitter, Linkedin, Phone, Mail, MapPin } from "lucide-react";
|
||||
|
||||
const navigation = {
|
||||
main: [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "Solutions", href: "/solutions" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Contact", href: "/contact" },
|
||||
],
|
||||
social: [
|
||||
{
|
||||
name: "Facebook",
|
||||
href: "https://www.facebook.com/quickbooks.easybutton",
|
||||
icon: Facebook,
|
||||
},
|
||||
{
|
||||
name: "X",
|
||||
href: "https://x.com/Nicky_QB_Expert/",
|
||||
icon: Twitter,
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://www.linkedin.com/in/nicollealcazar/",
|
||||
icon: Linkedin,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-zinc-900 text-white">
|
||||
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
{/* Brand & Description */}
|
||||
<div className="space-y-4">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">AB</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-white">AB Group</span>
|
||||
</Link>
|
||||
<p className="text-zinc-400 text-sm max-w-xs">
|
||||
Your trusted QuickBooks experts. Providing prompt, professional,
|
||||
and courteous service since 2000.
|
||||
</p>
|
||||
<p className="text-red-500 font-medium text-sm">Se Habla Espanol</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-4">
|
||||
Quick Links
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{navigation.main.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-4">
|
||||
Contact Us
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<Phone className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm text-zinc-400">
|
||||
<p>(866) 218-3322</p>
|
||||
<p>(305) 387-8582</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="h-5 w-5 text-red-500 flex-shrink-0" />
|
||||
<a
|
||||
href="mailto:info@ab-groupllc.com"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
info@ab-groupllc.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<MapPin className="h-5 w-5 text-red-500 flex-shrink-0" />
|
||||
<span className="text-sm text-zinc-400">
|
||||
Florida, United States
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4 mt-6">
|
||||
{navigation.social.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="sr-only">{item.name}</span>
|
||||
<item.icon className="h-5 w-5" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-12 pt-8 border-t border-zinc-800">
|
||||
<p className="text-center text-xs text-zinc-500">
|
||||
© {new Date().getFullYear()} AB Group LLC. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "Solutions", href: "/solutions" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-zinc-100">
|
||||
<nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">AB</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-zinc-900 hidden sm:block">
|
||||
AB Group
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex md:items-center md:gap-8">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:block">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Get a Quote
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
type="button"
|
||||
className="md:hidden p-2 text-zinc-600 hover:text-zinc-900"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-6 w-6" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" />
|
||||
)}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-zinc-100 bg-white">
|
||||
<div className="px-4 py-4 space-y-3">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="block text-base font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
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"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Get a Quote
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user