Add src/app/contact/page.tsx
This commit is contained in:
178
src/app/contact/page.tsx
Normal file
178
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { MapPin, Phone, Mail } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const handleContactSubmit = (data: Record<string, string>) => {
|
||||
console.log("Contact form submitted:", data);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="noise"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="National Plumbing"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
bottomLeftText="Jerome Avenue, Nassau"
|
||||
bottomRightText="(242) 555-0100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get In Touch"
|
||||
description="Have questions about our plumbing supplies or services? Fill out the form below and our team will get back to you within 24 hours. You can also reach us by phone or visit our showroom in Nassau."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
||||
{ name: "company", type: "text", placeholder: "Company Name (Optional)", required: false }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "How can we help you? Tell us about your project or inquiry...", rows: 5,
|
||||
required: true
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-with-tablet-delivering-mail_23-2147767737.jpg"
|
||||
imageAlt="Nassau location map and customer service"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
onSubmit={handleContactSubmit}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location" className="py-20">
|
||||
<div className="container mx-auto px-4 max-w-6xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold mb-4">Visit Our Nassau Location</h2>
|
||||
<p className="text-lg text-gray-600">Find us at our convenient Jerome Avenue showroom</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="flex gap-4">
|
||||
<MapPin className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Our Address</h3>
|
||||
<p className="text-gray-600">Jerome Avenue<br />Nassau, Bahamas</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Phone className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Phone</h3>
|
||||
<p className="text-gray-600"><a href="tel:(242)555-0100" className="hover:text-primary-cta transition">(242) 555-0100</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Mail className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Email</h3>
|
||||
<p className="text-gray-600"><a href="mailto:info@nationalplumbingbahamas.com" className="hover:text-primary-cta transition">info@nationalplumbingbahamas.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-6 mt-8">
|
||||
<h4 className="font-semibold mb-4">Business Hours</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex justify-between"><span>Monday - Friday:</span> <span>7:30 AM - 5:00 PM</span></li>
|
||||
<li className="flex justify-between"><span>Saturday:</span> <span>9:00 AM - 2:00 PM</span></li>
|
||||
<li className="flex justify-between"><span>Sunday:</span> <span>Closed</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg overflow-hidden shadow-lg h-96">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3730.2833169832097!2d-77.03528!3d25.07923!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x892f606ce5000001%3A0x1234567890abcdef!2sJerome%20Ave%2C%20Nassau%2C%20Bahamas!5e0!3m2!1sen!2sus!4v1234567890123"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="quote" data-section="quote" className="py-20 bg-gradient-to-r from-primary-cta to-accent">
|
||||
<div className="container mx-auto px-4 max-w-4xl text-center text-white">
|
||||
<h2 className="text-4xl font-bold mb-6">Request a Quote</h2>
|
||||
<p className="text-lg mb-8 opacity-90">For bulk orders, commercial projects, or wholesale inquiries, submit a quote request and our sales team will contact you with competitive pricing and solutions tailored to your needs.</p>
|
||||
<button className="bg-white text-primary-cta px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">
|
||||
Submit Quote Request
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-delivery-man-concept_23-2148684781.jpg"
|
||||
imageAlt="Fast plumbing supply delivery service"
|
||||
logoText="National Plumbing Supply"
|
||||
copyrightText="© 2024 National Plumbing Supply. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Our Services", href: "/#features" },
|
||||
{ label: "Products", href: "/#products" },
|
||||
{ label: "Contact", href: "/contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "In-Store Pickup", href: "#" },
|
||||
{ label: "Fast Delivery", href: "#" },
|
||||
{ label: "Expert Consultation", href: "/contact" },
|
||||
{ label: "Bulk Orders", href: "/contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Jerome Ave, Nassau, Bahamas", href: "#" },
|
||||
{ label: "Phone: (242) 555-0100", href: "tel:(242)555-0100" },
|
||||
{ label: "Email: info@nationalplumbingbahamas.com", href: "mailto:info@nationalplumbingbahamas.com" },
|
||||
{ label: "Hours: 7:30 AM - 5:00 PM", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Warranty Info", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user