Update src/app/contact/page.tsx
This commit is contained in:
@@ -2,131 +2,322 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactText from '@/components/sections/contact/ContactText';
|
import { useState } from 'react';
|
||||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
defaultTextAnimation="background-highlight"
|
defaultTextAnimation="background-highlight"
|
||||||
borderRadius="soft"
|
borderRadius="soft"
|
||||||
contentWidth="mediumSmall"
|
contentWidth="mediumSmall"
|
||||||
sizing="mediumLargeSizeMediumTitles"
|
sizing="mediumLargeSizeMediumTitles"
|
||||||
background="floatingGradient"
|
background="floatingGradient"
|
||||||
cardStyle="layered-gradient"
|
cardStyle="layered-gradient"
|
||||||
primaryButtonStyle="radial-glow"
|
primaryButtonStyle="radial-glow"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="layered"
|
||||||
headingFontWeight="normal"
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{
|
||||||
name: "Home", id: "/"},
|
name: "Home", id: "/"},
|
||||||
{
|
{
|
||||||
name: "Services", id: "/services"},
|
name: "Services", id: "/services"},
|
||||||
{
|
{
|
||||||
name: "FAQ", id: "/faq"},
|
name: "FAQ", id: "/faq"},
|
||||||
{
|
{
|
||||||
name: "Blog", id: "/blog"},
|
name: "Blog", id: "/blog"},
|
||||||
{
|
{
|
||||||
name: "Contact", id: "/contact"},
|
name: "Contact", id: "/contact"},
|
||||||
]}
|
]}
|
||||||
logoSrc="http://img.b2bpic.net/free-vector/flat-design-mechanical-engineering-logo_23-2150028712.jpg"
|
logoSrc="http://img.b2bpic.net/free-vector/flat-design-mechanical-engineering-logo_23-2150028712.jpg"
|
||||||
logoAlt="Tech Guru Logo"
|
logoAlt="Tech Guru Logo"
|
||||||
brandName="Tech Guru Technical Services Co"
|
brandName="Tech Guru Technical Services Co"
|
||||||
button={{
|
button={{
|
||||||
text: "Book a Repair", href: "/contact#appointment-form"}}
|
text: "Book a Repair", href: "/contact"}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact-form" data-section="contact-form">
|
<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">
|
||||||
<ContactText
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
useInvertedBackground={false}
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start">
|
||||||
background={{
|
{/* Left Column: Booking Form */}
|
||||||
variant: "plain"}}
|
<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' }}>
|
||||||
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.**"
|
<div>
|
||||||
buttons={[
|
<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>
|
||||||
text: "Submit Booking", onClick: () => console.log('Form submission simulated'),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact-details-map" data-section="contact-details-map">
|
{submissionSuccess ? (
|
||||||
<ContactText
|
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-md" role="alert">
|
||||||
useInvertedBackground={true}
|
<strong className="font-bold">Thank you!</strong>
|
||||||
background={{
|
<span className="block sm:inline"> Your booking has been received. Our technician will contact you shortly to confirm your appointment.</span>
|
||||||
variant: "animated-grid"}}
|
</div>
|
||||||
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={[
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
{
|
<div>
|
||||||
text: "Get Directions", href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
|
<label htmlFor="fullName" className="block text-sm font-medium text-foreground-darker mb-2">Full Name</label>
|
||||||
{
|
<input
|
||||||
text: "Call Us Directly", href: "tel:+971589315357"},
|
type="text"
|
||||||
]}
|
id="fullName"
|
||||||
/>
|
value={fullName}
|
||||||
</div>
|
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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
{/* Right Column: Contact Info & Map */}
|
||||||
<FooterMedia
|
<div className="flex flex-col gap-8 h-full">
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/holiday-shanghai-street-water-landmark-famous_1417-1178.jpg?_wi=2"
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 flex-grow">
|
||||||
imageAlt="Dubai City Skyline"
|
{contactInfo.map((item, index) => (
|
||||||
logoSrc="http://img.b2bpic.net/free-vector/gradient-cleaning-service-logo-template_23-2149221053.jpg"
|
<a
|
||||||
logoAlt="Tech Guru Logo"
|
key={index}
|
||||||
logoText="Tech Guru Technical Services Co"
|
href={item.href}
|
||||||
columns={[
|
target={item.href.startsWith('http') || item.href.startsWith('tel') || item.href.startsWith('mailto') ? '_blank' : '_self'}
|
||||||
{
|
rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||||
title: "Quick Links", items: [
|
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` }}
|
||||||
{
|
>
|
||||||
label: "Home", href: "/"},
|
<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>
|
||||||
label: "About Us", href: "/#about"},
|
<p className="text-sm text-foreground-lighter group-hover:text-primary-cta-text-hover transition-colors duration-300">{item.value}</p>
|
||||||
{
|
</a>
|
||||||
label: "FAQs", href: "/faq"},
|
))}
|
||||||
{
|
</div>
|
||||||
label: "Blog", href: "/blog"},
|
|
||||||
],
|
<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"
|
||||||
title: "Services", items: [
|
width="100%"
|
||||||
{
|
height="400"
|
||||||
label: "Washing Machine Repair", href: "/services/washing-machine"},
|
style={{ border: 0 }}
|
||||||
{
|
allowFullScreen={false}
|
||||||
label: "Refrigerator Repair", href: "/services/refrigerator"},
|
loading="lazy"
|
||||||
{
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
label: "Dishwasher Repair", href: "/services/dishwasher"},
|
aria-label="Google Map showing office location"
|
||||||
{
|
className="rounded-[16px]"
|
||||||
label: "View All Services", href: "/services"},
|
></iframe>
|
||||||
],
|
</div>
|
||||||
},
|
|
||||||
{
|
<div className="flex flex-col sm:flex-row gap-4 mt-4 animate-slide-up-initial" style={{ animationDelay: '0.9s' }}>
|
||||||
title: "Contact Information", items: [
|
<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" />
|
||||||
label: "+971 58 931 5357", href: "tel:+971589315357"},
|
</div>
|
||||||
{
|
</div>
|
||||||
label: "info@techguruuae.com", href: "mailto:info@techguruuae.com"},
|
</div>
|
||||||
{
|
</div>
|
||||||
label: "Al Moosa Tower 2, Dubai", href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
|
</div>
|
||||||
],
|
|
||||||
},
|
<div id="footer" data-section="footer">
|
||||||
{
|
<FooterMedia
|
||||||
title: "Business Hours", items: [
|
imageSrc="http://img.b2bpic.net/free-photo/holiday-shanghai-street-water-landmark-famous_1417-1178.jpg?_wi=2"
|
||||||
{
|
imageAlt="Dubai City Skyline"
|
||||||
label: "Open Daily", href: "#"},
|
logoSrc="http://img.b2bpic.net/free-vector/gradient-cleaning-service-logo-template_23-2149221053.jpg"
|
||||||
{
|
logoAlt="Tech Guru Logo"
|
||||||
label: "8:00 AM – 10:00 PM", href: "#"},
|
logoText="Tech Guru Technical Services Co"
|
||||||
],
|
columns={[
|
||||||
},
|
{
|
||||||
]}
|
title: "Quick Links", items: [
|
||||||
copyrightText="© 2024 Tech Guru Technical Services Co. All rights reserved."
|
{
|
||||||
/>
|
label: "Home", href: "/"},
|
||||||
</div>
|
{
|
||||||
|
label: "About Us", href: "/#about"},
|
||||||
|
{
|
||||||
|
label: "FAQs", href: "/faq"},
|
||||||
|
{
|
||||||
|
label: "Blog", href: "/blog"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Services", items: [
|
||||||
|
{
|
||||||
|
label: "Washing Machine Repair", href: "/services/washing-machine"},
|
||||||
|
{
|
||||||
|
label: "Refrigerator Repair", href: "/services/refrigerator"},
|
||||||
|
{
|
||||||
|
label: "Dishwasher Repair", href: "/services/dishwasher"},
|
||||||
|
{
|
||||||
|
label: "View All Services", href: "/services"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Contact Information", items: [
|
||||||
|
{
|
||||||
|
label: "+971 58 931 5357", href: "tel:+971589315357"},
|
||||||
|
{
|
||||||
|
label: "info@techguruuae.com", href: "mailto:info@techguruuae.com"},
|
||||||
|
{
|
||||||
|
label: "Al Moosa Tower 2, Dubai", href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Business Hours", items: [
|
||||||
|
{
|
||||||
|
label: "Open Daily", href: "#"},
|
||||||
|
{
|
||||||
|
label: "8:00 AM – 10:00 PM", href: "#"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
copyrightText="© 2024 Tech Guru Technical Services Co. All rights reserved."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user