mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
feature: contact us fixed
This commit is contained in:
libertyoms
@ -1,7 +1,17 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
"use client"; // Needed for FAQ state
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
FaMapMarkerAlt,
|
||||
FaPhone,
|
||||
FaEnvelope,
|
||||
FaClock,
|
||||
FaChevronDown,
|
||||
FaChevronUp,
|
||||
} from "react-icons/fa"; // Using Fa icons for consistency
|
||||
import { COLORS } from "@/constants"; // Using COLORS constant
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
import { FiMapPin, FiPhone, FiMail, FiClock } from "react-icons/fi"; // Import icons
|
||||
import { Metadata } from "next";
|
||||
|
||||
// SEO Metadata for the Contact page
|
||||
export const metadata: Metadata = {
|
||||
@ -32,17 +42,62 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
// Define the structure for FAQ items
|
||||
interface FAQItem {
|
||||
id: number;
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
const faqData: FAQItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
question: "What services does Owethu Managed Services offer?",
|
||||
answer:
|
||||
"We offer a comprehensive range of IT services including custom software development, resource augmentation (IT staffing), project management, cloud solutions, system integration, and IT consulting tailored to various industries.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
question: "Which industries do you specialize in?",
|
||||
answer:
|
||||
"We have deep expertise in Financial Services & Fintech, Automotive, Technology, and Retail/E-commerce sectors, understanding the unique challenges and opportunities within each.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
question: "How can I request a quote for a project?",
|
||||
answer:
|
||||
"You can request a quote by filling out the contact form on this page with details about your project requirements, calling us directly, or sending an email to hello@oms.africa. We'll get back to you promptly to discuss your needs.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
question: "What are your business hours?",
|
||||
answer:
|
||||
"Our standard business hours are Monday to Friday, 8:00 AM to 5:00 PM South African Standard Time (SAST). We are closed on weekends and public holidays.",
|
||||
},
|
||||
];
|
||||
|
||||
// Contact Page Component
|
||||
export default function ContactPage() {
|
||||
const [openFaqId, setOpenFaqId] = useState<number | null>(null);
|
||||
|
||||
const toggleFaq = (id: number) => {
|
||||
setOpenFaqId(openFaqId === id ? null : id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-background to-secondary/50 text-foreground">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 md:py-28 text-center bg-primary/10 dark:bg-primary/5 border-b border-border">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4 text-primary">
|
||||
// Added dark mode base styles
|
||||
<div className="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-x-hidden font-poppins">
|
||||
{/* Hero Section - Adjusted padding for mobile */}
|
||||
<section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-16 md:py-28">
|
||||
<div className="absolute inset-0 bg-black opacity-40 dark:opacity-50"></div>
|
||||
<div className="container mx-auto px-4 md:px-6 text-center relative z-10">
|
||||
<h1
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md dark:text-gold-400" // Use primary color directly or a dark-mode friendly version
|
||||
style={{ color: COLORS.primary }} // Keep gold color for heading, ensure contrast in dark mode
|
||||
>
|
||||
Get In Touch
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
<p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins">
|
||||
We're here to help! Whether you have a question about our
|
||||
services, need assistance, or want to discuss a project, reach out
|
||||
and let us know.
|
||||
@ -50,23 +105,31 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content Area (Form + Info) */}
|
||||
<section className="py-16 md:py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-16 lg:gap-20 items-start">
|
||||
{/* Contact Information Section */}
|
||||
<div className="space-y-8 bg-card p-8 rounded-lg border border-border shadow-sm">
|
||||
<h2 className="text-3xl font-semibold mb-6 text-foreground">
|
||||
{/* Main Content Area (Form + Info) - Adjusted padding, added dark mode */}
|
||||
<section className="py-12 md:py-24 bg-white dark:bg-gray-800">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
{/* Grid stacks vertically by default, becomes 2 columns on large screens */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-16 items-start">
|
||||
{/* Contact Information Section - Added dark mode styles */}
|
||||
<div
|
||||
className="bg-gray-50 dark:bg-gray-700 p-6 md:p-8 rounded-xl shadow-md border-t-4 border-gold-500 dark:border-gold-400 space-y-6 md:space-y-8"
|
||||
style={{ borderColor: COLORS.primary }} // Keep primary border color
|
||||
>
|
||||
<h2 className="text-2xl md:text-3xl font-bold font-poppins text-gray-900 dark:text-white mb-6">
|
||||
Contact Information
|
||||
</h2>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiMapPin className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<FaMapMarkerAlt
|
||||
className="w-6 h-6 text-gold-500 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
<h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
|
||||
Our Office
|
||||
</h3>
|
||||
<address className="text-muted-foreground not-italic text-sm leading-relaxed">
|
||||
<address className="text-gray-600 dark:text-gray-300 font-poppins not-italic text-sm leading-relaxed">
|
||||
{/* ... existing address lines ... */}
|
||||
Unit 10 B Centuria Park
|
||||
<br />
|
||||
265 Von Willich Avenue
|
||||
@ -75,12 +138,12 @@ export default function ContactPage() {
|
||||
<br />
|
||||
South Africa
|
||||
</address>
|
||||
{/* Optional: Link to Google Maps */}
|
||||
<a
|
||||
href="https://www.google.com/maps/place/Owethu+Managed+Services/@-25.863168,28.186075,17z/data=!3m1!4b1!4m6!3m5!1s0x1e9565b7018f5f9b:0x4d8a4ae3a2c0d9a1!8m2!3d-25.8631728!4d28.1886499!16s%2Fg%2F11h1_q_1_f?entry=ttu" // Replace with your actual Google Maps link
|
||||
href="https://www.google.com/maps/place/Owethu+Managed+Services/@-25.863168,28.186075,17z/data=!3m1!4b1!4m6!3m5!1s0x1e9565b7018f5f9b:0x4d8a4ae3a2c0d9a1!8m2!3d-25.8631728!4d28.1886499!16s%2Fg%2F11h1_q_1_f?entry=ttu"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline mt-2 inline-block"
|
||||
className="text-sm font-medium font-poppins hover:underline mt-2 inline-block dark:text-gold-400 dark:hover:text-gold-300"
|
||||
style={{ color: COLORS.primary }} // Keep primary link color
|
||||
>
|
||||
View on Google Maps
|
||||
</a>
|
||||
@ -88,12 +151,17 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiPhone className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<FaPhone
|
||||
className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">Phone</h3>
|
||||
<h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
|
||||
Phone
|
||||
</h3>
|
||||
<a
|
||||
href="tel:+27120513282"
|
||||
className="text-muted-foreground hover:text-primary transition text-sm"
|
||||
className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
|
||||
>
|
||||
(012) 051 3282
|
||||
</a>
|
||||
@ -101,12 +169,17 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiMail className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<FaEnvelope
|
||||
className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">Email</h3>
|
||||
<h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
|
||||
Email
|
||||
</h3>
|
||||
<a
|
||||
href="mailto:hello@oms.africa"
|
||||
className="text-muted-foreground hover:text-primary transition text-sm"
|
||||
className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
|
||||
>
|
||||
hello@oms.africa
|
||||
</a>
|
||||
@ -114,38 +187,109 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiClock className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<FaClock
|
||||
className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
<h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
|
||||
Business Hours
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm font-poppins">
|
||||
Monday - Friday: 8:00 AM - 5:00 PM (SAST)
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm font-poppins">
|
||||
Weekends & Public Holidays: Closed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<div className="bg-card p-8 rounded-lg border border-border shadow-sm">
|
||||
<h2 className="text-3xl font-semibold mb-6 text-foreground">
|
||||
{/* Contact Form Section - Added dark mode styles */}
|
||||
<div
|
||||
className="bg-gray-50 dark:bg-gray-700 p-6 md:p-8 rounded-xl shadow-md border-t-4 border-gold-500 dark:border-gold-400"
|
||||
style={{ borderColor: COLORS.primary }} // Keep primary border color
|
||||
>
|
||||
<h2 className="text-2xl md:text-3xl font-bold font-poppins text-gray-900 dark:text-white mb-6">
|
||||
Send Us a Message
|
||||
</h2>
|
||||
{/* Assuming ContactForm handles its own dark mode or inherits text colors */}
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Optional: Map Section Placeholder */}
|
||||
{/* <section className="h-96 bg-muted border-t border-border">
|
||||
<div className="container mx-auto h-full flex items-center justify-center">
|
||||
<p className="text-muted-foreground">[Embedded Map Placeholder - e.g., Google Maps iframe]</p>
|
||||
</div>
|
||||
</section> */}
|
||||
{/* Map Section - Adjusted padding, added dark mode, responsive height */}
|
||||
<section className="py-12 md:py-24 bg-gray-100 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-8 text-center">
|
||||
Find Us Here
|
||||
</h2>
|
||||
{/* Adjusted height for different screen sizes */}
|
||||
<div className="aspect-w-16 aspect-h-9 h-64 sm:h-80 md:h-96 mx-auto rounded-lg overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700">
|
||||
<iframe
|
||||
// ... existing iframe attributes ...
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1313.49241475678!2d28.192648350415848!3d-25.85177958049519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e95643aa4e82f9f%3A0xe4052722532cd30f!2sCenturia%20Park!5e1!3m2!1sen!2sza!4v1745745054858!5m2!1sen!2sza"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Owethu Managed Services Location"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section - Adjusted padding, added dark mode */}
|
||||
<section className="py-12 md:py-24 bg-white dark:bg-gray-800">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-10 md:mb-12 text-center">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<div className="max-w-5xl mx-auto space-y-4">
|
||||
{faqData.map((faq) => (
|
||||
<div
|
||||
key={faq.id}
|
||||
className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden shadow-sm bg-white dark:bg-gray-700"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleFaq(faq.id)}
|
||||
className="flex justify-between items-center w-full p-4 text-left font-semibold font-poppins text-gray-800 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gold-500 dark:focus:ring-gold-400 focus:ring-opacity-50"
|
||||
aria-expanded={openFaqId === faq.id}
|
||||
aria-controls={`faq-answer-${faq.id}`}
|
||||
>
|
||||
<span className="text-sm md:text-base">{faq.question}</span>
|
||||
{openFaqId === faq.id ? (
|
||||
<FaChevronUp
|
||||
className="w-5 h-5 text-gold-500 flex-shrink-0 ml-2" // Added flex-shrink-0 and margin
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
) : (
|
||||
<FaChevronDown
|
||||
className="w-5 h-5 text-gold-500 flex-shrink-0 ml-2" // Added flex-shrink-0 and margin
|
||||
style={{ color: COLORS.primary }} // Keep primary icon color
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
id={`faq-answer-${faq.id}`}
|
||||
// Adjusted padding and text size
|
||||
className={`px-4 pb-4 pt-2 text-gray-600 dark:text-gray-300 font-poppins text-xs sm:text-sm leading-relaxed transition-all duration-300 ease-in-out ${
|
||||
openFaqId === faq.id ? "block" : "hidden"
|
||||
}`}
|
||||
role="region"
|
||||
aria-labelledby={`faq-question-${faq.id}`}
|
||||
>
|
||||
{faq.answer}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user