Add src/app/request-a-quote/page.tsx

src/app/request-a-quote/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function RequestQuotePage() {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // In a real application, you'd collect the form data:
+    const formData = new FormData(e.currentTarget as HTMLFormElement);
+    const data = Object.fromEntries(formData.entries());
+    console.log("Form Data:", data);
+    alert("Your request for a quote has been submitted! We will contact you shortly.");
+    // Optionally clear the form
+    (e.target as HTMLFormElement).reset();
+  };
+
+  const navItems = [
+    { name: "Home", id: "/"},
+    { name: "About", id: "/#about"},
+    { name: "Services", id: "/#services"},
+    { name: "Global Reach", id: "/#metrics"},
+    { name: "Transport", id: "/#products"},
+    { name: "Testimonials", id: "/#testimonials"},
+    { name: "FAQ", id: "/#faq"},
+    { name: "Contact", id: "/request-a-quote"},
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-vector/perspective-logo-bright-color_1043-217.jpg"
+            logoAlt="Grupo Logistico Intermundo Logo"
+            brandName="Grupo Logístico Intermundo"
+            button={{
+              text: "Get a Quote",              href: "/request-a-quote"
+            }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="request-quote-form" data-section="request-quote-form" className="py-20 px-4 md:px-8 max-w-2xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-bold text-center mb-8">Request a Quote</h1>
+          <p className="text-center text-lg text-gray-700 mb-12">
+            Fill out the form below and our team will get back to you shortly with a personalized quote for your logistics needs.
+          </p>
+          <form onSubmit={handleSubmit} className="space-y-6 bg-white p-8 shadow-lg rounded-xl">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+              />
+            </div>
+            <div>
+              <label htmlFor="surname" className="block text-sm font-medium text-gray-700">Surname</label>
+              <input
+                type="text"
+                id="surname"
+                name="surname"
+                required
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+              />
+            </div>
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                required
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email Address</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+              />
+            </div>
+            <button
+              type="submit"
+              className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-primary-cta hover:bg-primary-cta-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+            >
+              Submit Request
+            </button>
+          </form>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}