From 43474de7c7d867305eccd610a21104fe5178c45a Mon Sep 17 00:00:00 2001 From: Mftee <113613891+mftee@users.noreply.github.com> Date: Tue, 27 Jan 2026 08:24:07 +0100 Subject: [PATCH] created the contact page --- frontend/app/contact/page.tsx | 449 +++++++++++++++++++++++++++++++++- 1 file changed, 444 insertions(+), 5 deletions(-) diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx index 4921650..af11d5a 100644 --- a/frontend/app/contact/page.tsx +++ b/frontend/app/contact/page.tsx @@ -1,8 +1,447 @@ -export default function Contact() { +import React, { useState } from 'react'; +import { + Building2, + Mail, + Phone, + MapPin, + Send, + CheckCircle, + AlertCircle, + Clock, + MessageSquare, + User, + Briefcase, + Globe, + Twitter, + Linkedin, + Github +} from 'lucide-react'; + +const ContactUsPage = () => { + const [formData, setFormData] = useState({ + fullName: '', + email: '', + phone: '', + company: '', + subject: '', + message: '' + }); + const [errors, setErrors] = useState>({}); + const [isSubmitted, setIsSubmitted] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ ...prev, [field]: value })); + if (errors[field]) { + setErrors(prev => { + const newErrors = { ...prev }; + delete newErrors[field]; + return newErrors; + }); + } + }; + + const validateForm = () => { + const newErrors: Record = {}; + + if (!formData.fullName.trim()) newErrors.fullName = 'Full name is required'; + if (!formData.email.trim()) newErrors.email = 'Email is required'; + else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Invalid email format'; + if (!formData.subject.trim()) newErrors.subject = 'Subject is required'; + if (!formData.message.trim()) newErrors.message = 'Message is required'; + else if (formData.message.trim().length < 10) newErrors.message = 'Message must be at least 10 characters'; + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleSubmit = () => { + if (validateForm()) { + setIsLoading(true); + + // Simulate API call + setTimeout(() => { + setIsLoading(false); + setIsSubmitted(true); + console.log('Contact form submitted:', formData); + }, 1500); + } + }; + + const contactInfo = [ + { + icon: , + title: 'Email', + content: 'support@managehub.com', + link: 'mailto:support@managehub.com' + }, + { + icon: , + title: 'Phone', + content: '+234 800 000 0000', + link: 'tel:+2348000000000' + }, + { + icon: , + title: 'Office', + content: 'Abuja, FCT, Nigeria', + link: null + }, + { + icon: , + title: 'Business Hours', + content: 'Mon - Fri: 9:00 AM - 6:00 PM WAT', + link: null + } + ]; + + const socialLinks = [ + { icon: , label: 'Twitter', href: '#' }, + { icon: , label: 'LinkedIn', href: '#' }, + { icon: , label: 'GitHub', href: '#' } + ]; + + if (isSubmitted) { return ( -
-

Contact Us

-

Contact form coming soon...

+
+
+ {/* Header */} +
+
+
+ +
+
+

ManageHub

+
+ + {/* Success Card */} +
+
+
+
+ +
+
+ +
+

+ Message Sent Successfully! +

+

+ Thank you for reaching out to us. We've received your message and our team will get back to you within 24-48 hours. +

+
+ +
+

+ We've sent a confirmation email to {formData.email} +

+
+ + + + + Back to Home + +
+
+
); -} \ No newline at end of file + } + + return ( +
+
+ {/* Header */} +
+
+
+ +
+
+

Get in Touch

+

+ Have questions about ManageHub? We'd love to hear from you. Send us a message and we'll respond as soon as possible. +

+
+ +
+ {/* Contact Form */} +
+
+
+ +

Send us a Message

+
+ +
+ {/* Full Name */} +
+ +
+
+ +
+ handleInputChange('fullName', e.target.value)} + className={`block w-full pl-10 pr-3 py-3 border rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all ${ + errors.fullName ? 'border-red-500' : 'border-gray-300' + }`} + placeholder="Enter your full name" + /> +
+ {errors.fullName && ( +

+ + {errors.fullName} +

+ )} +
+ + {/* Email and Phone */} +
+
+ +
+
+ +
+ handleInputChange('email', e.target.value)} + className={`block w-full pl-10 pr-3 py-3 border rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all ${ + errors.email ? 'border-red-500' : 'border-gray-300' + }`} + placeholder="your.email@example.com" + /> +
+ {errors.email && ( +

+ + {errors.email} +

+ )} +
+ +
+ +
+
+ +
+ handleInputChange('phone', e.target.value)} + className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all" + placeholder="+234 800 000 0000" + /> +
+
+
+ + {/* Company */} +
+ +
+
+ +
+ handleInputChange('company', e.target.value)} + className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all" + placeholder="Your company name" + /> +
+
+ + {/* Subject */} +
+ +
+
+ +
+ handleInputChange('subject', e.target.value)} + className={`block w-full pl-10 pr-3 py-3 border rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all ${ + errors.subject ? 'border-red-500' : 'border-gray-300' + }`} + placeholder="How can we help you?" + /> +
+ {errors.subject && ( +

+ + {errors.subject} +

+ )} +
+ + {/* Message */} +
+ + + {errors.message && ( +

+ + {errors.message} +

+ )} +

+ {formData.message.length} characters +

+
+ + {/* Submit Button */} + +
+
+
+ + {/* Contact Information Sidebar */} +
+ {/* Contact Info Cards */} +
+

Contact Information

+
+ {contactInfo.map((info, index) => ( +
+
+
+ {info.icon} +
+
+
+

{info.title}

+ {info.link ? ( + + {info.content} + + ) : ( +

{info.content}

+ )} +
+
+ ))} +
+
+ + {/* Social Media */} +
+

Follow Us

+
+ {socialLinks.map((social, index) => ( + + {social.icon} + + ))} +
+
+ + {/* Help Box */} +
+

Need Quick Help?

+

+ Check out our documentation and FAQ section for instant answers to common questions. +

+ + Visit Help Center + → + +
+
+
+ + {/* Footer */} +
+

© 2025 ManageHub. All rights reserved.

+ +
+
+
+ ); +}; + +export default ContactUsPage;