From 8b6e85e20d64cf6c246ee2d9ef0d893ebc0d2419 Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Thu, 29 Jan 2026 14:51:48 +0000
Subject: [PATCH] Add src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 223 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 223 insertions(+)
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..693d0da
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import Input from '@/components/form/Input';
+import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
+import { MapPin, Phone, Mail, Clock } from 'lucide-react';
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: ''
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the form data to your backend
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setSubmitted(false);
+      setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="slide-background"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="floatingGradient"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="No Audi No Travel"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Fleet", id: "products" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Why Us", id: "features" },
+            { name: "Contact", id: "contact" }
+          ]}
+          bottomLeftText="Premium Vehicle Rentals"
+          bottomRightText="hello@noaudinotravel.com"
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="w-content-width mx-auto py-20 px-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          {/* Contact Form */}
+          <div>
+            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-2">Get In Touch</h1>
+            <p className="text-foreground/75 mb-8">Have a question about our fleet or rental process? We'd love to hear from you. Fill out the form below and our team will respond as soon as possible.</p>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Name</label>
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange('name', value)}
+                  placeholder="Your name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
+                <Input
+                  value={formData.email}
+                  onChange={(value) => handleInputChange('email', value)}
+                  type="email"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Phone</label>
+                <Input
+                  value={formData.phone}
+                  onChange={(value) => handleInputChange('phone', value)}
+                  type="tel"
+                  placeholder="+1 (555) 000-0000"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Subject</label>
+                <Input
+                  value={formData.subject}
+                  onChange={(value) => handleInputChange('subject', value)}
+                  placeholder="Inquiry about rental"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Message</label>
+                <textarea
+                  value={formData.message}
+                  onChange={(e) => handleInputChange('message', e.target.value)}
+                  placeholder="Tell us how we can help..."
+                  rows={5}
+                  required
+                  className="w-full px-4 py-3 rounded-theme bg-secondary-cta text-foreground placeholder-foreground/50 border border-accent focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+
+              <div className="pt-4">
+                <ButtonShiftHover
+                  text={submitted ? "Message Sent!" : "Send Message"}
+                  disabled={submitted}
+                />
+              </div>
+            </form>
+          </div>
+
+          {/* Business Information & Support Details */}
+          <div>
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-8">Contact Information</h2>
+
+            {/* Business Info Cards */}
+            <div className="space-y-6 mb-12">
+              {/* Address */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <MapPin className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Address</h3>
+                  <p className="text-foreground/75">123 Luxury Lane<br />Premium City, PC 12345<br />United States</p>
+                </div>
+              </div>
+
+              {/* Phone */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Phone className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Phone</h3>
+                  <p className="text-foreground/75">+1 (800) 123-4567<br />Available 24/7</p>
+                </div>
+              </div>
+
+              {/* Email */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Mail className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Email</h3>
+                  <p className="text-foreground/75">hello@noaudinotravel.com<br />support@noaudinotravel.com</p>
+                </div>
+              </div>
+
+              {/* Business Hours */}
+              <div className="card p-6 flex gap-4">
+                <div className="flex-shrink-0">
+                  <Clock className="w-6 h-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground mb-1">Business Hours</h3>
+                  <p className="text-foreground/75">Monday - Friday: 8:00 AM - 6:00 PM<br />Saturday - Sunday: 10:00 AM - 4:00 PM<br />Holidays: By appointment</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Support Details */}
+            <div>
+              <h3 className="text-2xl font-bold text-foreground mb-4">Support Services</h3>
+              <ul className="space-y-3 text-foreground/75">
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>24/7 Roadside Assistance:</strong> Emergency support for all active rentals</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Same-Day Booking:</strong> Call to book a vehicle with immediate availability</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Dedicated Account Manager:</strong> For monthly leases and corporate rentals</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Airport Services:</strong> Free pickup and dropoff at major airports</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-primary-cta font-bold mt-1">•</span>
+                  <span><strong>Vehicle Support:</strong> Technical assistance and replacement vehicles</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="No Audi No Travel" />
+      </div>
+    </ThemeProvider>
+  );
+}