mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
feature: create post
This commit is contained in:
libertyoms
151
app/(website)/contact/page.tsx
Normal file
151
app/(website)/contact/page.tsx
Normal file
@ -0,0 +1,151 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
import { FiMapPin, FiPhone, FiMail, FiClock } from "react-icons/fi"; // Import icons
|
||||
|
||||
// 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"],
|
||||
},
|
||||
};
|
||||
|
||||
// Contact Page Component
|
||||
export default function ContactPage() {
|
||||
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">
|
||||
Get In Touch
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
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) */}
|
||||
<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">
|
||||
Contact Information
|
||||
</h2>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiMapPin className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
Our Office
|
||||
</h3>
|
||||
<address className="text-muted-foreground not-italic text-sm leading-relaxed">
|
||||
Unit 10 B Centuria Park
|
||||
<br />
|
||||
265 Von Willich Avenue
|
||||
<br />
|
||||
Die Hoewes, Centurion, 0159
|
||||
<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
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline mt-2 inline-block"
|
||||
>
|
||||
View on Google Maps
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiPhone className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">Phone</h3>
|
||||
<a
|
||||
href="tel:+27120513282"
|
||||
className="text-muted-foreground hover:text-primary transition text-sm"
|
||||
>
|
||||
(012) 051 3282
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiMail className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">Email</h3>
|
||||
<a
|
||||
href="mailto:hello@oms.africa"
|
||||
className="text-muted-foreground hover:text-primary transition text-sm"
|
||||
>
|
||||
hello@oms.africa
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<FiClock className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
Business Hours
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Monday - Friday: 8:00 AM - 5:00 PM (SAST)
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
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">
|
||||
Send Us a Message
|
||||
</h2>
|
||||
<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> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user