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