Update src/app/contact/page.tsx
This commit is contained in:
@@ -2,11 +2,65 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import { useState } from 'react';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import Textarea from '@/components/form/Textarea';
|
||||
import ButtonExpandHover from '@/components/button/ButtonExpandHover';
|
||||
import { Phone, Mail, MapPin, Clock } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [phoneNumber, setPhoneNumber] = useState('');
|
||||
const [emailAddress, setEmailAddress] = useState('');
|
||||
const [propertyLocation, setPropertyLocation] = useState('');
|
||||
const [serviceRequired, setServiceRequired] = useState('');
|
||||
const [preferredDate, setPreferredDate] = useState('');
|
||||
const [preferredTime, setPreferredTime] = useState('');
|
||||
const [additionalDetails, setAdditionalDetails] = useState('');
|
||||
const [submissionSuccess, setSubmissionSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Here you would typically send the form data to a backend.
|
||||
// For this example, we'll just simulate a successful submission.
|
||||
console.log({
|
||||
fullName,
|
||||
phoneNumber,
|
||||
emailAddress,
|
||||
propertyLocation,
|
||||
serviceRequired,
|
||||
preferredDate,
|
||||
preferredTime,
|
||||
additionalDetails,
|
||||
});
|
||||
setSubmissionSuccess(true);
|
||||
// Optionally reset form fields
|
||||
setFullName('');
|
||||
setPhoneNumber('');
|
||||
setEmailAddress('');
|
||||
setPropertyLocation('');
|
||||
setServiceRequired('');
|
||||
setPreferredDate('');
|
||||
setPreferredTime('');
|
||||
setAdditionalDetails('');
|
||||
};
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Call Us", value: "+971 58 931 5357", href: "tel:+971589315357"},
|
||||
{
|
||||
icon: Mail,
|
||||
label: "Email", value: "info@techguruuae.com", href: "mailto:info@techguruuae.com"},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Office Address", value: "Al Moosa Tower 2, Near Emirates Tower Metro Station, Sheikh Zayed Road, Trade Center First, Dubai, United Arab Emirates", href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Working Hours", value: "Monday – Sunday, 8:00 AM – 10:00 PM", href: "#"},
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -39,38 +93,175 @@ export default function LandingPage() {
|
||||
logoAlt="Tech Guru Logo"
|
||||
brandName="Tech Guru Technical Services Co"
|
||||
button={{
|
||||
text: "Book a Repair", href: "/contact#appointment-form"}}
|
||||
text: "Book a Repair", href: "/contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
text="Get in Touch with Tech Guru Technical Services Co. \n\nFill out the form below to book a repair or inquire about our services. Our team will contact you shortly to confirm your appointment. \n\n**Name:** [Input Field]\n**Phone:** [Input Field]\n**Email:** [Input Field]\n**Location:** [Input Field]\n**Service Required:** [Dropdown/Input]\n**Preferred Date:** [Date Picker]\n**Preferred Time:** [Time Picker]\n**Message:** [Textarea]\n\n**Thank you. Our technician will contact you shortly.**"
|
||||
buttons={[
|
||||
{
|
||||
text: "Submit Booking", onClick: () => console.log('Form submission simulated'),
|
||||
},
|
||||
]}
|
||||
<div id="contact-booking" data-section="contact-booking" className="relative w-full overflow-hidden py-16 md:py-24 bg-background text-foreground animate-fade-in">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start">
|
||||
{/* Left Column: Booking Form */}
|
||||
<div id="appointment-form" className="relative p-6 md:p-10 rounded-[16px] shadow-soft-shadow bg-card h-full flex flex-col justify-between animate-slide-up-initial" style={{ animationDelay: '0.1s' }}>
|
||||
<div>
|
||||
<h2 className="text-3xl font-semibold mb-2 text-foreground">Book an Appliance Repair</h2>
|
||||
<p className="text-lg text-foreground-lighter mb-8">Fill out the form below and our technician will contact you shortly to confirm your appointment.</p>
|
||||
|
||||
{submissionSuccess ? (
|
||||
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-md" role="alert">
|
||||
<strong className="font-bold">Thank you!</strong>
|
||||
<span className="block sm:inline"> Your booking has been received. Our technician will contact you shortly to confirm your appointment.</span>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-foreground-darker mb-2">Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
placeholder="Your full name"
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-details-map" data-section="contact-details-map">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
text="Reach Us Anytime:\n\n**Phone:** +971 58 931 5357\n**Email:** info@techguruuae.com\n**Address:** Al Moosa Tower 2, Sheikh Zayed Road, Trade Center First, Dubai, UAE\n**Working Hours:** Open Daily, 8:00 AM – 10:00 PM\n\n\n**Google Map Location:** [Embedded Map Placeholder]"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Directions", href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
|
||||
{
|
||||
text: "Call Us Directly", href: "tel:+971589315357"},
|
||||
]}
|
||||
<div>
|
||||
<label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground-darker mb-2">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phoneNumber"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
placeholder="+971 5X XXX XXXX"
|
||||
pattern="^\+?[0-9\s\-()]{7,25}$"
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="emailAddress" className="block text-sm font-medium text-foreground-darker mb-2">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="emailAddress"
|
||||
value={emailAddress}
|
||||
onChange={(e) => setEmailAddress(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="propertyLocation" className="block text-sm font-medium text-foreground-darker mb-2">Property Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="propertyLocation"
|
||||
value={propertyLocation}
|
||||
onChange={(e) => setPropertyLocation(e.target.value)}
|
||||
placeholder="Apartment/Villa No., Street Name, Area"
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="serviceRequired" className="block text-sm font-medium text-foreground-darker mb-2">Service Required</label>
|
||||
<select
|
||||
id="serviceRequired"
|
||||
value={serviceRequired}
|
||||
onChange={(e) => setServiceRequired(e.target.value)}
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
>
|
||||
<option value="" disabled>Select a service</option>
|
||||
<option value="washing-machine">Washing Machine Repair</option>
|
||||
<option value="refrigerator">Refrigerator Repair</option>
|
||||
<option value="dishwasher">Dishwasher Repair</option>
|
||||
<option value="dryer">Dryer Repair</option>
|
||||
<option value="oven">Oven Repair</option>
|
||||
<option value="microwave">Microwave Repair</option>
|
||||
<option value="other">Other Appliance Repair</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="preferredDate" className="block text-sm font-medium text-foreground-darker mb-2">Preferred Date</label>
|
||||
<input
|
||||
type="date"
|
||||
id="preferredDate"
|
||||
value={preferredDate}
|
||||
onChange={(e) => setPreferredDate(e.target.value)}
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="preferredTime" className="block text-sm font-medium text-foreground-darker mb-2">Preferred Time</label>
|
||||
<input
|
||||
type="time"
|
||||
id="preferredTime"
|
||||
value={preferredTime}
|
||||
onChange={(e) => setPreferredTime(e.target.value)}
|
||||
required
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="additionalDetails" className="block text-sm font-medium text-foreground-darker mb-2">Additional Details</label>
|
||||
<Textarea
|
||||
id="additionalDetails"
|
||||
value={additionalDetails}
|
||||
onChange={setAdditionalDetails}
|
||||
placeholder="Any specific issues or requests?"
|
||||
rows={4}
|
||||
className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<ButtonExpandHover text="Book Appointment" type="submit" className="w-full mt-4" />
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Contact Info & Map */}
|
||||
<div className="flex flex-col gap-8 h-full">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 flex-grow">
|
||||
{contactInfo.map((item, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={item.href}
|
||||
target={item.href.startsWith('http') || item.href.startsWith('tel') || item.href.startsWith('mailto') ? '_blank' : '_self'}
|
||||
rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||
className="flex flex-col items-start p-6 rounded-[16px] shadow-soft-shadow bg-card text-foreground hover:bg-card-hover transition-all duration-300 group animate-slide-up-initial" style={{ animationDelay: `${0.3 + index * 0.1}s` }}
|
||||
>
|
||||
<item.icon className="w-8 h-8 text-primary-cta mb-4 group-hover:scale-110 transition-transform duration-300" />
|
||||
<h3 className="text-lg font-semibold mb-1 text-foreground-darker group-hover:text-primary-cta transition-colors duration-300">{item.label}</h3>
|
||||
<p className="text-sm text-foreground-lighter group-hover:text-primary-cta-text-hover transition-colors duration-300">{item.value}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative w-full rounded-[16px] overflow-hidden shadow-soft-shadow animate-slide-up-initial" style={{ animationDelay: '0.7s' }}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3609.434522923758!2d55.27634358485596!3d25.20379418386408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f4316d8042571%3A0x6a160d5b5b9f7a55!2sAl%20Moosa%20Tower%202%20-%20Sheikh%20Zayed%20Rd%20-%20Trade%20Centre%20First%20-%20Dubai%20-%20United%20Arab%20Emirates!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
|
||||
width="100%"
|
||||
height="400"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={false}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
aria-label="Google Map showing office location"
|
||||
className="rounded-[16px]"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4 animate-slide-up-initial" style={{ animationDelay: '0.9s' }}>
|
||||
<ButtonExpandHover text="Get Directions" href="https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai" className="flex-1" />
|
||||
<ButtonExpandHover text="Call Now" href="tel:+971589315357" className="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
|
||||
Reference in New Issue
Block a user