416 lines
16 KiB
TypeScript
416 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Phone,
|
|
Mail,
|
|
MapPin,
|
|
Clock,
|
|
Facebook,
|
|
Twitter,
|
|
Linkedin,
|
|
Send,
|
|
CheckCircle,
|
|
} from "lucide-react";
|
|
import AnimatedBackground from "../components/AnimatedBackground";
|
|
import Button from "../components/Button";
|
|
|
|
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);
|
|
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="relative animated-gradient-bg text-white overflow-hidden">
|
|
<AnimatedBackground variant="dark" orbCount={5} />
|
|
<div className="relative 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-400 font-semibold mb-4 animate-fade-in">
|
|
Contact Us
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
|
|
Let's{" "}
|
|
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
|
|
Talk
|
|
</span>{" "}
|
|
About Your Business
|
|
</h1>
|
|
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
|
|
Ready to get started? Have questions? We're here to help.
|
|
Reach out for a free consultation and needs analysis.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
|
|
</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-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-8 text-center animate-scale-in">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle className="h-8 w-8 text-white" />
|
|
</div>
|
|
<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 transition-colors"
|
|
>
|
|
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 className="group">
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300"
|
|
placeholder="John Smith"
|
|
/>
|
|
</div>
|
|
<div className="group">
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300"
|
|
placeholder="john@company.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
<div className="group">
|
|
<label
|
|
htmlFor="phone"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300"
|
|
placeholder="(555) 123-4567"
|
|
/>
|
|
</div>
|
|
<div className="group">
|
|
<label
|
|
htmlFor="company"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300"
|
|
placeholder="Your Company LLC"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group">
|
|
<label
|
|
htmlFor="preferredContact"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300 cursor-pointer"
|
|
>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Phone</option>
|
|
<option value="either">Either</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="group">
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
|
|
>
|
|
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 hover:border-zinc-300"
|
|
placeholder="Tell us about your business needs..."
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" disabled={isSubmitting} className="w-full">
|
|
{isSubmitting ? (
|
|
<span className="flex items-center gap-2">
|
|
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
Sending...
|
|
</span>
|
|
) : (
|
|
<>
|
|
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, index) => (
|
|
<div
|
|
key={item.label}
|
|
className="flex items-start gap-4 group"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
|
|
<item.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
|
|
</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 duration-300"
|
|
>
|
|
{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-gradient-to-br hover:from-red-500 hover:to-red-700 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/20"
|
|
>
|
|
<span className="sr-only">{social.name}</span>
|
|
<social.icon className="h-5 w-5" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Se Habla Espanol */}
|
|
<div className="mt-12 relative group overflow-hidden rounded-xl">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-red-500 to-red-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300" />
|
|
<div className="relative bg-red-50 rounded-xl p-6 border border-red-100">
|
|
<p className="text-xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
|
|
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>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Banner */}
|
|
<section className="relative animated-gradient-bg py-12 md:py-16 overflow-hidden">
|
|
<AnimatedBackground variant="dark" orbCount={4} />
|
|
<div className="relative 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>
|
|
<Button href="tel:3053878582" size="lg" className="mt-6">
|
|
<Phone className="mr-2 h-6 w-6" />
|
|
(305) 387-8582
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|