mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 17:18:09 +00:00
296 lines
13 KiB
TypeScript
296 lines
13 KiB
TypeScript
"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 { Metadata } from "next";
|
|
|
|
// SEO Metadata for the Contact page
|
|
export const metadata: Metadata = {
|
|
title: "Contact Us | Owethu Managed Services (OMS)",
|
|
description:
|
|
"Get in touch with Owethu Managed Services. Contact us for IT solutions, resource augmentation, project management, and custom software development inquiries.",
|
|
alternates: {
|
|
canonical: "/contact",
|
|
},
|
|
openGraph: {
|
|
title: "Contact OMS",
|
|
description: "Reach out to OMS for expert IT services and solutions.",
|
|
url: "https://oms.africa/contact", // Replace with your actual domain
|
|
images: [
|
|
{
|
|
url: "/og-image-contact.jpg", // Create a specific OG image for contact
|
|
width: 1200,
|
|
height: 630,
|
|
alt: "Contact Owethu Managed Services",
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: "Contact OMS",
|
|
description: "Get in touch with Owethu Managed Services.",
|
|
images: ["/og-image-contact.jpg"],
|
|
},
|
|
};
|
|
|
|
// 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 (
|
|
// 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-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.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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">
|
|
<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-semibold font-poppins text-gray-800 dark:text-gray-100">
|
|
Our Office
|
|
</h3>
|
|
<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
|
|
<br />
|
|
Die Hoewes, Centurion, 0159
|
|
<br />
|
|
South Africa
|
|
</address>
|
|
<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"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4">
|
|
<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-semibold font-poppins text-gray-800 dark:text-gray-100">
|
|
Phone
|
|
</h3>
|
|
<a
|
|
href="tel:+27120513282"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4">
|
|
<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-semibold font-poppins text-gray-800 dark:text-gray-100">
|
|
Email
|
|
</h3>
|
|
<a
|
|
href="mailto:hello@oms.africa"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-4">
|
|
<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-semibold font-poppins text-gray-800 dark:text-gray-100">
|
|
Business Hours
|
|
</h3>
|
|
<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-gray-600 dark:text-gray-300 text-sm font-poppins">
|
|
Weekends & Public Holidays: Closed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|