bender/cce4f546-367a-422a-a1df-b75f90cd97f7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/contact/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 15:14:12 +00:00
parent c84f126d6f
commit 602d6a7d01
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/contact/page.tsx
View File

@@ -93,7 +93,7 @@ export default function ContactPage() {
logoAlt="Tech Guru Logo"
brandName="Tech Guru Technical Services Co"
button={{
text: "Book a Repair", href: "/contact"}}
text: "Book a Repair", href: "/contact#appointment-form"}}
/>
</div>
@@ -101,7 +101,7 @@ export default function ContactPage() {
<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 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 min-h-[500px]" 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>
@@ -122,7 +122,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
<div>
@@ -135,7 +135,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
<div>
@@ -147,7 +147,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
<div>
@@ -159,7 +159,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
<div>
@@ -169,7 +169,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] 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>
@@ -190,7 +190,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
<div>
@@ -201,7 +201,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
/>
</div>
</div>
@@ -213,7 +213,7 @@ export default function ContactPage() {
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"
className="w-full p-3 rounded-[16px] 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" />