feat(contact): add contact page with form and contact information
- Interactive contact form with validation - Form fields: name, email, phone, company, preferred contact, message - Success state after form submission - Contact information sidebar - Social media links - Se Habla Espanol notice - Call-to-action banner 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
5c9d5c4f1d
commit
9eebabdc7c
|
|
@ -0,0 +1,13 @@
|
|||
export const metadata = {
|
||||
title: "Contact Us | AB Group LLC",
|
||||
description:
|
||||
"Get in touch with AB Group LLC for QuickBooks consulting, training, and support. Call us or fill out our contact form for a free consultation.",
|
||||
};
|
||||
|
||||
export default function ContactLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return children;
|
||||
}
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
Clock,
|
||||
Facebook,
|
||||
Twitter,
|
||||
Linkedin,
|
||||
Send,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Phone",
|
||||
values: ["(866) 218-3322", "(305) 387-8582"],
|
||||
href: "tel:3053878582",
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
label: "Email",
|
||||
values: ["info@ab-groupllc.com"],
|
||||
href: "mailto:info@ab-groupllc.com",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Fax",
|
||||
values: ["(866) 705-8254"],
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Location",
|
||||
values: ["Florida, United States"],
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Hours",
|
||||
values: ["Monday - Friday", "By Appointment Only"],
|
||||
},
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{
|
||||
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 ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
company: "",
|
||||
preferredContact: "email",
|
||||
message: "",
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
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">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-red-500 font-semibold mb-4">Contact Us</p>
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Let's <span className="text-red-500">Talk</span> About Your
|
||||
Business
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-zinc-300">
|
||||
Ready to get started? Have questions? We're here to help.
|
||||
Reach out for a free consultation and needs analysis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Content */}
|
||||
<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">
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-zinc-900">
|
||||
Send Us a Message
|
||||
</h2>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
Fill out the form below and we'll get back to you as soon
|
||||
as possible.
|
||||
</p>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="mt-8 bg-green-50 border border-green-200 rounded-xl p-8 text-center">
|
||||
<CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-zinc-900">
|
||||
Message Sent!
|
||||
</h3>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
Thank you for contacting us. We'll be in touch shortly.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSubmitted(false);
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
company: "",
|
||||
preferredContact: "email",
|
||||
message: "",
|
||||
});
|
||||
}}
|
||||
className="mt-4 text-red-600 font-medium hover:text-red-700"
|
||||
>
|
||||
Send another message
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
placeholder="John Smith"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
placeholder="john@company.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="company"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Company Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
|
||||
placeholder="Your Company LLC"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="preferredContact"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Preferred Contact Method
|
||||
</label>
|
||||
<select
|
||||
id="preferredContact"
|
||||
name="preferredContact"
|
||||
value={formData.preferredContact}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white"
|
||||
>
|
||||
<option value="email">Email</option>
|
||||
<option value="phone">Phone</option>
|
||||
<option value="either">Either</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="block text-sm font-medium text-zinc-700"
|
||||
>
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none"
|
||||
placeholder="Tell us about your business needs..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full 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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
"Sending..."
|
||||
) : (
|
||||
<>
|
||||
Send Message
|
||||
<Send className="ml-2 h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-zinc-900">
|
||||
Contact Information
|
||||
</h2>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
Prefer to reach out directly? Here's how you can contact
|
||||
us.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
{contactInfo.map((item) => (
|
||||
<div key={item.label} className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<item.icon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-zinc-900">{item.label}</p>
|
||||
{item.values.map((value, idx) =>
|
||||
item.href && idx === 0 ? (
|
||||
<a
|
||||
key={value}
|
||||
href={item.href}
|
||||
className="block text-zinc-600 hover:text-red-600 transition-colors"
|
||||
>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
<p key={value} className="text-zinc-600">
|
||||
{value}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="mt-12">
|
||||
<h3 className="text-lg font-semibold text-zinc-900">
|
||||
Follow Us
|
||||
</h3>
|
||||
<div className="mt-4 flex gap-4">
|
||||
{socialLinks.map((social) => (
|
||||
<a
|
||||
key={social.name}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-red-100 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<span className="sr-only">{social.name}</span>
|
||||
<social.icon className="h-5 w-5" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Se Habla Espanol */}
|
||||
<div className="mt-12 bg-red-50 rounded-xl p-6">
|
||||
<p className="text-xl font-semibold text-red-600">
|
||||
Se Habla Espanol
|
||||
</p>
|
||||
<p className="mt-2 text-zinc-600">
|
||||
We proudly serve our Spanish-speaking clients in their
|
||||
preferred language.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Banner */}
|
||||
<section className="bg-zinc-900 py-12 md:py-16">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold text-white sm:text-3xl">
|
||||
Got QuickBooks? We've Got Answers.
|
||||
</h2>
|
||||
<p className="mt-2 text-zinc-400">
|
||||
Call us now for immediate assistance.
|
||||
</p>
|
||||
<a
|
||||
href="tel:3053878582"
|
||||
className="mt-6 inline-flex items-center justify-center px-8 py-4 bg-red-600 text-white text-lg font-medium rounded-lg hover:bg-red-700 transition-colors"
|
||||
>
|
||||
<Phone className="mr-2 h-6 w-6" />
|
||||
(305) 387-8582
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue