Add src/app/contact/page.tsx
This commit is contained in:
256
src/app/contact/page.tsx
Normal file
256
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Phone, Mail, MapPin, Heart } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", message: ""});
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log("Form submitted:", formData);
|
||||
// Reset form
|
||||
setFormData({ name: "", email: "", message: "" });
|
||||
};
|
||||
|
||||
const handlePhoneCall = () => {
|
||||
window.location.href = "tel:+1-385-555-0123";
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav" className="sticky top-0 z-50">
|
||||
<NavbarStyleCentered
|
||||
brandName="Provo River Inn"
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Rooms", id: "rooms" },
|
||||
{ name: "Amenities", id: "amenities" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Location", id: "location" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Your Stay", href: "/book"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero-contact" data-section="hero-contact">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Get in Touch"
|
||||
description="Have questions about your stay? Our friendly team is here to help. Reach out directly by phone or use our contact form below."
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now", onClick: handlePhoneCall,
|
||||
},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-female-receptionist-hotel-smiling-camera_1157-37453.jpg?_wi=1"
|
||||
imageAlt="Friendly staff at Provo River Inn"
|
||||
mediaAnimation="blur-reveal"
|
||||
frameStyle="card"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<div id="contact-form-section" data-section="contact-form-section" className="py-20 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-8">Contact Information</h2>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Phone className="w-6 h-6 text-blue-500 mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-1">Phone</h3>
|
||||
<p className="text-gray-600 mb-3">Call us directly for immediate assistance</p>
|
||||
<button
|
||||
onClick={handlePhoneCall}
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-semibold"
|
||||
>
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
+1 (385) 555-0123
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Mail className="w-6 h-6 text-green-500 mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-1">Email</h3>
|
||||
<p className="text-gray-600 mb-2">Send us a message anytime</p>
|
||||
<a
|
||||
href="mailto:hello@provoriverkinn.com"
|
||||
className="text-green-500 hover:text-green-600 font-semibold"
|
||||
>
|
||||
hello@provoriverkinn.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<MapPin className="w-6 h-6 text-red-500 mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-1">Address</h3>
|
||||
<p className="text-gray-600">
|
||||
123 River Road<br />
|
||||
Provo, UT 84604<br />
|
||||
United States
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="bg-white rounded-lg p-8 shadow-lg">
|
||||
<h3 className="text-2xl font-bold mb-6">Send us a Message</h3>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-semibold mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="your.email@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-semibold mb-2">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Your message..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-semibold"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer-main" data-section="footer-main">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Provo River Inn"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home", href: "/"},
|
||||
{
|
||||
label: "Rooms", href: "/rooms"},
|
||||
{
|
||||
label: "Amenities", href: "/amenities"},
|
||||
{
|
||||
label: "Gallery", href: "/gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Location", href: "/location"},
|
||||
{
|
||||
label: "Reviews", href: "/reviews"},
|
||||
{
|
||||
label: "Book Now", href: "/book"},
|
||||
{
|
||||
label: "Contact Us", href: "/contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms & Conditions", href: "#"},
|
||||
{
|
||||
label: "Cancellation Policy", href: "#"},
|
||||
{
|
||||
label: "FAQ", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user