From 99059c0ba7ad54da0569218da673749e23a3f7c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Mora?= Date: Tue, 23 Dec 2025 18:37:12 -0500 Subject: [PATCH] feat(home): build homepage with hero, services, and credentials sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/components/Footer.tsx | 127 + app/components/Header.tsx | 95 + app/globals.css | 22 +- app/layout.tsx | 26 +- app/page.tsx | 299 +- package-lock.json | 6560 +++++++++++++++++++++++++++++++++++++ package.json | 1 + 7 files changed, 7039 insertions(+), 91 deletions(-) create mode 100644 app/components/Footer.tsx create mode 100644 app/components/Header.tsx create mode 100644 package-lock.json diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx new file mode 100644 index 0000000..3b8ce7a --- /dev/null +++ b/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 ( +
+
+
+ {/* Brand & Description */} +
+ +
+ AB +
+ AB Group + +

+ Your trusted QuickBooks experts. Providing prompt, professional, + and courteous service since 2000. +

+

Se Habla Espanol

+
+ + {/* Quick Links */} +
+

+ Quick Links +

+
    + {navigation.main.map((item) => ( +
  • + + {item.name} + +
    • + ))} +
+
+ + {/* Contact Info */} +
+

+ Contact Us +

+ + + {/* Social Links */} +
+ {navigation.social.map((item) => ( + + {item.name} + + + ))} +
+
+
+ + {/* Bottom Bar */} +
+

+ © {new Date().getFullYear()} AB Group LLC. All rights reserved. +

+
+
+
+ ); +} diff --git a/app/components/Header.tsx b/app/components/Header.tsx new file mode 100644 index 0000000..0661719 --- /dev/null +++ b/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 ( +
+ + + {/* Mobile Navigation */} + {mobileMenuOpen && ( +
+
+ {navigation.map((item) => ( + setMobileMenuOpen(false)} + > + {item.name} + + ))} + setMobileMenuOpen(false)} + > + Get a Quote + +
+
+ )} +
+ ); +} diff --git a/app/globals.css b/app/globals.css index a2dc41e..2233b8c 100644 --- a/app/globals.css +++ b/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; } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..8bbc4fd 100644 --- a/app/layout.tsx +++ b/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 ( - - {children} + +
+
{children}
+