Add src/app/contact/page.tsx

2026-03-23 22:05:16 +00:00
parent 1edaa11c8c
commit 562973a401
1 changed files with 82 additions and 0 deletions
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function ContactPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "About", id: "about" },
+                        { name: "Services", id: "services" },
+                        { name: "Destinations", id: "destinations" },
+                        { name: "Blog", id: "blog" },
+                        { name: "Reviews", id: "reviews" },
+                        { name: "Contact", href: "/contact" }
+                    ]}
+                    brandName="Maritime Solutions"
+                    button={{ text: "Connect With Us", href: "/contact" }}
+                />
+                <ContactSplitForm
+                    title="Detailed Contact Form"
+                    description="Reach out to us for inquiries, partnerships, or support. We're here to help!"
+                    useInvertedBackground={false}
+                    imageSrc="/templates/luxury-travel-agency/contact/contact1.webp" 
+                    imageAlt="Global shipping network"
+                    mediaPosition="right"
+                    mediaAnimation="slide-up"
+                    buttonText="Send Message"
+                    inputs={[
+                        { name: "name", type: "text", placeholder: "Full Name", required: true },
+                        { name: "company", type: "text", placeholder: "Company Name", required: true },
+                        { name: "email", type: "email", placeholder: "Email Address", required: true },
+                        { name: "phone", type: "tel", placeholder: "Phone Number", required: false },
+                        { name: "typeOfNeed", type: "text", placeholder: "Type of Need (e.g., Logistics, Consultation, Support)", required: true }
+                    ]}
+                    textarea={{
+                        name: "message",                        placeholder: "Your detailed message...",                        rows: 6,
+                    }}
+                />
+                {/* 
+                    Google Maps Integration:
+                    Direct Google Maps integration requires custom code (e.g., an iframe or a map library component)
+                    which falls outside the scope of prop-based component modifications allowed by the registry.
+                    A dedicated component or custom HTML would be needed here to embed a map.
+                    For example:
+                    <div className="my-8 w-full max-w-4xl mx-auto h-96 bg-gray-200 flex items-center justify-center rounded-lg">
+                        <iframe
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE!2dYOUR_LONGITUDE!3dYOUR_ZOOM!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zYOUR_HQ_NAME!5e0!3m2!1sen!2sus!4v1678888888888!5m2!1sen!2sus"
+                            width="100%" height="100%" style={{ border: 0 }} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade">
+                        </iframe>
+                    </div>
+                */}
+                <FooterCard
+                    logoText="Maritime Solutions"
+                    copyrightText="© 2025 Maritime Solutions | Global Logistics & Insights"
+                    socialLinks={[
+                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}