Update src/app/contact-inquiry/page.tsx

Merge version_1 into main

src/app/contact-inquiry/page.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { useState } from "react";
+import Textarea from "@/components/form/Textarea";
+import { MessageCircle } from "lucide-react";
+
+export default function ContactInquiryPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    phone: "",    vehicleInterest: "",    inquiryType: "general",    message: ""
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission here (API call, email, etc.)
+    console.log("Form submitted:", formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({
+        name: "",        email: "",        phone: "",        vehicleInterest: "",        inquiryType: "general",        message: ""
+      });
+      setSubmitted(false);
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "Vehicles", id: "featured-vehicles" },
+            { name: "About", id: "about" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Back to Home", href: "/" }}
+          brandName="8BA Motors"
+        />
+      </div>
+
+      <div className="min-h-screen pt-32 pb-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="mb-12 text-center">
+            <div className="flex justify-center mb-4">
+              <MessageCircle className="w-12 h-12 text-blue-500" />
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">Car Inquiry Form</h1>
+            <p className="text-lg text-gray-600">Tell us about your interest in our luxury vehicles. Our team will get back to you shortly with personalized recommendations.</p>
+          </div>
+
+          {submitted ? (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
+              <h2 className="text-2xl font-bold text-green-800 mb-2">Thank You!</h2>
+              <p className="text-green-700">We've received your inquiry and will contact you within 24 hours.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-lg p-8 space-y-6">
+              {/* Personal Information */}
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold mb-4">Personal Information</h3>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-2">Full Name *</label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Your Full Name"
+                  />
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Email Address *</label>
+                    <input
+                      type="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="your@email.com"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Phone Number *</label>
+                    <input
+                      type="tel"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="+971 5X XXX XXXX"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Vehicle Interest */}
+              <div className="space-y-4 border-t pt-6">
+                <h3 className="text-xl font-semibold mb-4">Vehicle Interest</h3>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-2">Interested Vehicle *</label>
+                  <select
+                    name="vehicleInterest"
+                    value={formData.vehicleInterest}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="">Select a vehicle...</option>
+                    <option value="Ferrari Roma">Ferrari Roma - AED 450,000</option>
+                    <option value="Lamborghini Huracán">Lamborghini Huracán - AED 380,000</option>
+                    <option value="Porsche 911 Turbo">Porsche 911 Turbo - AED 320,000</option>
+                    <option value="Mercedes-AMG G63">Mercedes-AMG G63 - AED 280,000</option>
+                    <option value="Bentley Continental">Bentley Continental - AED 350,000</option>
+                    <option value="Other">Other / Not Sure</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Inquiry Type */}
+              <div className="space-y-4 border-t pt-6">
+                <h3 className="text-xl font-semibold mb-4">Inquiry Type</h3>
+                
+                <div className="space-y-3">
+                  {[
+                    { value: "general", label: "General Inquiry" },
+                    { value: "purchase", label: "Purchase Interest" },
+                    { value: "sell", label: "Sell My Vehicle" },
+                    { value: "testdrive", label: "Book Test Drive" },
+                    { value: "financing", label: "Financing Information" }
+                  ].map(option => (
+                    <label key={option.value} className="flex items-center">
+                      <input
+                        type="radio"
+                        name="inquiryType"
+                        value={option.value}
+                        checked={formData.inquiryType === option.value}
+                        onChange={handleChange}
+                        className="mr-3"
+                      />
+                      <span className="text-sm">{option.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Message */}
+              <div className="space-y-4 border-t pt-6">
+                <h3 className="text-xl font-semibold mb-4">Additional Information</h3>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-2">Your Message</label>
+                  <Textarea
+                    value={formData.message}
+                    onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}
+                    placeholder="Tell us more about your interest, specific requirements, or any questions you have..."
+                    rows={5}
+                  />
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="border-t pt-6">
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200"
+                >
+                  Submit Inquiry
+                </button>
+                <p className="text-xs text-gray-500 mt-4 text-center">
+                  By submitting this form, you agree to our Privacy Policy and Terms of Service.
+                </p>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}