Update src/app/contact/page.tsx
This commit is contained in:
@@ -5,21 +5,17 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Instagram, Facebook, Linkedin, MapPin, Clock } from "lucide-react";
|
||||
|
||||
export const metadata = {
|
||||
title: 'Contact Us | Luxuria Travel',
|
||||
description: 'Get in touch with Luxuria Travel to plan your bespoke luxury journey. Find our office hours and location.',
|
||||
};
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import { Instagram, Facebook, Linkedin, Phone, Mail } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Destinations", id: "/#destinations" },
|
||||
{ name: "Reviews", id: "/#reviews" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Gallery", id: "/gallery" }
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Admissions", href: "/admissions" },
|
||||
{ name: "Contact", href: "/contact" }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -36,75 +32,43 @@ export default function ContactPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "/contact" }}
|
||||
/>
|
||||
</div>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "/contact" }}
|
||||
/>
|
||||
|
||||
<div id="contact-info-and-form" data-section="contact-info-and-form" className="relative isolate overflow-hidden py-16 sm:py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
|
||||
<div className="max-w-xl lg:max-w-lg">
|
||||
<p className="text-base font-semibold leading-7 text-primary-cta">Get in touch</p>
|
||||
<h2 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Visit Us or Send a Message</h2>
|
||||
<p className="mt-6 text-lg leading-8 text-foreground/80">
|
||||
Whether you prefer to connect digitally or in person, our team is ready to assist you in planning your next bespoke adventure.
|
||||
</p>
|
||||
<dl className="mt-10 space-y-4 text-base leading-7 text-foreground/80">
|
||||
<div className="flex gap-x-4">
|
||||
<dt className="flex-none">
|
||||
<span className="sr-only">Address</span>
|
||||
<MapPin className="h-7 w-6 text-foreground" aria-hidden="true" />
|
||||
</dt>
|
||||
<dd>
|
||||
123 Serenity Lane, Suite 100
|
||||
<br />
|
||||
Paradise City, 90210, Global
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex gap-x-4">
|
||||
<dt className="flex-none">
|
||||
<span className="sr-only">Office Hours</span>
|
||||
<Clock className="h-7 w-6 text-foreground" aria-hidden="true" />
|
||||
</dt>
|
||||
<dd>
|
||||
Monday - Friday: 9:00 AM - 6:00 PM
|
||||
<br />
|
||||
Saturday: 10:00 AM - 2:00 PM
|
||||
<br />
|
||||
Sunday: Closed
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="mt-10 bg-gray-200 aspect-video rounded-lg overflow-hidden flex items-center justify-center text-gray-500 text-sm">
|
||||
<p>Location Map Placeholder</p>
|
||||
</div>
|
||||
</div>
|
||||
<ContactSplitForm
|
||||
title="Plan Your Journey"
|
||||
description="Let us create your perfect luxury travel experience"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/contact/contact1.webp"
|
||||
imageAlt="Luxury travel"
|
||||
mediaPosition="left"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Start Planning"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||
{ name: "destination", type: "text", placeholder: "Dream Destination" }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us about your ideal travel experience...", rows: 4
|
||||
}}
|
||||
className="relative isolate p-6 md:p-8 lg:p-10 rounded-xl shadow-lg bg-card"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-20">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch with Luxuria"
|
||||
description="We're here to assist you with your luxury travel plans. Fill out the form below or use our direct contact details to connect with us."
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/contact/contact1.webp"
|
||||
imageAlt="Contact Us"
|
||||
mediaPosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Send Inquiry"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||
{ name: "subject", type: "text", placeholder: "Subject of Inquiry" }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "How can we help you plan your ideal travel experience or answer your questions?", rows: 5
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextAbout
|
||||
tag="Direct Contact"
|
||||
title="Prefer to speak directly?"
|
||||
description="Our team is available to provide personalized assistance and answer any questions you may have about your next luxury journey."
|
||||
buttons={[
|
||||
{ text: "Call Us: +1 (555) 123-4567", icon: Phone, href: "tel:+15551234567" },
|
||||
{ text: "Email Us: info@luxuria.com", icon: Mail, href: "mailto:info@luxuria.com" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterCard
|
||||
|
||||
Reference in New Issue
Block a user