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>

app/components/Footer.tsx

@@ -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">
+            &copy; {new Date().getFullYear()} AB Group LLC. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

app/components/Header.tsx

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

app/globals.css

@@ -1,26 +1,10 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-sans: var(--font-inter);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: #ffffff;
+  color: #18181b;
 }

app/layout.tsx

@@ -1,20 +1,18 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const inter = Inter({
   subsets: ["latin"],
+  variable: "--font-inter",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "AB Group LLC | QuickBooks Experts & Business Consultants",
+  description:
+    "Certified QuickBooks ProAdvisors providing expert consulting, setup, training, and support for small and mid-size businesses. Se Habla Espanol.",
 };
 
 export default function RootLayout({
@@ -24,10 +22,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`${inter.variable} font-sans antialiased`}>
+        <Header />
+        <main>{children}</main>
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -1,65 +1,248 @@
-import Image from "next/image";
+import Link from "next/link";
+import {
+  Monitor,
+  HeadphonesIcon,
+  GraduationCap,
+  Settings,
+  Award,
+  CheckCircle,
+  ArrowRight,
+  Phone,
+} from "lucide-react";
+
+const services = [
+  {
+    icon: Settings,
+    title: "QuickBooks Setup",
+    description:
+      "Complete installation and configuration tailored to your business needs and industry requirements.",
+  },
+  {
+    icon: GraduationCap,
+    title: "Training & Support",
+    description:
+      "Comprehensive training programs and ongoing support to maximize your software investment.",
+  },
+  {
+    icon: Monitor,
+    title: "Remote Access",
+    description:
+      "Secure remote access solutions for QuickBooks Enterprise, Premier, and Pro editions.",
+  },
+  {
+    icon: HeadphonesIcon,
+    title: "Consulting",
+    description:
+      "Expert business consulting to streamline your accounting and financial processes.",
+  },
+];
+
+const credentials = [
+  "Intuit Solution Provider",
+  "QuickBooks Advanced ProAdvisor",
+  "QuickBooks Enterprise Certified",
+  "Point of Sale Certified",
+  "Master of Science in Finance",
+  "Master of Science in Accounting",
+];
+
+const stats = [
+  { value: "20+", label: "Years Experience" },
+  { value: "1000+", label: "Clients Served" },
+  { value: "100%", label: "Satisfaction" },
+];
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/ab-group-llc/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+    <>
+      {/* Hero Section */}
+      <section className="bg-zinc-900 text-white">
+        <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
+          <div className="max-w-3xl">
+            <p className="text-red-500 font-semibold mb-4">
+              Certified QuickBooks Experts
+            </p>
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+              Your Business Deserves{" "}
+              <span className="text-red-500">Expert</span> Financial Solutions
+            </h1>
+            <p className="mt-6 text-lg text-zinc-300 max-w-2xl">
+              As Intuit Solution Providers with over 20 years of experience, we
+              deliver prompt, professional, and courteous service for all your
+              QuickBooks and accounting needs.
+            </p>
+            <div className="mt-10 flex flex-col sm:flex-row gap-4">
+              <Link
+                href="/contact"
+                className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
+              >
+                Get a Free Consultation
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Link>
+              <a
+                href="tel:3053878582"
+                className="inline-flex items-center justify-center px-6 py-3 bg-white/10 text-white font-medium rounded-lg hover:bg-white/20 transition-colors"
+              >
+                <Phone className="mr-2 h-5 w-5" />
+                (305) 387-8582
+              </a>
+            </div>
+            <p className="mt-6 text-red-400 font-medium">Se Habla Espanol</p>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/ab-group-llc/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </section>
+
+      {/* Value Proposition */}
+      <section className="bg-white py-16 md:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto">
+            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
+              The Right Way to Do Business
+            </h2>
+            <p className="mt-4 text-lg text-zinc-600">
+              We specialize in small and mid-size business solutions. Our team
+              is highly qualified in Business Management, Accounting, and
+              Finance—making us your one-stop solution for keeping your business
+              running smoothly.
+            </p>
+          </div>
+
+          {/* Stats */}
+          <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
+            {stats.map((stat) => (
+              <div key={stat.label} className="text-center">
+                <p className="text-4xl font-bold text-red-600">{stat.value}</p>
+                <p className="mt-2 text-sm font-medium text-zinc-600">
+                  {stat.label}
+                </p>
+              </div>
+            ))}
+          </div>
         </div>
-      </main>
-    </div>
+      </section>
+
+      {/* Services Section */}
+      <section className="bg-zinc-50 py-16 md:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-12">
+            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
+              How We Can Help
+            </h2>
+            <p className="mt-4 text-lg text-zinc-600">
+              We provide on-site, telephone, and remote access support for all
+              our services.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {services.map((service) => (
+              <div
+                key={service.title}
+                className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
+              >
+                <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>
+                <h3 className="text-lg font-semibold text-zinc-900">
+                  {service.title}
+                </h3>
+                <p className="mt-2 text-sm text-zinc-600">
+                  {service.description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-12 text-center">
+            <Link
+              href="/services"
+              className="inline-flex items-center text-red-600 font-medium hover:text-red-700 transition-colors"
+            >
+              View All Services
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Credentials Section */}
+      <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="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16 items-center">
+            <div>
+              <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
+                Certified Experts You Can Trust
+              </h2>
+              <p className="mt-4 text-lg text-zinc-600">
+                As Intuit Solution Providers, we hold the highest degree of
+                training, experience, and certifications in our field. We belong
+                to an elite group of consultants with extensive experience in
+                QuickBooks installations, training, support, data migrations,
+                and troubleshooting.
+              </p>
+              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {credentials.map((credential) => (
+                  <div key={credential} className="flex items-center gap-2">
+                    <CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0" />
+                    <span className="text-sm text-zinc-700">{credential}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="bg-zinc-100 rounded-2xl p-8 lg:p-12">
+              <div className="flex items-center gap-4 mb-6">
+                <Award className="h-12 w-12 text-red-600" />
+                <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">
+                &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>
+      </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">
+          <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">
+                Got QuickBooks? We&apos;ve Got Answers.
+              </h2>
+              <p className="mt-2 text-red-100">
+                Call us today for a free needs analysis and quote.
+              </p>
+            </div>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <a
+                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"
+              >
+                <Phone className="mr-2 h-5 w-5" />
+                Call Now
+              </a>
+              <Link
+                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"
+              >
+                Contact Us
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
   );
 }

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "lucide-react": "^0.562.0",
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3"