bender/78463c7c-2d0f-4561-9f1b-4a17142d2595
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4 into main #8

Merged
bender merged 2 commits from version_4 into main 2026-03-17 23:38:00 +00:00
Conversation 0 Commits 2 Files Changed 2 +203 -32
2 changed files with 203 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,202 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Mail, MapPin, Phone, Clock, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
import { useState } from "react";
export default function ContactPage() {
const [formData, setFormData] = useState({
name: "", email: "", phone: ""
});
const handleFormSubmit = (data: Record<string, string>) => {
console.log("Contact form submitted:", data);
setFormData({ name: "", email: "", phone: "" });
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="gradient-mesh"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Dallas Automotive"
navItems={[
{ name: "Services", id: "services" },
{ name: "Why Us", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Book Service", href: "/"
}}
/>
</div>
<div id="contact" data-section="contact" className="py-20">
<div className="max-w-6xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
{/* Left Column - Contact Info */}
<div className="space-y-8">
<div>
<h1 className="text-5xl font-bold mb-4">Get in Touch</h1>
<p className="text-lg text-gray-600">Have questions about our services? We're here to help. Contact us through any of the methods below or fill out the form.</p>
</div>
{/* Phone */}
<div className="flex gap-4 items-start">
<div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
<Phone className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="font-semibold text-lg mb-1">Phone</h3>
<p className="text-gray-600">Call us for immediate assistance</p>
<a href="tel:+19722728000" className="text-primary-cta font-semibold text-lg hover:underline mt-2 block">
+1 (972) 272-8000
</a>
</div>
</div>
{/* Location */}
<div className="flex gap-4 items-start">
<div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
<MapPin className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="font-semibold text-lg mb-1">Location</h3>
<p className="text-gray-600">Visit us at our facility</p>
<p className="font-semibold mt-2">
Dallas Automotive<br />
1234 Motor Lane<br />
Dallas, TX 75001
</p>
</div>
</div>
{/* Hours */}
<div className="flex gap-4 items-start">
<div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
<Clock className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="font-semibold text-lg mb-1">Business Hours</h3>
<div className="text-gray-600 space-y-1">
<p>Monday - Friday: 8:00 AM - 6:00 PM</p>
<p>Saturday: 9:00 AM - 4:00 PM</p>
<p>Sunday: Closed</p>
</div>
</div>
</div>
{/* Email */}
<div className="flex gap-4 items-start">
<div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
<Mail className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="font-semibold text-lg mb-1">Email</h3>
<p className="text-gray-600">Send us your inquiry</p>
<a href="mailto:info@dallasautomotive.com" className="text-primary-cta font-semibold hover:underline mt-2 block">
info@dallasautomotive.com
</a>
</div>
</div>
{/* Social Media */}
<div>
<h3 className="font-semibold text-lg mb-4">Follow Us</h3>
<div className="flex gap-4">
<a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
<Facebook className="w-5 h-5 text-white" />
</a>
<a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
<Twitter className="w-5 h-5 text-white" />
</a>
<a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
<Linkedin className="w-5 h-5 text-white" />
</a>
<a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
<Instagram className="w-5 h-5 text-white" />
</a>
</div>
</div>
</div>
{/* Right Column - Contact Form & Map */}
<div className="space-y-8">
{/* Contact Form */}
<ContactSplitForm
title="Send us a Message"
description="Fill out the form below and we'll get back to you as soon as possible."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
{ name: "phone", type: "tel", placeholder: "Your Phone Number", required: false }
]}
textarea={{ name: "message", placeholder: "Tell us about your service needs...", rows: 5, required: true }}
buttonText="Send Message"
onSubmit={handleFormSubmit}
useInvertedBackground={false}
mediaAnimation="blur-reveal"
/>
{/* Google Map Placeholder */}
<div className="bg-gray-200 rounded-lg overflow-hidden h-96 border-2 border-primary-cta/20">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3357.7482627688043!2d-96.80667!3d32.7767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864e9e0d4a4a4a4b%3A0x4a4a4a4a4a4a4a4a!2s1234%20Motor%20Lane%2C%20Dallas%2C%20TX!5e0!3m2!1sen!2sus!4v1234567890"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Services", items: [
{ label: "Oil Changes", href: "/#services" },
{ label: "Brake Service", href: "/#services" },
{ label: "Tire Services", href: "/#services" },
{ label: "Diagnostics", href: "/#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Why Us", href: "/#about" },
{ label: "Testimonials", href: "/#testimonials" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Support", items: [
{ label: "Warranty Info", href: "#" },
{ label: "Schedule Service", href: "/#contact" },
{ label: "Contact Us", href: "/contact" }
]
}
]}
copyrightText="© 2024 Dallas Automotive. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

33
src/app/page.tsx
View File

@@ -7,7 +7,6 @@ import FeatureHoverPattern from "@/components/sections/feature/featureHoverPatte
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Award, CheckCircle, Cog, Droplets, Gauge, Phone, Rotate3D, Shield, TrendingUp, Wrench, Zap } from "lucide-react";
@@ -64,7 +63,7 @@ export default function LandingPage() {
{ name: "Services", id: "services" },
{ name: "Why Us", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }
{ name: "Contact", id: "contact" }
]}
button={{
text: "Book Service", onClick: handleOpenModal
@@ -213,35 +212,6 @@ export default function LandingPage() {
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Got questions about our services? We've got answers. Contact us directly if you don't find what you need."
buttons={[{ text: "Contact Us", onClick: handleOpenModal }]}
buttonAnimation="slide-up"
faqsAnimation="slide-up"
textPosition="left"
useInvertedBackground={false}
faqs={[
{
id: "faq-1", title: "How often should I get an oil change?", content: "Most modern vehicles need an oil change every 5,000 to 7,500 miles or every 6 months, whichever comes first. Check your owner's manual for specific recommendations for your vehicle."
},
{
id: "faq-2", title: "Do you offer warranty on repairs?", content: "Yes! We stand behind our work with a 12-month or 12,000-mile warranty on all repairs, whichever comes first. This gives you peace of mind and confidence in our service."
},
{
id: "faq-3", title: "How long does a typical service take?", content: "Basic maintenance like oil changes typically take 30-45 minutes. More complex repairs vary depending on the issue. We'll provide an estimate upfront and keep you updated on progress."
},
{
id: "faq-4", title: "What payment options do you accept?", content: "We accept all major credit cards, debit cards, checks, and cash. We also offer financing options for larger repairs to help make service more affordable."
},
{
id: "faq-5", title: "Can you work on my specific vehicle brand?", content: "Yes! Our ASE-certified technicians have experience with all makes and models, from domestic vehicles to imports. Whether it's Honda, Ford, Toyota, or any other brand, we can help."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
@@ -278,7 +248,6 @@ export default function LandingPage() {
},
{
title: "Support", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Warranty Info", href: "#" },
{ label: "Schedule Service", href: "#contact" },
{ label: "Contact Us", href: "#contact" }